/* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION FONT FAMILIES VVV VVV VVV VVV VVV VVV VVV */ /* .thin-text { font-family: var(--font_1); font-weight: 100; } .light-text { font-family: var(--font_1); font-weight: 300; } .regular-text/book-text { font-family: var(--font_1); font-weight: 400; } .medium-text { font-family: var(--font_1); font-weight: 500; } .bold-text { font-family: var(--font_1); font-weight: 700; } .ultra-text { font-family: var(--font_1); font-weight: 800; } .black-text { font-family: var(--font_1); font-weight: 900; } */ /* --> FONT FAMILIES > AVERTA PE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @font-face { font-family: 'AvertaPE'; src: url('../FONT FAMILIES/AvertaPE/AvertaPE-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'AvertaPE'; src: url('../fonts/AvertaPE/AvertaPE-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'AvertaPE'; src: url('../fonts/AvertaPE/AvertaPE-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } /* --> FONT FAMILIES > GOTHAM GREEK [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @font-face { font-family: 'Gotham Greek'; src: url('../fonts/gotham_greek/gothamgreek-thin-webfont.woff2') format('woff2'), url('../fonts/gotham_greek/gothamgreek-thin-webfont.woff') format('woff'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham Greek'; src: url('../fonts/gotham_greek/gothamgreek-light-webfont.woff2') format('woff2'), url('../fonts/gotham_greek/gothamgreek-light-webfont.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham Greek'; src: url('../fonts/gotham_greek/gothamgreek-book-webfont.woff2') format('woff2'), url('../fonts/gotham_greek/gothamgreek-book-webfont.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham Greek'; src: url('../fonts/gotham_greek/gothamgreek-medium-webfont.woff2') format('woff2'), url('../fonts/gotham_greek/gothamgreek-medium-webfont.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham Greek'; src: url('../fonts/gotham_greek/gothamgreek-bold-webfont.woff2') format('woff2'), url('../fonts/gotham_greek/gothamgreek-bold-webfont.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham Greek'; src: url('../fonts/gotham_greek/gothamgreek-ultra-webfont.woff2') format('woff2'), url('../fonts/gotham_greek/gothamgreek-ultra-webfont.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham Greek'; src: url('../fonts/gotham_greek/gothamgreek-black-webfont.woff2') format('woff2'), url('../fonts/gotham_greek/gothamgreek-black-webfont.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } /* --> FONT FAMILIES > PROXIMA NOVA [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @font-face { font-family: "Proxima Nova"; src: url("../fonts/Proxima-Nova/ProximaNova-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova"; src: url("../fonts/Proxima-Nova/ProximaNova-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova"; src: url("../fonts/Proxima-Nova/ProximaNova-Semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova"; src: url("../fonts/Proxima-Nova/ProximaNova-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } /* --> FONT FAMILIES > PROXIMA NOVA CONDENSED [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @font-face { font-family: "Proxima Nova Condensed"; src: url("../fonts/Proxima-Nova-Condensed/ProximaNovaCondensed-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova Condensed"; src: url("../fonts/Proxima-Nova-Condensed/ProximaNovaCondensed-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION COMMON VVV VVV VVV VVV VVV VVV VVV */ .nav-tabs { border-bottom: none; } /* --> COMMON > VARIABLES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> COMMON > VARIABLES > FONTS [2] =========================================================================================================== */ :root { --font_1: 'Gotham Greek', Arial, sans-serif; --font_2: 'Proxima Nova', Arial, sans-serif; --font_3: 'AvertaPE', Arial, sans-serif; --font_4: 'Proxima Nova Condensed', Arial, sans-serif; } /* --> COMMON > VARIABLES > DIMENSIONS [2] =========================================================================================================== */ body { --minicart-width: 635px; --maxContainerWidth: 1650px; --headerHeight: 90px; --defaultPadding: 15px; --calculatedPadding: max(var(--defaultPadding), calc((100vw - var(--maxContainerWidth)) / 2)); --menuPadding: 60px; --headerItemsDistance: 43px; } /* --> COMMON > VARIABLES > COLORS [2] =========================================================================================================== */ html { --accent_1: #3b4b82; --accent_2: #3b4b82; --accent_3: #8291c8; --accent_4: #5364a4; --accent_1_amea: #6D5117; } /* --> COMMON > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .breadcrumb~.row { display: flex; gap: 40px max(20px, 3vw); } .breadcrumb~.row>#column-right { min-width: 250px; padding: 0px !important; } @media(max-width: 1100px) { .breadcrumb~.row>#column-right { display: none !important; } } .breadcrumb~.row>#column-right, .breadcrumb~.row>#column-right * { border-radius: 0px !important; -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; -ms-border-radius: 0px !important; -o-border-radius: 0px !important; } /* --> COMMON > LAYOUT > SIDEBARS [2] =========================================================================================================== */ html[class*="account"] .breadcrumb~.row aside .list-group a { font-size: 15px !important; /* font-weight: 700; */ font-family: var(--font_1); text-shadow: none; transition: all .12s; padding: 12px 15px } html[class*="account"] .breadcrumb~.row aside .list-group a:hover { background: var(--accent_3); color: white; } /* --> COMMON > MOBILE/DESKTOP TOGGLING [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1024px) { .for_desktop { display: none !important; } } @media(min-width: 1025px) { .for_mobile { display: none !important; } } /* --> COMMON > SCROLLBARS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #menu::-webkit-scrollbar, #menu *::-webkit-scrollbar, #enquiry_form_container::-webkit-scrollbar { width: 7px; height: 7px; } #menu::-webkit-scrollbar-thumb, #menu *::-webkit-scrollbar-thumb, #enquiry_form_container::-webkit-scrollbar-thumb { background: #bbb; border-radius: 10px; } #menu::-webkit-scrollbar-track, #menu *::-webkit-scrollbar-track, #enquiry_form_container::-webkit-scrollbar-track { background: transparent; } /* For Firefox */ #menu, #menu *, #enquiry_form_container { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .3) transparent; } /* --> COMMON > NOTIFICATIONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> ADD TO CART ALERT [2] =========================================================================================================== */ .alert-success.tk-add-cart .add-to-cart-inner { box-shadow: none !important; box-shadow: 0 10px 50px rgba(0, 0, 0, .3) !important; border-radius: 10px !important; overflow: hidden } .alert-success.tk-add-cart .tk-cart-header { font-weight: bold; padding-block: 20px 10px; font-family: var(--font_3) } .alert-success.tk-add-cart .tk-cart-header .fa.fa-check { display: none !important; } .alert-success.tk-add-cart .tk-cart-body { line-height: 1.2; gap: 15px; padding: 15px 20px 30px 10px !important; } .alert-success.tk-add-cart .tk-cart-body>* { width: fit-content !important; } .alert-success.tk-add-cart .tk-cart-body .product-price span { font-weight: 900 !important; font-size: 23px; } .tk-cart-body .product-price { display: flex; flex-direction: column-reverse; } .tk-cart-body .special { font-size: 14px !important; color: #aaa !important; font-weight: normal !important; text-decoration: line-through !important; } .alert-success.tk-add-cart .tk-cart-footer a { color: white !important; transition: all .2s; } .alert-success.tk-add-cart .tk-cart-footer a:hover { background: var(--accent_2) !important; } .alert-success.tk-add-cart .tk-cart-footer a:first-child { background: var(--accent_1) } .alert-success.tk-add-cart .tk-cart-footer a:last-child { background: var(--accent_3) } /* --> PRODUCT PAGE > ALERT SUCCESS > CONTAINER [2] =========================================================================================================== */ .alert-success:not(.tk-add-cart) { border: 3px solid var(--accent_3) !important; border-radius: 7px !important; /* font-family: var(--font_3); */ position: fixed; z-index: 99999999999 !important; top: 50% !important; left: 50% !important; /*transform: translate(-50%, -50%) !important; */ text-align: center !important; /*box-shadow: 0 10px 40px 0px rgba(0, 0, 0, 0.3), 0 0px 2000px 0px rgb(0, 0, 0) !important; */ /*border: 1px solid black !important; */ border-radius: 0px !important; width: 420px !important; /*max-width: 100% !important; */ max-width: calc(100vw - 14px); background: white !important; padding: 25px; margin-bottom: 0px !important; margin-right: 0px; margin-left: 0px; color: black; /*box-shadow: -10px -10px black, 10px 10px var(--accent1), 0 10px 40px 0px rgba(0, 0, 0, 0.3), 0 0px 2000px 0px rgb(0, 0, 0) !important; */ box-shadow: 0 10px 100px -10px rgba(0, 0, 0, 0.5); opacity: 0; transform: translate(-50%, calc(-50% + 50px)); -webkit-animation-name: gradual_appearance; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; animation-name: gradual_appearance; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; /*-webkit-animation-delay: 0.4s; */ /*animation-delay: 0.4s; */ font-size: 16px !important; /*border: 1px solid #888 !important; */ transition: all .4s !important; -webkit-transition: all .4s !important; -moz-transition: all .4s !important; -ms-transition: all .4s !important; -o-transition: all .4s !important; -webkit-border-radius: 7px !important; -moz-border-radius: 7px !important; -ms-border-radius: 7px !important; -o-border-radius: 7px !important; } /* @media(max-width: 1024px) { .alert-success { top: 10px !important; transform: translateX(-50%) !important; } } */ .alert-success.inactive { opacity: 0 !important; visibility: hidden !important; transform: translateY(20px) !important; -webkit-transform: translateY(20px) !important; -moz-transform: translateY(20px) !important; -ms-transform: translateY(20px) !important; -o-transform: translateY(20px) !important; } @-webkit-keyframes gradual_appearance { from { opacity: 0; transform: translate(-50%, calc(-50% + 50px)); } to { opacity: 1; transform: translate(-50%, -50%); } } @keyframes gradual_appearance { from { opacity: 0; transform: translate(-50%, calc(-50% + 50px)); } to { opacity: 1; transform: translate(-50%, -50%); } } /* --> PRODUCT PAGE > ALERT SUCCESS > CLOSE BUTTON [2] =========================================================================================================== */ .alert-success button.close, .alert-danger button.close { z-index: 99999; position: absolute; top: -5px; right: 0px; opacity: 1; color: #a40000; font-size: 30px; transition: all 0.12s; } .alert-success button.close:hover, .alert-danger button.close:hover { color: red !important; } /* --> PRODUCT PAGE > ALERT SUCCESS > ALL LINKS [2] =========================================================================================================== */ /* .alert-success a { display: block; margin: 10px 0px !important; padding: 14px; background: var(--accent2); color: white !important; text-transform: uppercase; font-weight: bold !important; transition: all 0.4s; } */ .alert-success a { font-size: 16px !important; /* text-decoration: underline !important; */ color: var(--accent_3) !important; font-weight: 500; /* font-family: var(--font_3) */ } /* .alert-success a:hover { background: var(--accent1) !important; color: #333 !important; } */ /* --> COMMON > ACCESSIBILITY [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* --> COMMON > CONTAINERS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #content { float: none; padding-inline: 0px !important; width: 100%; } html { /* width: 100vw !important; max-width: 100vw !important; */ overflow-x: hidden !Important; } .row { margin-right: 0px; margin-left: 0px; padding-right: 0px; padding-left: 0px; } .container { margin-right: 0px; margin-left: 0px; padding-right: 0px; padding-left: 0px; width: 100%; } .row:before, .row:after, .container:before, .container:after { display: none; } body { overflow: hidden; } body>header, body>footer, body>.container { padding-inline: var(--calculatedPadding) !important } /* .container, .module_product_tabs { width: 1650px !important; max-width: 100% !important; margin-left: auto; margin-right: auto; padding-right: 15px; padding-left: 15px; } */ /* --> COMMON > LINKS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .unclickable { pointer-events: none; } a { transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } a:hover { color: var(--accent_3); } /* --> COMMON > FONTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ body { font-family: var(--font_1); font-size: 14px; color: #000; } body, footer .footer-column label { line-height: 1.5; } * { outline: none !important; } *:not(i) { text-decoration: none !important; } /* --> COMMON > ACCEPT TERMS WRAPPER & CHECKBOX [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* .buttons .pull-right { float: left !important } */ .buttons a.agree+input[name="agree"] { float: left; margin-left: 0px; margin-right: 10px; margin-top: 2px; } /* --> COMMON > BUTTONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .common_button, #button-cart, .contact-submit-btn, #content_search #button-search, #collapse-checkout-confirm .buttons *, #enquiry_button, #enquiry_form_container .buttons input[type="submit"] { height: 50px; display: flex; width: fit-content; border-radius: 8px; color: white; padding-inline: 38px; background: var(--accent_3); align-items: center; font-size: 16px; /* font-weight: bold; */ transition: all .25s; justify-content: center !important; border: none !important; } .common_button:hover, #button-cart:hover, .contact-submit-btn:hover, #content_search #button-search:hover, #collapse-checkout-confirm .buttons *:hover, #enquiry_button:hover { background: var(--accent_2) !important; color: white !important; } header+.container .btn:not(#compare-total):not(.compare_button):not(#grid-view):not(#list-view):not([data-toggle="tooltip"]) { height: 50px; display: flex; width: fit-content; border-radius: 8px; color: white; padding-inline: 38px; background: var(--accent_3); align-items: center; font-size: 16px; font-weight: bold; transition: all .25s; border: none; justify-content: center !important; } header+.container .btn:not(#compare-total):not(.compare_button):not(#grid-view):not(#list-view):not([data-toggle="tooltip"]):hover { background: var(--accent_2) !important; color: white !important; } header+.container .btn-primary.focus, header+.container .btn-primary:focus { color: inherit !important; background-color: inherit !important; border-color: inhterit !important; } /* --> COMMON > BUTTONS > WISHLIST [2] =========================================================================================================== */ .product-thumb .image { position: relative; } #product-product .wishlist_button, #product-product .wishlist_button img, .product-thumb button.wishlist, .product-thumb button.wishlist img { transition: all .2s; } #product-product .wishlist_button, .product-thumb button.wishlist { /*width: 35px; height: 35px; */ width: 22px !important; height: 22px !important; box-shadow: None; border: none; position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; padding: 0px !important; display: none; } #product-product .wishlist_button { top: 25px; right: 25px; } #product-product .wishlist_button img, .product-thumb button.wishlist img { width: 100% !important; height: 100% !important; -webkit-filter: brightness(0); filter: brightness(0); /* transform: translateY(1px) !important; */ /* transition: all .2s; */ } #product-product .wishlist_button.wishlisted, .product-thumb button.wishlist.wishlisted { background: url("/image/catalog/cut_assets/generic/icons/red_heart.svg"); background-repeat: no-repeat; background-size: 100% 100%; } #product-product .wishlist_button.wishlisted img, .product-thumb button.wishlist.wishlisted img { display: none } /* #product-product .wishlist_button:hover img, #product-product .wishlist_button.wishlisted img, .product-thumb button.wishlist:hover img, .product-thumb button.wishlist.wishlisted img { filter: brightness(100); } */ /* --> COMMON > BUTTONS > COMPARE LIST [2] =========================================================================================================== */ #product-product button.compare_button { left: 10px } #product-product button.compare_button, .product-thumb button.compare { box-shadow: none !important; border: none !important; top: 12px; left: 10px; z-index: 3; position: absolute !important; display: flex; gap: 6px; align-items: center; line-height: 1; background: none; font-family: var(--font_2); padding: 0px !important; color: black !important; } #product-product button.compare_button { top: 25px; left: 25px; } #product-product button.compare_button div, .product-thumb button.compare div { width: 22px; height: 22px; display: block; background: transparent; background-image: url("data:image/svg+xml,%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EE78737F1-08BC-48B9-BCFA-75C6A6810B7E%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='PRODUCT-LIST-_-FILTERS-OPEN' transform='translate(-987.000000, -787.000000)' fill='%23FFFFFF' stroke='%23CDCDCD'%3E%3Cg id='Group-13' transform='translate(0.000000, 460.000000)'%3E%3Cg id='Group-4' transform='translate(987.000000, 168.000000)'%3E%3Cg id='Group-8' transform='translate(0.000000, 39.000000)'%3E%3Cg id='Rectangle' transform='translate(0.000000, 120.000000)'%3E%3Crect x='0.5' y='0.5' width='17' height='17' rx='2'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 100%; } #product-product button.compare_button span, .product-thumb button.compare span { font-size: 14px; display: inline-block; height: 11px; font-weight: normal; text-transform: none !important; } #product-product button.compare_button.compared div, .product-thumb button.compare.compared div { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 18 18'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D .cls-2 %7B fill: %2300a1ad; %7D %3C/style%3E%3C/defs%3E%3C!-- Generator: Adobe Illustrator 28.7.8, SVG Export Plug-In . SVG Version: 1.2.0 Build 200) --%3E%3Cg%3E%3Cg id='Layer_1'%3E%3Cg id='Page-1'%3E%3Cg id='PRODUCT-LIST'%3E%3Cg id='tick-2'%3E%3Crect id='Rectangle' class='cls-2' width='18' height='18' rx='2' ry='2'/%3E%3Cpath id='Path' class='cls-1' d='M6.1,13.5l-2.4-2.6c-.6-.7-.6-1.8,0-2.5h0c.5-.6,1.4-.7,2,0,0,0,0,0,0,0l1.3,1.5,5.1-5.4c.6-.6,1.5-.6,2.1,0h0c.6.6.6,1.6,0,2.2l-6.5,6.8c-.4.5-1.2.5-1.6,0h0'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* --> COMMON > PAGINATION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .pagination_container { margin-left: auto !important; margin: 0px; display: flex; align-items: center; } .pagination_container .pagination { display: flex; gap: 5px; } .pagination_container .pagination>li>a, .pagination_container .pagination>li>span { border: none; font-size: 16px; border-radius: 3px !important; padding: 0px !important; width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; background-color: transparent } .pagination_container .pagination>li>a:hover { background: var(--accent_3) !important; color: white !important; } .pagination_container .pagination>li.active>span { background: black !important; font-weight: bold } /* --> COMMON > TITLES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> COMMON > TITLES > PAGE TITLES [2] =========================================================================================================== */ #content h1, #content h2 { font-weight: 400; color: var(--accent_4); margin-bottom: 30px; } #content h2 { color: var(--accent_3); } /* --> COMMON > TITLES > PRE-TITLE [2] =========================================================================================================== */ .section_title_sec, .pre_title { font-size: 14px; text-transform: uppercase; color: black; font-weight: normal !important; line-height: normal; margin-bottom: 5px; text-align: left; letter-spacing: 2px; } /* --> COMMON > TITLES > AFTER-TITLE [2] =========================================================================================================== */ .section_title .after_title { color: var(--accent_3); font-size: 25px; line-height: 1.4; text-align: left; /* font-weight: 700; */ margin-top: 15px } /* --> COMMON > TITLES > MAIN [2] =========================================================================================================== */ .section_title, .main_title, .latest-posts .blog-headings .headingmain, .home_banner_blog .column-content-2 .html_section h2, #product-category .cat-title, #blog-category .headingmain, #product-product #content>.row.text_n_banner .left_side .title { color: var(--accent_2); font-size: 43px; line-height: 1.3; text-align: left; width: 100%; display: block; font-weight: normal !important; margin-top: 0px !important; border: none !important; } /* --> COMMON > TITLES > MAIN > COMPACT [3] ------------------------------------------------------------- */ #information-contact #content>h3, .form-horizontal legend { /* color: black; */ font-size: 30px; line-height: normal; text-align: left; width: 100%; display: block; font-weight: 400; margin-top: 35px !important; border: none !important; color: var(--accent_2); } .form-horizontal legend { margin-top: 0px !important; } /* --> COMMON > BREADCRUMBS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .breadcrumb { margin-bottom: 58px; background: none; } .breadcrumb, .breadcrumb a { white-space: normal; } .breadcrumb * { text-shadow: none !important; font-size: 12px; color: #575757; } .breadcrumb>li { padding: 0 10px; } .breadcrumb { padding: 8px 0px !important; margin-bottom: 20px; list-style: none; border-radius: 4px; text-align: center; } .breadcrumb li:first-child { padding-left: 0 !important; } .breadcrumb li:last-child a { font-weight: 600 !important; } /* --> COMMON > PAGINATION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #mfilter-content-container>div>.row:last-child { margin-top: 30px !important; } .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { background-color: #666; border-color: #666; } .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover, .pagination>li>a, .pagination>li>span { color: #000; } /* --> COMMON > ITEMS & MENUS AROUND PAGE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .mfilter-box-83 .mfilter-free-button, body>.cc-revoke { transition: all .3s ease; } html:is(.menu_revealed, .cart_enabled, .search_enabled) .mfilter-box-83 .mfilter-free-button { transform: translateX(-100%); } html:is(.menu_revealed, .cart_enabled, .search_enabled) body>.cc-revoke { transform: translateY(100%) !important; } /* --> COMMON > MODULES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> COMMON > MODULES > PRODUCT TABS [2] =========================================================================================================== */ .module_product_tabs .tab-content .section_title { display: none !important; } /* --> COMMON > MODULES > PRODUCT TABS > ARROWS [3] ------------------------------------------------------------- */ .module_product_tabs { position: relative; } .module_product_tabs .carousel { position: static !important; } /* --> COMMON > MODULES > ALL CAROUSELS [2] =========================================================================================================== */ /* --> COMMON > MODULES > ALL CAROUSELS > HIDE DEFAULT TITLE [3] ------------------------------------------------------------- */ .carousel>h3 { display: none !important; } /* --> COMMON > MODULES > ALL CAROUSELS > MAKE SPACE FOR HOVER SHADOWS [3] ------------------------------------------------------------- */ /* .swiper-wrapper { margin: 10px; transform: translateX(-10px) translateY(10px); } */ /* --> COMMON > MODULES > ALL CAROUSELS > PAGINATION [3] ------------------------------------------------------------- */ .carousel .swiper-pagination { display: none; } /* --> COMMON > MODULES > ALL CAROUSELS > PAGER ARROWS [3] ------------------------------------------------------------- */ .carousel .swiper-pager { position: absolute; width: 60px !important; /* right: var(--default_padding); */ top: 24px !important; right: 0px !important; height: 27px; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; } .carousel .swiper-pager>div { padding: 5px !important; height: 27px; width: 27px; border-radius: 4px; transition: all .2s; display: flex; align-items: center; justify-content: center; line-height: 1; opacity: 1 !important; transform: none !important; top: 0px; margin-top: 0px; } .carousel .swiper-pager>div:hover { background: var(--accent_3); } .carousel .swiper-pager>div:hover:before { color: white !important } .carousel.swiper-viewport .swiper-button-next.swiper-button-disabled, .carousel.swiper-viewport .swiper-button-prev.swiper-button-disabled { opacity: 0.2 !important; cursor: auto !important; pointer-events: none !important; /* visibility: hidden !important; */ } .carousel .swiper-pager>div::before { line-height: 1; height: 20px; width: 20px; transition: all 0.12s; /* font-size: 0px !important; */ display: flex; align-items: center; justify-content: center; color: black !important; font-size: 33px !important; } .carousel .swiper-pager>div:first-child::before { content: "\f105" !important; } .carousel .swiper-pager>div:last-child::before { content: "\f104" !important; } .carousel .swiper-button-next { right: 0px !important; } .carousel .swiper-button-prev { left: 0px !important; } /* --> COMMON > MODULES > ALL CAROUSELS > MAKE IMAGES TAKE UP AVAILABLE SPACE [3] ------------------------------------------------------------- */ .carousel .swiper-slide>img { width: 100% !important; } /* --> COMMON > MODULES > ALL CAROUSELS > VIEW MORE [3] ------------------------------------------------------------- */ .products-carousel-module .view_more, .carousel .view_more, .blog_container a.view_more, #relatedblog a.view_more, .blog_container a.view_all, .btnread a, .view_more_blog { color: #000000 !important; font-size: 16px !important; border-bottom: 1px solid black !important; width: -webkit-fit-content !important; width: -moz-fit-content !important; width: fit-content !important; font-weight: normal !important; } .products-carousel-module .view_more:hover, .carousel .view_more:hover, .blog_container a.view_more:hover, #relatedblog a.view_more:hover, .blog_container a.view_all:hover, .btnread a:hover, .view_more_blog:hover { color: var(--accent_3) !important; } /* --> COMMON > MODULES > ALL CAROUSELS > TEXT CONTAINER [3] ------------------------------------------------------------- */ .carousel .text_container { display: none; } /* --> COMMON > MODULES > PRODUCTS CAROUSEL [2] =========================================================================================================== */ /* .blog_container .swiper-button-disabled, .products-carousel-module .swiper-button-disabled{ opacity: 0 !important; visibility:hidden !important; } */ /* .products-carousel-module .product-thumb { width: calc(100% - 2px); } */ /* .products-carousel-module .swiper-wrapper { padding-top: 10px; } */ /* .products-carousel-module .swiper-container { overflow: visible } */ /* .products-carousel-module .product-thumb{ width: calc(100% - 2px); } .products-carousel-module .swiper-wrapper{ padding-top: 10px; } */ /* --> COMMON > MODULES > PRODUCTS CAROUSEL > TAKE INTO ACCOUNT HOVER SHADOWS [3] ------------------------------------------------------------- */ .extra_products .swiper-container, .products-carousel-module .swiper-container { padding: 15px !important; width: calc(100% + 30px) !important; margin-left: -15px !important; } /* --> COMMON > MODULES > CAROUSEL [2] =========================================================================================================== */ .swiper-slide { display: flex; flex-direction: column; align-items: center; } /* .swiper-button-disabled{ opacity:0 !important; } */ .swiper-viewport { background: transparent !important; margin-bottom: 0px !important; } /* --> COMMON > MODULES > CAROUSEL > DISABLED [3] ------------------------------------------------------------- */ .carousel.disabled .swiper-wrapper { transform: translate3d(0px, 0, 0) !important; } .carousel.disabled .swiper-pagination, .carousel.disabled .swiper-pager { display: none !important; } /* --> COMMON > MODULES > CAROUSEL > FIX PAGER HEIGHT WHEN TITLE EXISTS [3] ------------------------------------------------------------- */ .carousel.has-title .swiper-pager { transform: translateY(28px); } /* --> COMMON > MODULES > CAROUSEL > RESPONSIVE [3] ------------------------------------------------------------- */ @media(max-width: 991px) { .carousel .swiper-pager { display: none !important; } } /* --> COMMON > FORMS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .form-horizontal { display: flex; flex-direction: column; } .form-horizontal .form-group:not(:last-child) { margin-bottom: 35px; } .form-horizontal .form-group.product_page_ideal_time_container { margin-top: -20px !important; } .form-horizontal .form-group *:is(input, textarea, select) { border: none; border-bottom: 1px solid #c3c2c2; border-radius: 0px; box-shadow: none; color: #343434; outline: none !important; box-shadow: none !important; font-weight: 500; } .form-horizontal .contact-preferences-label { font-weight: 500; } .form-horizontal .form-group.agree_to_terms { order: 99; } .form-horizontal .form-group.agree_to_terms * { font-size: 13px !important; } .form-horizontal .form-group.agree_to_terms input { margin-right: 10px !important; } .form-horizontal .form-group:has(.contact-submit-btn) { order: 100; } .form-horizontal .form-group.submit-group { margin-bottom: 0px; } .form-horizontal .form-group *:is(input, textarea, select)::placeholder { color: #ccc !important; } .form-horizontal .form-group *:is(input, textarea, .checkbox-label, label, select), .form-horizontal { font-size: 16px; line-height: normal; } .form-horizontal .form-group textarea { height: 32px } .form-horizontal .form-group .checkbox-group>label:first-child { margin-right: 55px; margin-top: 10px; margin-bottom: 10px } .form-horizontal .form-group input[type="checkbox"] { margin-right: 5px } .form-horizontal .form-group .text-danger { margin-top: 10px } .form-horizontal .form-group.contact-preferences { margin-top: 0px !important; } .form-horizontal .form-group .preferred-time { width: 310px; } .form-horizontal .form-group.privacy-policy .checkbox-label { font-size: 13px; margin-top: 5px; } /* .form-horizontal .btn-primary { margin-top: 30px !important; } */ .form-horizontal textarea+label { position: absolute; bottom: 0px; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION TOP BAR VVV VVV VVV VVV VVV VVV VVV */ /* --> TOP BAR > CONTENTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #top-bar { display: flex; justify-content: space-between; background: var(--accent_4); height: 40px; display: flex; align-items: center; box-shadow: -200px 0px var(--accent_4), 200px 0px var(--accent_4); } #top-bar p { margin-bottom: 0px !important; } #top-bar p, #top-bar span { font-size: 13px !important; font-weight: 500; color: #fff; text-transform: uppercase; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION HEADER > LAYOUT VVV VVV VVV VVV VVV VVV VVV */ header { /* background: linear-gradient(90deg, #8291c8 0%, #495b9d 50%, #8291c8 100%) !important; */ background: linear-gradient(90deg, #495b9d 0%, #7585bd 50%, #495b9d 100%) !important; /* position: -webkit-sticky; */ /* position: sticky; */ top: 0px; z-index: 10; position: fixed; width: 100%; box-shadow: 0 1px 10px rgba(0, 0, 0, .08); left: 0px; } body { margin-top: calc(var(--headerHeight) + 40px); } /* --> HEADER > LAYOUT > SECTIONS CONTAINER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #header_sections_container { display: flex; justify-content: space-between; width: 100%; align-items: flex-end; margin-left: 0px; margin-right: 0px; /* margin-top: -42px; */ /* gap: 40px; gap: max(2vw, var(--defaultPadding)); */ gap: var(--headerItemsDistance) } #header_sections_container:before, #header_sections_container:after { display: none !important; } /* --> HEADER > LAYOUT > ALL SECTIONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #header_sections_container>div { width: 100%; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; height: var(--headerHeight); width: fit-content; } #header_sections_container>div:not(.header_mid_section) { align-items: center; } /* --> HEADER > LAYOUT > LEFT & RIGHT SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .header_left_section, .header_right_section { /* max-width: 207px !important; */ } /* --> HEADER > LAYOUT > MID SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* .header_mid_section { gap: 15px; } */ /* --> HEADER > LAYOUT > LEFT SECTION (logo) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .header_left_section { /* background:rgba(255, 0, 0, 0.5); */ } .header_left_section { background: transparent; /* box-shadow: calc(-1 * var(--calculatedPadding)) 0px var(--accent_2); */ padding-right: var(--defaultPadding); box-shadow: none !important; margin-right: auto; } /* --> HEADER > LAYOUT > LEFT SECTION (logo) > LOGO [2] =========================================================================================================== */ .header_left_section #logo a img { height: 50px; width: auto; max-width: unset; filter: brightness(0) invert(1); } /* --> HEADER > LAYOUT > MID SECTION (BRURGER, LINKS & SEARCH) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HEADER > LAYOUT > MID SECTION (BRURGER, LINKS & SEARCH) > BURGER & LINKS [2] =========================================================================================================== */ .header_mid_section { justify-content: center; } .header_mid_section #burger_button svg { width: 38px !important; filter: invert(100); } .outside_menu_links { display: flex; gap: var(--headerItemsDistance); margin-inline: var(--headerItemsDistance); } .outside_menu_links a { color: white; /* font-weight: 500; */ font-size: 15px; } /* --> HEADER > LAYOUT > MID SECTION (BRURGER, LINKS & SEARCH)> SEARCH [2] =========================================================================================================== */ .header_mid_section .search_wrapper { width: 100%; margin-inline: 15px; } .header_mid_section #search { background: rgba(241, 241, 241, .22); border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.41) !important; max-width: 515px !important; display: flex !important; margin-inline: auto; width: 338px !important; } .header_mid_section #search .input-lg { font-size: 14px !important; font-style: normal !important; font-weight: 500 !important; font-family: var(--font_2); color: #FFF5F5 !important; padding-left: 10px } .header_mid_section #search .input-lg::placeholder { color: #FFF5F5; } .header_mid_section #search:has(#search-input) { transition: all .15s; } .header_mid_section #search:has(#search-input:focus) { border-color: var(--accent_3) !important; /* box-shadow: 0 3px 15px rgba(0, 161, 173, .5); */ } .header_mid_section #search .input-group-btn { order: -99 !important; padding-left: 5px; } .header_mid_section #search .input-lg, .header_mid_section #search .input-group-btn button.btn.btn-default.btn-lg { border-bottom: none !important; height: 45px; max-height: 45px !important; line-height: 1 !important; } .header_mid_section #search .btn-lg svg { height: 23px !important; margin-right: 0px !important; } /* --> HEADER > LAYOUT > MID SECTION (BRURGER, LINKS & SEARCH) > SEARCH > LIVE SEARCH [3] ------------------------------------------------------------- */ .header_mid_section .live-search-div { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; top: 63px !important; } /* --> HEADER > LAYOUT > RIGHT SECTION (ICONS) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .header_right_section { justify-content: flex-end !important; } .header_right_section>ul { display: flex; flex-wrap: nowrap; align-items: center; margin-bottom: 0px !important; gap: 32px; margin-left: 0px; } .header_right_section>ul>li>a { display: flex; align-items: center; } .header_right_section>ul>li { padding: 0px !important; min-width: 22px !important; } /* --> HEADER > LAYOUT > RIGHT SECTION > B2B LOGIN ITEM [2] =========================================================================================================== */ .header_right_section .b2b_login_item>a { color: white !important; font-size: 16px; /* font-weight: 500; */ /* margin-right: 11px; */ } .header_right_section .b2b_login_item>a { background: rgba(91, 50, 134, .4); height: var(--headerHeight) !important; height: 90px; padding-inline: 10px; transition: all .22s; } .header_right_section .b2b_login_item>a:hover { background: #5b3286 } /* --> HEADER > LAYOUT > RIGHT SECTION > ICONS [2] =========================================================================================================== */ .header_mid_section #search .input-group-btn>button>svg, .header_right_section .language_item #form-language>.btn-group>button>img, .header_right_section .compare_item>a>img, .header_right_section .wishlist_item>a>div>img, .header_right_section .account_item>a>svg, .header_right_section .cart_item>button>img, .header_right_section .search_item>a>svg, #search-toggle>a>img { filter: brightness(0) invert(100) !important; height: 22px; min-width: 22px !important; } .header_right_section .language_item #form-language>.btn-group>button>img { height: 25px; } .header_right_section .compare_item>a>img { height: 22px; } .header_right_section .account_item>a>svg { height: 24px; } .header_right_section .cart_item>button>img { height: 23px; } .header_right_section .language_item #form-language>.btn-group>button { padding: 0px !important; } /* --> HEADER > LAYOUT > RIGHT SECTION > ICONS> HOVER STATE [3] ------------------------------------------------------------- */ /* #search .input-group-btn>button:hover>svg, .header_right_section .language_item:hover #form-language>.btn-group>button>img, .header_right_section .compare_item:hover>a>img, .header_right_section .account_item:hover>a>svg, .header_right_section .cart_item:hover>button>img { filter: invert(42%) sepia(89%) saturate(504%) hue-rotate(136deg) brightness(97%) contrast(101%) !important; -webkit-filter: invert(42%) sepia(89%) saturate(504%) hue-rotate(136deg) brightness(97%) contrast(101%) !important; } */ /* --> HEADER > LAYOUT > RIGHT SECTION > ICONS> ACTIVE STATE (LANGUAGE & ACCOUNT) [3] ------------------------------------------------------------- */ .header_right_section .language_item .dropdown-menu, .header_right_section .account_item .dropdown-menu { padding: 15px 25px !important; min-width: unset !important; left: 50%; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; transform: translateX(-50%) translateY(10px); /* top: 48px; */ /*right: 0px; left: auto; */ display: block !important; transition: all 0.4s; opacity: 0 !important; visibility: hidden !important; border: none !important; border-radius: 6px !important; box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.175) !important; position: absolute !important; -webkit-border-radius: 6px !important; -moz-border-radius: 6px !important; -ms-border-radius: 6px !important; -o-border-radius: 6px !important; } .header_right_section .language_item .btn-group.open .dropdown-menu, .header_right_section .account_item.open .dropdown-menu { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0px); } .header_right_section .language_item .dropdown-menu:after, .header_right_section .account_item .dropdown-menu:after { content: ""; width: 0; height: 0; border-width: 10px 10px 0px 10px; border-color: #fff transparent transparent transparent; border-style: solid; position: absolute; bottom: 100%; right: 50%; transform: rotate(180deg) translateX(-50%); } /* .header_right_section .account_item .dropdown-menu { margin-left: -60px } */ /* .header_right_section .account_item .dropdown-menu::after { margin-right: -60px !important; } */ .header_right_section .language_item, .header_right_section .account_item { position: relative; } .header_right_section .language_item .dropdown-menu li>*, .header_right_section .account_item .dropdown-menu li>* { font-size: 15px; color: #2a2a2a !important; text-transform: none !important; display: flex; align-items: center; justify-content: flex-start; padding: 6px 0px !important; border: none !important; line-height: normal !important; text-decoration: none !important; /* background: #eee !important; */ } .header_right_section .language_item .dropdown-menu li:not(:last-child), .header_right_section .account_item .dropdown-menu li:not(:last-child) { margin-bottom: 1px !important; } .header_right_section .language_item .dropdown-menu li>* img, .header_right_section .account_item .dropdown-menu li>* img { margin-right: 7px; } .header_right_section .language_item .dropdown-menu li>*:hover, .header_right_section .account_item .dropdown-menu li>*:hover { color: var(--accent2) !important; background: none !important; } .header_right_section .account_item .dropdown-menu .divider { margin-bottom: 103px !important; display: block !important; background: none; border-top: 1px solid #dfdfdf; height: 10px } .header_right_section .account_item .dropdown-menu a:hover { color: var(--accent_1) !important } /* --> HEADER > LAYOUT > RIGHT SECTION > TITLES [2] =========================================================================================================== */ /* .header_right_section .list-inline>li>a, header #cart .btn.btn-inverse #cart-title { font-size: 0px !important; line-height: 0px !important; } */ /* .header_right_section>ul>li:not(:has(#form-language))>a, #cart>button { display: flex; flex-direction: column; line-height: normal !important; gap: 5px; align-items: center; font-weight: 500; font-size: 12px; text-shadow: none !important; } .header_right_section>ul>li:not(:has(#form-language))>a>svg, #cart>button>svg { height: 24px !important; } #compare_icon>a>img { width: 18px !important; } */ /* --> HEADER > LAYOUT > RIGHT SECTION > WISHLIST [2] =========================================================================================================== */ .header-icon-men.for_wishlist { position: relative; } #wishlist_image { position: relative; } #wishlist-count { position: absolute; top: -5px; right: -7px; background: white; border-radius: 100%; width: 13px; height: 13px; font-size: 11px; color: black; line-height: 100%; text-shadow: unset; display: flex; align-items: center; justify-content: center; } /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH [2] =========================================================================================================== */ #search_contents { position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; background: rgba(255, 255, 255, .95); z-index: 10; padding: 0px 20px; transition: all 0.3s; opacity: 0; visibility: hidden; } #search_contents #search { margin-top: 250px; margin-left: auto; margin-right: auto; } .live-search-div { top: 299px !important; padding: 5px 0 40px !important; width: calc(100vw - 20px) !important; max-height: calc(100vh - 339px); } .live-search-div ul { display: flex !important; flex-wrap: wrap !important } .live-search-div ul li { flex: 1 1 auto !important; } .live-search-div ul li a { display: flex !important; flex-direction: column !important; } .live-search-div .product-image img {} .live-search-div ul li .product-name { font-weight: normal !important; line-height: normal !important; } .live-search-div ul li .product-price { width: 100% !important; text-align: left !important; font-size: 15px !important; } .live-search-div ul li .product-price .special { color: #999 !important; } .live-search-div .result-text { height: 40px !important; display: flex !important; justify-content: center !important; align-items: center !important; font-size: 15px !important; background: var(--accent_1) !important; } @media(max-width: 615px) { .live-search-div ul li { flex: unset !important; width: 50% !important; margin-right: 0px !important; margin-left: 0px !important } } .search_enabled #search_contents { opacity: 1; visibility: visible; } #search_contents .close_button { cursor: pointer; top: 35px; right: 100px; position: absolute; } #search_contents .close_button svg { width: 30px; height: 30px; } #search { margin-bottom: 0px !important; } #search, .live-search-div { width: 100% !important; max-width: 1110px !important; } #search .input-lg, #search .input-group-btn, #search .btn.btn-default.btn-lg { background: none !Important; } #search .input-lg { height: 55px; line-height: normal; font-size: 25px !important; padding-left: 25px; border-bottom: 1px solid var(--accent_1) !important; color: var(--accent_1); font-weight: bold; font-style: italic; } #search .btn.btn-default.btn-lg { border-bottom: 1px solid var(--accent_1) !important; height: 55px; width: 100%; } #search .btn-lg svg { width: 30px !important; height: 30px !important; } #search .input-group-btn { width: 55px; } .live-search-div { margin-top: 27px !important; border-radius: 0px !important; box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, .2) !important; } .live-search-div ul li { display: flex !important; align-items: center !important; justify-content: center !important; } /* --> HEADER > LAYOUT > RIGHT SECTION > LANGUAGE [2] =========================================================================================================== */ #language_selection { display: flex; align-items: center; margin-right: 30px; } #form-language { margin-bottom: 0px; } #language_selection>button { margin-top: 0px !important; text-transform: uppercase; outline: none !important; font-size: 13px !important; padding: 0px; font-weight: normal; color: black; } /* --> HEADER > LAYOUT > RIGHT SECTION > LANGUAGE > FLAG ACTIVE LANGUAGE [3] ------------------------------------------------------------- */ html[lang="el"] #language_selection>button[name="el-gr"] { font-weight: bold; } html[lang="en"] #language_selection>button[name="en-gb"] { font-weight: bold; } /* --> HEADER > LAYOUT > RIGHT SECTION > LANGUAGE > SEPARATOR [3] ------------------------------------------------------------- */ #language_selection>button:first-child:after { content: ""; background: black; height: 11px; width: 1px; display: inline-block; margin-right: 4px; margin-left: 2px; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION HEADER > MENU VVV VVV VVV VVV VVV VVV VVV */ /* --> HEADER > MENU > BURGER BUTTON [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #menu_toggle_section { display: flex; align-items: flex-end; height: fit-content } #menu_toggle_section>#burger_button { margin-right: 10px; cursor: pointer; } #menu_toggle_section>#burger_button img { filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); height: 35px; width: 35px; } #menu_toggle_section>#category { font-size: 15px; /* font-weight: 700; */ color: white; } #menu_toggle_section, #menu { width: 100% !important; height: 100% !important; display: flex !important; align-items: center; } .container.main-menu { height: 100% !important; } #menu_toggle_section { display: flex; align-items: center; cursor: pointer; } /* --> HEADER > MENU > CONTAINER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HEADER > MENU > CONTAINER > OUTER [2] =========================================================================================================== */ #menu { display: flex; } #menu_container { /* width: 593px; */ width: 445px; position: fixed; top: 0px; left: 0px; z-index: 9; height: 100vh; overflow: auto; background: #fff; display: flex; flex-direction: column; /* padding-left: 95px; padding-right: 95px; */ align-items: center; } #menu_container, html:after { transition: all 0.2s; } /* --> HEADER > MENU > CONTAINER > INNER [2] =========================================================================================================== */ #menu .nav.navbar-nav li.dropdown .dropdown-menu { width: 100%; background: #fff; box-shadow: none !important; } /* --> HEADER > MENU > CONTAINER > HEIGHTS [2] =========================================================================================================== */ #menu_header { height: 100px; margin-bottom: 30px; padding-top: 30px; } #menu .nav.navbar-nav { /* height: calc(100vh - 130px - 230px); */ /* height: 100% !important; */ overflow: auto; justify-content: unset; } #menu .nav.navbar-nav li.dropdown .dropdown-menu { /*height: calc(100vh - 230px); */ height: 100%; overflow: auto; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; } #menu .extra_links { height: 195px; margin-top: 30px; } /* --> HEADER > MENU > CONTAINER > REVEAL [2] =========================================================================================================== */ #menu_container { transform: translateX(-100%); transition: all 0.4s; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); overflow: hidden !important; } header::after { background: #000; content: ""; position: fixed; top: 0px; right: 0px; width: 100vw; height: calc(100vh + 300px); z-index: 8; } header:after { visibility: hidden; opacity: 0; transition: all 0.4s; } header>.container { display: flex; flex-direction: column; } .menu_revealed #menu_container { transform: translateX(0px); visibility: visible; opacity: 1; } .menu_revealed #menu_container, .menu_revealed, .menu_revealed body { overflow: hidden !important; } .menu_revealed header:after { visibility: visible; opacity: .5; } /* --> HEADER > MENU > BURGER BUTTON [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .navbar-toggle { display: block !important; } /* --> HEADER > MENU > CLOSE BUTTON [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #menu_close_button { position: absolute; top: 12px; left: var(--menuPadding); z-index: 99999; cursor: pointer; } #menu_close_button img { width: 27px; height: 27px; filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); } #menu_close_button svg:hover { color: var(--accent_1); } /* --> HEADER > MENU > HEADER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #menu_header { display: flex; align-items: center } /* --> HEADER > MENU > HEADER > LOGO [2] =========================================================================================================== */ #menu_header a { margin: 0 0; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } #menu_header a img { max-width: 200px; height: auto; } /* --> HEADER > MENU > DROPDOWNS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS [2] =========================================================================================================== */ #menu .dropdown .dropdown-menu { display: block; position: relative; width: 100%; /* border-color: var(--accent_1); */ } #menu .level_0, #menu .level_1, #menu .level_2, #menu .level_3 { display: flex; flex-direction: column; /* gap: 26px */ gap: 0px; } #menu .level_0:before, #menu .level_1:before, #menu .level_2:before, #menu .level_3:before { display: none !important; } #menu .navbar-nav, #menu .navbar-nav .dropdown-menu { padding: 67px var(--menuPadding) 20px; margin: 0px; } @media(min-width: 1101px) { #menu .navbar-nav, #menu .navbar-nav .dropdown-menu { padding: 67px 0px 15px var(--menuPadding) !important; } } #menu .dropdown .dropdown-menu .dropdown-inner { display: flex; flex-direction: column; height: calc(100% - 15px); /* overflow: auto; */ overflow: visible; } #menu .dropdown .dropdown-menu .dropdown-inner>ul { overflow: auto; } /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > MENU BANNER [3] ------------------------------------------------------------- */ .menu_banner { margin-top: auto; margin-left: calc(-1 * (var(--menuPadding) / 2)) !important; padding-top: 30px; padding-inline: 10%; } .menu_banner, .menu_banner a, .menu_banner img { width: 100%; } /* @media(max-width: 1100px) { .menu_banner { display: none; } } */ /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > FONTS [3] ------------------------------------------------------------- */ /* #menu .nav.navbar-nav * { color: black; font-size: 16px; } */ /* #menu .nav.navbar-nav a:hover { color: var(--accent_3) !important; } */ /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > ALL LINKS [3] ------------------------------------------------------------- */ .navbar-nav>li>a, .dropdown-menu>.dropdown-inner>li>a, .dropdown-menu>.dropdown-inner>ul>li>a, #menu .parent_header>a { background: transparent !important; padding: 0px 0px !important; /* text-transform: uppercase !important; */ font-size: 16px !important; line-height: 1.2 !important; font-weight: 400; font-family: var(--font_1); } #menu .nav.navbar-nav li>a { display: flex; align-items: center; line-height: 1; justify-content: space-between; width: fit-content; /* height: 56px; */ height: 40px; padding-left: 27px !important; padding-right: 27px !important; } #menu .nav.navbar-nav li.dropdown>a { padding-right: var(--menuPadding) !important; width: 100%; } #menu .extra_links>a { padding: 9px 30px; line-height: normal; color: black; } .dropdown-inner>ul>li>a { background: transparent !important; display: block; color: black !important; } /* .navbar-nav>li>a, .dropdown-menu>li>a, #menu .extra_links>a, .dropdown-inner>ul>li>a, #menu .parent_header .arrow_back svg { transition: all 0.12s; transition: none; } */ /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > DROPDOWN ARROW [3] ------------------------------------------------------------- */ #menu .nav.navbar-nav li.dropdown>a>.toggle_arrow { line-height: 1; display: flex; align-items: center; } #menu .nav.navbar-nav .toggle_arrow>img { /* width: 20px; */ height: 15px; margin-left: 10px; } #menu .nav.navbar-nav li.dropdown>a>.toggle_arrow img { transition: all .18s; -webkit-transition: all .18s; -moz-transition: all .18s; -ms-transition: all .18s; -o-transition: all .18s; opacity: .28; } #menu .nav.navbar-nav li.dropdown.dropdown_activated>a>.toggle_arrow img { transform: rotate(180deg); } /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > DROPDOWN ARROW:LEVEL #0 */ /* .navbar-nav>li>a>.toggle_arrow>svg { fill: white !important; } */ /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > DROPDOWN TOGGLING [3] ------------------------------------------------------------- */ #menu .navbar-nav .dropdown-menu, #menu .nav.navbar-nav li.dropdown { position: static !important; border: none !important; margin-left: 0px !important; } #menu .nav.navbar-nav li.dropdown .dropdown-menu { position: absolute !important; z-index: 9999; top: 0px; left: 0px; transition: all 0.2s; transform: translateX(-50px); opacity: 0; visibility: hidden; -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); } #menu .nav.navbar-nav li.dropdown.dropdown_activated>.dropdown-menu { opacity: 1; visibility: visible; transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); } @media(min-width: 1101px) { #menu .nav.navbar-nav li.dropdown.dropdown_activated>.dropdown-menu { transform: translateX(-8px); -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); -ms-transform: translateX(-8px); -o-transform: translateX(-8px); } } /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > HOVERED ITEM STATES [3] ------------------------------------------------------------- */ /* #menu .parent_header>a:hover { text-shadow: 1px 1px var(--accent_3), 0 0 2px white !important; } */ #menu ul:is(.level_0, .level1, .level2)>li>a { transition: .2s !important; } /* #menu .level_0>li>a:hover { text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white !important } #menu ul:is(.level_1, .level_2)>li>a:hover, #menu ul:is(.level_0, .level_1, .level_2)>li.dropdown_activated>a { text-shadow: 1px 1px black, 0 0 2px white !important; } */ /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > HOVERED ITEM STATES > LEVEL #0 */ #menu .level_0>li.dropdown_activated>a { background: white !important; color: black !important; } #menu .level_0>li.dropdown_activated .toggle_arrow { filter: brightness(0) !important; -webkit-filter: brightness(0) !important; } #menu .level_0>li.dropdown_activated>a>.category_icon img { filter: brightness(0) !important; -webkit-filter: brightness(0) !important; } /* --> HEADER > MENU > DROPDOWNS > ALL LEVELS > HOVERED ITEM STATES > LEVEL #1 */ #menu .level_1>li.dropdown_activated>a { background: #F1F1F1 !important; color: black !important; } #menu .level_1>li.dropdown_activated .toggle_arrow { filter: brightness(0) !important } /* --> HEADER > MENU > DROPDOWNS > LEVEL #0 [2] =========================================================================================================== */ #menu .nav.navbar-nav { display: flex; flex-direction: column; width: 100%; background: #5364a4; } #menu .nav.navbar-nav.level_0 { background-image: url("/image/catalog/desikos-b2c/desikos_cut_assets/menu.png") !important; background-repeat: no-repeat; background-position: left bottom } #menu .nav.navbar-nav>li>a { color: white; } .navbar-nav>li { display: flex; align-items: center; } .navbar-nav>li>a { text-transform: uppercase; } /* --> HEADER > MENU > DROPDOWNS > LEVEL #0 > CATEGORY ICONS [3] ------------------------------------------------------------- */ .navbar-nav>li>a>.category_icon { filter: brightness(100); margin-right: 25px !important; width: 27px; height: 27px; } .navbar-nav>li>a>.category_icon img { max-width: 100%; max-height: 100%; } .navbar-nav>li>a>.toggle_arrow { margin-left: auto; } /* --> HEADER > MENU > DROPDOWNS > LEVEL #0 > LOGO ITEM [3] ------------------------------------------------------------- */ .navbar-nav>li.logo_item { margin-top: max(40px, 40%) } @media(min-width: 1101px) { .navbar-nav>li.logo_item { padding-right: var(--menuPadding); } } .navbar-nav>li.logo_item img { width: 100% !important; } /* --> HEADER > MENU > DROPDOWNS > LEVEL #0 > DROPDOWN ARROW [3] ------------------------------------------------------------- */ #menu .nav.navbar-nav>li.dropdown>a>.toggle_arrow>img { filter: invert(100) !important; } /* --> HEADER > MENU > DROPDOWNS > INNER LEVELS [2] =========================================================================================================== */ /* --> HEADER > MENU > DROPDOWNS > INNER LEVELS > PARENT HEADER [3] ------------------------------------------------------------- */ #menu .parent_header { display: flex; flex-direction: row; margin-bottom: 30px; border-bottom: 1px solid #ddd } /* --> HEADER > MENU > DROPDOWNS > INNER LEVELS > PARENT HEADER (DESKTOP ONLY) */ /* --> HEADER > MENU > DROPDOWNS > INNER LEVELS > PARENT HEADER > ARROW BACK */ #menu .parent_header .arrow_back img { fill: var(--accent_1) !important; transform: rotate(180deg); /* width: 20px; */ height: 15px; cursor: pointer; margin-right: 10px; } #menu .parent_header .arrow_back img:hover { /* fill: var(--accent_1) !important; */ filter: invert(42%) sepia(89%) saturate(504%) hue-rotate(136deg) brightness(97%) contrast(101%) !important; -webkit-filter: invert(42%) sepia(89%) saturate(504%) hue-rotate(136deg) brightness(97%) contrast(101%) !important; } /* --> HEADER > MENU > DROPDOWNS > INNER LEVELS > PARENT HEADER > PARENT LINK */ #menu .parent_header>a { padding: 0px; text-transform: uppercase !important; color: var(--accent_3) !important; font-weight: 500; } #menu .parent_header { height: 56px !important; min-height: 56px; display: flex; align-items: center; border-color: var(--accent_3) !important } /* --> HEADER > MENU > EXTRA LINKS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #menu .extra_links { display: flex; flex-direction: column; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2) } /* --> HEADER > MENU > SOCIALS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #menu_container .socials_section { display: flex; flex-wrap: wrap; gap: 0px 17px } #menu_container .socials_section .socials_heading { width: 100% !important; text-align: left; font-size: 14px; text-transform: uppercase; margin-bottom: 17px; } #menu_container .socials_section { display: flex; margin-top: 55px; } #menu_container .socials_section a { /* margin-right: 20px !important; */ width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; background: var(--accent_1_amea); border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; line-height: 1 !important; padding: 0px !important; } #menu_container .socials_section svg { /* width: 10px; */ fill: white; height: 17px; color: white !important; filter: brightness(100) !important; } #menu_container .socials_section span { color: white !important; } #menu_container .socials_section h5 { margin-right: 50px; } #menu_container .socials_section { margin-top: 0px !important; padding-bottom: 20px; text-align: center; padding-left: 30px; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION HEADER VVV VVV VVV VVV VVV VVV VVV */ /* --> HEADER > HOME PAGE TRANSPARENCY [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* CHECK HOME SECTION */ /* --> HEADER > MINICART [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* #menu .nav.navbar-nav .dropdown:first-child { order: 9999; } */ /* --> HEADER > MINICART > LAYOUT [2] =========================================================================================================== */ #cart .dropdown-menu { display: block !important; position: fixed; top: 0px; right: 0px; height: 100vh; transform: translateX(100%); transition: all 0.4s; border-radius: 0px; padding: 20px; width: var(--minicart-width); background: white; border: none; margin: 0px; } body:before { transition: all 0.4s; content: ""; background: rgba(0, 0, 0, 0.5); width: 100vw; height: calc(100vh + 300px); display: block; position: fixed; z-index: 4; opacity: 0; visibility: hidden; } #cart .dropdown-menu li>div { min-width: unset !important; margin-inline: auto; } /* --> HEADER > MINICART > LAYOUT > SECTIONS [3] ------------------------------------------------------------- */ #cart .dropdown-menu>li.top-section .minicart_content { max-height: calc(100vh - 415px); overflow: auto; } #cart .dropdown-menu>li.top-section { top: 0px !important; margin-top: 0px !important; padding-top: 0px !important; height: calc(100% - 295px); overflow: hidden; } #cart .dropdown-menu>li.bottom-section { height: 295px; } /* --> HEADER > MINICART > LAYOUT > SCROLLBAR [3] ------------------------------------------------------------- */ #cart .dropdown-menu>li.top-section .minicart_content::-webkit-scrollbar { width: 6px !important; } #cart .dropdown-menu>li.top-section .minicart_content::-webkit-scrollbar-thumb { background: var(--accent_2) !important; border-radius: 3px !important; border: none !important; } #cart .dropdown-menu>li.top-section .minicart_content::-webkit-scrollbar-thumb:hover { background: var(--accent_2) !important; } #cart .dropdown-menu>li.top-section .minicart_content::-webkit-scrollbar-track { background: #d8d8d8 !important; border-radius: 3px !important; } /* --> HEADER > MINICART > ENABLED [2] =========================================================================================================== */ .cart_enabled { overflow: hidden !important; } .cart_enabled #cart .dropdown-menu { transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); } .cart_enabled body:before { opacity: 1; visibility: visible; width: calc(100% - var(--minicart-width)); } /* --> HEADER > MINICART > EMPTY [2] =========================================================================================================== */ #cart .dropdown-menu .cart-empty { font-size: 18px; margin-top: 100px; color: black; } /* --> HEADER > MINICART > INTRO [2] =========================================================================================================== */ .minicart_intro { margin-bottom: 22px; } .minicart_intro .title { color: #000000; font-size: 12.79px; letter-spacing: 0.85px; line-height: 15px; text-align: center; text-transform: uppercase; } .minicart_intro .subtitle { color: #000000; font-size: 34.12px; line-height: 41px; text-align: center; font-weight: 500; text-transform: uppercase; } /* --> HEADER > MINICART > INTRO > EMPTY [3] ------------------------------------------------------------- */ #cart .dropdown-menu li.cart-empty p { margin: 20px 0; font-family: var(--font_2); font-size: 22px; font-weight: bold; /* text-transform: uppercase; */ margin-top: 10px; padding-inline: 15px; color: #000; } /* --> HEADER > MINICART > CLOSE BUTTON [2] =========================================================================================================== */ #cart_close_button { cursor: pointer; position: absolute; right: 20px; top: 20px; } /* --> HEADER > MINICART > PRODUCT LIST [2] =========================================================================================================== */ /* --> HEADER > MINICART > PRODUCT LIST > LAYOUT [3] ------------------------------------------------------------- */ #cart .dropdown-menu .table-products { border-collapse: separate; border-spacing: 0 25px; margin-top: -25px; padding-right: 30px; padding-left: 10px; } #cart .dropdown-menu .table-products td, #cart .dropdown-menu .table-products th { border: none; } #cart .dropdown-menu .table-products>tbody>tr { position: relative; } #cart .dropdown-menu .table-products>tbody>tr:not(:last-child) { /* box-shadow: 0 1px #ddd */ } /* --> HEADER > MINICART > PRODUCT LIST > THUMB [3] ------------------------------------------------------------- */ #cart .dropdown-menu .product-thumb { vertical-align: middle; width: 150px; height: 150px; padding: 15px; box-shadow: none !important; } #cart .dropdown-menu .product-thumb img { width: 100%; height: auto; } #cart .dropdown-menu .product-thumb .img-thumbnail { /* width: 150px; height: 150px; */ border-radius: 0px; border: none; width: 100% !important; min-width: 100% !important; display: block !important; } #cart .dropdown-menu .product-thumb>a { height: fit-content !important; display: block !important; padding: 0px; overflow: hidden; position: relative; } #cart .dropdown-menu .product-thumb>a:before { content: ""; width: 100%; height: 100%; position: absolute; background: rgba(0, 0, 0, .06); top: 0px; left: 0px; z-index: 3; display: block !important; } /* --> HEADER > MINICART > PRODUCT LIST > INFO [3] ------------------------------------------------------------- */ #cart .dropdown-menu .product-info { display: flex; flex-direction: column; /* min-height: 150px; padding: 15px 0px 15px 20px; */ } #cart .dropdown-menu .product-info a { color: #000000; font-size: 16px; text-align: left; font-weight: bold; text-transform: uppercase; display: block; margin-bottom: 12px; } /* --> HEADER > MINICART > PRODUCT LIST > OPTIONS [3] ------------------------------------------------------------- */ #cart .dropdown-menu .product-info .product-options { margin-bottom: 8px; } #cart .dropdown-menu .product-info .product-options .option-name { font-weight: bold; color: black; font-size: 14px; text-transform: uppercase; } #cart .dropdown-menu .product-info .product-options .option-value { color: #6c6c6c; font-size: 15px; } /* --> HEADER > MINICART > PRODUCT LIST > PRICE [3] ------------------------------------------------------------- */ #cart .dropdown-menu .product-info .product-price { color: #000; font-size: 18px; font-weight: bold; margin-top: auto; } /* --> HEADER > MINICART > PRODUCT LIST > QTY [3] ------------------------------------------------------------- */ td.text-right.product-qty { vertical-align: bottom; font-size: 18px; font-weight: bold; color: black; position: absolute; bottom: 6px; right: 0px; border: none !important; } /* --> HEADER > MINICART > PRODUCT LIST > REMOVE [3] ------------------------------------------------------------- */ td.text-center.product-remove { width: 15px; } header #cart .btn.btn-danger.btn-xs { background: none; border-radius: 0px; border: none; padding: 5px; transform: translate(5px, -4px); -webkit-transform: translate(5px, -4px); -moz-transform: translate(5px, -4px); -ms-transform: translate(5px, -4px); -o-transform: translate(5px, -4px); } /* --> HEADER > MINICART > BOTTOM SECTION [2] =========================================================================================================== */ li.bottom-section { margin-top: auto; display: block; position: absolute; bottom: 0px; right: 0px; background: #0f0f0f; width: 100%; padding: 25px 20px; } li.bottom-section>div.container { width: 390px; max-width: 100%; margin-inline: auto; } /* --> HEADER > MINICART > BOTTOM SECTION > TOTALS [3] ------------------------------------------------------------- */ /* hide subtotal section */ .bottom-section .container .totals>div:first-child { display: none; } .bottom-section .container .totals>div { display: flex; justify-content: space-between; text-transform: uppercase; color: white; } .bottom-section .container .totals>div .total-title { font-size: 16px; font-weight: 600; } .bottom-section .container .totals>div .total-text { font-size: 25px; font-weight: bold; } /* --> HEADER > MINICART > BOTTOM SECTION > BUTTONS [3] ------------------------------------------------------------- */ #cart .dropdown-menu .cart-footer { display: flex; flex-direction: column; width: 100%; text-align: center; justify-content: center; align-items: center; } #cart .dropdown-menu .cart-footer>a { width: 100%; height: 60px; display: flex; align-items: center; justify-items: center; max-width: 100%; color: #ffffff; font-size: 16px; font-weight: bold; text-transform: uppercase; background: black; } #cart .dropdown-menu .cart-footer>a:first-child { margin-bottom: 10px; background: var(--accent_3); transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; } #cart .dropdown-menu .cart-footer>a:last-child { border: 1px solid rgba(255, 255, 255, 0.35); background: none; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; } #cart .dropdown-menu .cart-footer>a:hover { background: var(--accent_2); border-color: var(--accent_2); color: white; } #cart .dropdown-menu .cart-footer>a>* { margin: 0 auto; } /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH [2] =========================================================================================================== */ #search_contents { position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; /* background: rgba(179, 48, 48, 0.95); */ z-index: 999999; padding: 0px 20px; transition: all 0.3s; opacity: 0; visibility: hidden; } #search_contents #search { margin-top: 250px; margin-left: auto; margin-right: auto; } .live-search-div { top: 299px !important; padding: 5px 0 40px !important; width: calc(100vw - 20px) !important; max-height: calc(100vh - 339px); } .live-search-div ul { display: flex !important; flex-wrap: wrap !important } .live-search-div ul li { flex: 1 1 auto !important; } .live-search-div ul li a { display: flex !important; flex-direction: column !important; } .live-search-div .product-image img {} .live-search-div ul li .product-name { font-weight: normal !important; line-height: normal !important; } .live-search-div ul li .product-price { width: 100% !important; text-align: left !important; font-size: 15px !important; } .live-search-div ul li .product-price .special { color: #999 !important; } .live-search-div .result-text { height: 40px !important; display: flex !important; justify-content: center !important; align-items: center !important; font-size: 15px !important; background: var(--accent_1) !important; } /* @media(max-width: 615px){ .live-search-div ul li { flex: unset !important; width: 50% !important; margin-right: 0px !important; margin-left:0px !important } } */ .search_enabled #search_contents { opacity: 1; visibility: visible; } /* html.search_enabled{ overflow:hidden !important; } */ #search_contents .close_button { cursor: pointer; top: 20px; right: 20px; position: absolute; } #search_contents .close_button svg { width: 30px; height: 30px; } #search { margin-bottom: 0px !important; } #search, .live-search-div { width: 100% !important; max-width: 1110px !important; } #search .input-lg, #search .input-group-btn, #search .btn.btn-default.btn-lg { background: none !Important; } #search .input-lg { height: 55px; line-height: normal; font-size: 18px !important; padding-left: 15px; border-bottom: 1px solid var(--accent_1) !important; color: var(--accent_1); font-weight: bold; font-style: italic; } #search .btn.btn-default.btn-lg { border-bottom: 1px solid var(--accent_1) !important; height: 55px; width: 100%; } #search .btn-lg svg { width: 30px !important; height: 30px !important; } #search .input-group-btn { width: 55px; } .live-search-div { margin-top: 27px !important; border-radius: 0px !important; box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, .2) !important; } .live-search-div ul li { display: flex !important; align-items: center !important; justify-content: center !important; } /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH UPDATE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ html.search_enabled { overflow: hidden !important; } /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH > CONTENTS [2] =========================================================================================================== */ /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH > CONTENTS > INPUT BAR [3] ------------------------------------------------------------- */ #search_contents #search { margin-top: 100px; } /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH > CONTENTS > RESULTS [3] ------------------------------------------------------------- */ #search_contents { overflow: auto; } .live-search-div { position: relative !important; transform: none !important; left: 0px !important; top: 0px !important; padding: 0px !important; margin-left: auto; margin-right: auto; border: none !important; box-shadow: 0px 5px 40px -5px rgba(0, 0, 0, .2) !important; } /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH > CONTENTS > RESULTS > ITEMS */ .live-search-div ul { flex-wrap: wrap !important; align-content: space-between !important; padding: 5px !important; background: white; } .live-search-div ul li { flex: 1 1 200px !important; /* flex:auto !important; */ text-align: center !important; border: 1px solid #c8c8c8 !important; margin: 5px !important; background: #f6f6f6 !important; transition: all 0.12s; } .live-search-div ul li:hover { border-color: #000 !important; } .live-search-div ul li>a *:not(img) { text-align: center !important; width: 100% !important; max-width: 150px !important; } /* --> HEADER > LAYOUT > RIGHT SECTION > SEARCH > CONTENTS > RESULTS > SHOW MORE */ .live-search-div .result-text { position: relative !important; height: 50px !important; text-transform: uppercase; font-weight: bold; } .live-search-div .view-all-results { width: 100%; height: 100%; display: flex !important; align-items: center !important; justify-content: center !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION FOOTER VVV VVV VVV VVV VVV VVV VVV */ footer { clear: both; /* background: linear-gradient(90deg, #061F3E 50%, #0561D1 100%); */ background: linear-gradient(90deg, #5364a4 50%, #8190c7 100%) !important; /* background-image: url("/image/catalog/desikos-b2c/cut_assets/footer.png"), linear-gradient(270deg, #0561D1 0%, #061F3E 100%); */ background-repeat: no-repeat; /* background-size: auto calc(100% - 40px) !important; */ /* background-position: calc(var(--calculatedPadding) + 15px) 50% !important; */ padding-top: 0px; /* background-repeat: no-repeat; background-position: center 37px; */ margin-top: 50px !important; display: flex; overflow: hidden; } footer:after { /* content: url("/image/catalog/desikos-b2c/desikos_cut_assets/home/footer.png"); */ position: absolute; right: 0px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } html:has(#common-home) footer { margin-top: 0px !important; } /* --> FOOTER > BACK TO TOP [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> FOOTER > BACK TO TOP > DISABLED [2] =========================================================================================================== */ #back_to_top { display: none !important; } /* --> FOOTER > BACK TO TOP > LAYOUT [2] =========================================================================================================== */ footer { position: relative !important; z-index: 1; } #back_to_top { position: absolute; right: 20px; top: 30px; z-index: 6; font-size: 13px; /* font-weight: bold; */ cursor: pointer; } #back_to_top:before { content: "\f106" !important; font-family: FontAwesome; font-size: 30px; color: var(--accent_3); left: 0; right: 0; text-align: center; position: absolute; bottom: 100%; margin-bottom: -14px; transition: all .28s; -webkit-transition: all .28s; -moz-transition: all .28s; -ms-transition: all .28s; -o-transition: all .28s; } #back_to_top:hover:before { margin-bottom: -6px; } /* --> FOOTER > BACK TO TOP > SWITCH [2] =========================================================================================================== */ @media (max-width: 768px) { #back_to_top { display: block !important; } } /* --> FOOTER > COLUMNS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ html:not(.product-product) footer { margin-top: 80px; } /* --> FOOTER > COLUMNS > LAYOUT [2] =========================================================================================================== */ footer .container { width: 100%; padding-block: 65px 5px; } /* footer .links-row { display: flex; } footer .footer-column { flex: 1 } footer .footer-column.newsletter_socials_column { flex: 1.5; } */ footer .links-row { display: grid; gap: 20px; grid-template-columns: repeat(5, minmax(0, 1fr)); } /* --> FOOTER > COLUMNS > TITLE [2] =========================================================================================================== */ footer .footer-column h5, .footer-column .newsletter_section>.nl_pre_title { color: white; font-weight: bold; text-transform: uppercase; font-size: 16px; margin-bottom: 15px; margin-top: 0px !important; } /* --> FOOTER > COLUMNS > TEXT [2] =========================================================================================================== */ footer { color: white; } footer .footer-column li, footer .footer-column a, footer .footer-column span, footer .footer-column p { font-size: 15px; margin: 0px 0px; display: block; color: white; transition: all .12s; -webkit-transition: all .12s; -moz-transition: all .12s; -ms-transition: all .12s; -o-transition: all .12s; } footer .footer-column a { width: fit-content; } footer .footer-column a:hover { color: #c6d3ff !important } /* footer .footer-column.infos li a:not([href*="maps"]) { margin-left: 6px } */ .footer-column ul { display: flex; flex-direction: column; gap: 8px } .footer-column.infos li { display: flex; } /* --> FOOTER > COLUMNS > CONTACT INFOS [2] =========================================================================================================== */ /* --> FOOTER > COLUMNS > LINKS [2] =========================================================================================================== */ .footer-column :not(h5) { font-size: 15px; } /* --> FOOTER > COLUMNS > NEWSLETTER [2] =========================================================================================================== */ /* --> FOOTER > COLUMNS > NEWSLETTER > LAYOUT [3] ------------------------------------------------------------- */ .footer-column .newsletter_section .news-form { text-align: left; } footer .links-row>.footer-column:last-child { position: relative; /* padding-left: 104px; */ /* padding-left: max(5.5vw, var(--defaultPadding)) */ } /* footer .links-row>.footer-column:last-child::before { content: ""; width: calc(100% + var(--calculatedPadding)); height: 1000px; position: absolute; top: -75px; z-index: -0; left: 0px; background: var(--accent_2); border-radius: 150px 0 0 0; -webkit-border-radius: 150px 0 0 0; -moz-border-radius: 150px 0 0 0; -ms-border-radius: 150px 0 0 0; -o-border-radius: 150px 0 0 0; } */ footer .links-row>.footer-column:last-child .newsletter_section { z-index: 1; position: relative; } .footer-column .newsletter_section .news-form>div:has(#email) { display: flex; flex-direction: column; gap: 20px; } /* --> FOOTER > COLUMNS > NEWSLETTER > TEXTS [3] ------------------------------------------------------------- */ /* .footer-column .newsletter_section>.nl_pre_title { color: #FFFFFF; font-size: 16px; font-weight: 900; text-transform: uppercase; } */ .footer-column .newsletter_section>.nl_title { /* font-family: var(--font2); */ font-size: 45px; color: white; /* margin-top: 13px; */ margin-bottom: 7px; font-weight: 300; line-height: normal; margin-top: -10px; } .footer-column .newsletter_section>.nl_post_title { color: white; } .footer-column .newsletter_section>.news-form { margin-top: 12px !important; } /* --> FOOTER > COLUMNS > NEWSLETTER > INPUT [3] ------------------------------------------------------------- */ .footer-column .newsletter_section .news-form>div { padding: 0px !important; } .footer-column .newsletter_section .news-form input#email { background: transparent; color: white !important; opacity: 1; border-bottom: 1px solid rgba(255, 255, 255, .4) !important; font-size: 15px !important; height: 35px; /* line-height: 50px; */ padding: 0px 5px 0px 10px !important; box-sizing: border-box !important; /* width: calc(100% - 165px) !important; */ margin-right: 20px; width: 100%; margin-top: 10px; } .footer-column .newsletter_section .news-form input#email::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff !important; opacity: 1 !important; } .footer-column .newsletter_section .news-form input#email::-moz-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff !important; opacity: 1 !important; } .footer-column .newsletter_section .news-form input#email:-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff !important; opacity: 1 !important; } .footer-column .newsletter_section .news-form input#email::-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff !important; opacity: 1 !important; } .footer-column .newsletter_section .news-form input#email::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff !important; opacity: 1 !important; } .footer-column .newsletter_section .news-form input#email:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff !important; } .footer-column .newsletter_section .news-form input#email::-ms-input-placeholder { /* Microsoft Edge */ color: #fff !important; } /* --> FOOTER > COLUMNS > NEWSLETTER > BUTTON [3] ------------------------------------------------------------- */ .footer-column .newsletter_section .news-form #subscribe { padding: 18px 0px !important; font-size: 14px !important; width: 145px !important; font-weight: bold; text-transform: uppercase; /*background: none; */ box-shadow: none; border: none; /*border-radius: 0px; */ box-sizing: border-box; background: var(--accent_3); line-height: 1 !important; float: right; border-radius: 8px; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } .footer-column .newsletter_section .news-form #subscribe:hover { background: var(--accent_4); } /* --> FOOTER > COLUMNS > NEWSLETTER > TERMS [3] ------------------------------------------------------------- */ .footer-column .newsletter_section .news-form .buttons { margin-top: 12px; margin-bottom: 0px; } .footer-column .newsletter_section .news-form .buttons .pull-center { margin-left: 0px !important; } .footer-column .newsletter_section .buttons { display: flex; } .footer-column .newsletter_section .buttons input[type="checkbox"] { margin-top: 2px !important; margin-right: 5px; } .footer-column .newsletter_section .buttons .pull-center { margin-left: 10px; } .footer-column .newsletter_section .buttons .pull-center { line-height: 1; font-size: 13px; } .footer-column .newsletter_section .buttons .pull-center a { display: inline !important; } .footer-column .newsletter_section .buttons .pull-center a b { margin-left: 0px !important; line-height: normal; } /* --> FOOTER > COLUMNS > NEWSLETTER > ERRORS [3] ------------------------------------------------------------- */ .footer-column .newsletter_section .error.not-valid, .footer-column .newsletter_section .error.allready { font-weight: bold; letter-spacing: normal; background: #ffd6dd; padding: 5px; text-align: center; } /* --> FOOTER > EXTRA CONTAINER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .footer_extra_container { width: fit-content; display: flex; align-items: center; margin-left: calc(100% / 5); /* margin-top: -100px; */ margin-top: -50px; justify-content: flex-start; } /* --> FOOTER > EXTRA CONTAINER > CONTACT SECTION [3] ------------------------------------------------------------- */ .footer_extra_container .contact_section_wrapper { width: calc(2 * (var(--maxContainerWidth) / 5)); display: flex; } .footer_extra_container .contact_section { border: 1px solid white; border-radius: 15px; display: flex; min-height: 100%; gap: 43px; /* height: 67px; */ align-items: flex-start; padding: 13px 33px; /* width: fit-content; */ max-width: 550px; width: 100%; height: fit-content; justify-content: space-evenly; } .footer_extra_container .contact_section .contact_title { margin-bottom: 10px !important; } .footer_extra_container .contact_section>div { display: flex; flex-direction: column } .footer_extra_container .contact_section a { font-weight: bold; font-size: 20px } /* --> FOOTER > EXTRA CONTAINER > SOCIALS SECTION [3] ------------------------------------------------------------- */ footer .socials_section { display: flex; gap: 10px; flex-direction: column; width: fit-content; align-items: center; margin-inline: auto; z-index: 1; position: relative; align-items: flex-start; } footer .socials_section a { margin-right: 30px !important; display: flex; align-items: center; } footer .socials_section a:last-child { margin-right: 0px !important; } footer .socials_section div { display: flex } footer .socials_section svg { /* width: 10px; */ fill: white; height: 17px; } /* footer .socials_section a:hover svg { filter: invert(42%) sepia(89%) saturate(504%) hue-rotate(136deg) brightness(97%) contrast(101%) !important; -webkit-filter: invert(42%) sepia(89%) saturate(504%) hue-rotate(136deg) brightness(97%) contrast(101%) !important; } */ footer .socials_section h5 { /* margin-right: 43px; */ font-size: 16px; color: white; font-weight: 700; } /* --> FOOTER > HORIZONTAL LINKS CONTAINER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ footer .horizontal_links_container { margin-top: 37px; } footer .horizontal_links_container>a { white-space: nowrap; } footer .horizontal_links_container>a:not(:last-child):after { content: "|"; margin-inline: 10px 5px } footer .horizontal_links_container>a:last-child { font-weight: bold; } /* --> FOOTER > POWERED [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .powered-row { margin-top: 50px; } .powered_by { display: flex; justify-content: space-between; font-size: 14px; line-height: normal; margin-bottom: 15px; align-items: center !important; position: relative; z-index: 0; } .powered_by img { margin-left: 5px; } .powered_by>div { display: flex; align-items: center; } footer .powered_by a img { transition: all .12s; } footer .powered_by a:hover img { transform: rotate(16deg) scale(1.2); -webkit-transform: rotate(16deg) scale(1.2); -moz-transform: rotate(16deg) scale(1.2); -ms-transform: rotate(16deg) scale(1.2); -o-transform: rotate(16deg) scale(1.2); } /* --> FOOTER > PAYMENTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .payments-row { background: white; height: 54px; display: flex; align-items: center; width: 100vw; margin-top: 15px; font-size: 14px; font-weight: bold; color: black; text-transform: uppercase; } .payments-row>div { margin-right: 20px; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION HOME VVV VVV VVV VVV VVV VVV VVV */ /* --> HOME > HEADER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* html:has(#common-home) body { margin-top: 0px !important; } */ /* --> HOME > HEADER > TRANSITIONS [2] =========================================================================================================== */ /* html header, html header #top-bar, html header .header_left_section, html:has(#common-home) #header_sections_container:before, html:has(#common-home):before { transition: all .4s; } */ /* --> HOME > HEADER > BG [2] =========================================================================================================== */ /* html:has(#common-home):not(.sticky_enabled) header, html:has(#common-home):not(.sticky_enabled) header .header_left_section { background: transparent !important; box-shadow: none !important; } */ /* --> HOME > HEADER > BOTTOM BORDER [2] =========================================================================================================== */ /* html:has(#common-home) #header_sections_container:before { width: 100%; height: 1px; position: absolute; background: rgba(255, 255, 255, .5); display: block !important; left: 50%; transform: translateX(-50%); bottom: 40px; opacity: 0; } html:has(#common-home):not(.sticky_enabled) #header_sections_container:before { opacity: 1; } */ /* --> HOME > HEADER > TOGGLING [2] =========================================================================================================== */ /* html:has(#common-home):before { content: ""; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0)); height: 250px; width: 100%; position: fixed; top: 0px; left: 0px; z-index: 2; visibility: hidden; opacity: 0; } html:has(#common-home):not(.sticky_enabled):before { opacity: 1; visibility: visible; } @media(max-width: 768px) { html:has(#common-home):not(.sticky_enabled):before { height: 110px; } } */ /* --> HOME > HEADER > TOP BAR [2] =========================================================================================================== */ /* html:has(#common-home) #top-bar { opacity: 0; visibility: hidden; } html.sticky_enabled:has(#common-home) #top-bar { opacity: 1; visibility: visible; transform: none; } */ /* --> HOME > SLIDESHOW [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > SLIDESHOW > LAYOUT [2] =========================================================================================================== */ #content .slideshow { width: 100vw; margin-left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } /* --> HOME > SLIDESHOW > TOGGLING [2] =========================================================================================================== */ @media(max-width: 768px) { #common-home .slideshow[api-id="27"] { display: none !important; } } @media(min-width: 769px) { #common-home .slideshow[api-id="130"] { display: none !important; } } /* --> HOME > SLIDESHOW > NAVIGATION [2] =========================================================================================================== */ #content .slideshow .swiper-pagination-bullet { transition: all .22s !important; border: 3px solid #fff; width: 17px; height: 17px; box-shadow: none !important; background: #000; } #content .slideshow .swiper-pagination-bullet-active { border-color: var(--accent_3) !important; background: var(--accent_3) !important } #content .slideshow .swiper-pager { display: none !important; } /* --> HOME > MASONRY-LIKE BANNER GRID [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .module_row_section.multi-banner-group { margin-top: 50px !important; } .module_row_section.multi-banner-group .section_title { display: none; } .module_row_section.multi-banner-group .columns-container, .module_row_section.multi-banner-group .columns-container .row { margin-left: 0px !important; margin-right: 0px !important; } .module_row_section.multi-banner-group .columns-container { display: grid; grid-template-columns: 32.73% 32.73% 32.12%; grid-template-rows: 21.72% 38.79% 38.79%; gap: 1.21% !important; grid-template-areas: "left top top" "left mid-top right" "left mid-bottom right"; } .module_row_section.multi-banner-group .columns-container>.column-content-1 { grid-area: left } .module_row_section.multi-banner-group .columns-container>.column-content-2 { grid-area: top } .module_row_section.multi-banner-group .columns-container>.column-content-3 { grid-area: mid-top } .module_row_section.multi-banner-group .columns-container>.column-content-4 { grid-area: mid-bottom } .module_row_section.multi-banner-group .columns-container>.column-content-5 { grid-area: right } /* --> HOME > USP SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .usp_section { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 350px)); /* background: #F9F9F9; */ /* border-top: 1px solid #D2D2D2; */ /* border-bottom: 1px solid #D2D2D2; */ gap: 15px; margin-top: 150px; /* padding: 50px var(--calculatedPadding); */ /* width: 100vw; */ /* margin-left: calc(-1 * var(--calculatedPadding)); */ justify-content: space-between; } @media(max-width: 1650px) { .usp_section { justify-content: space-evenly; } } .usp_section>.item { /* max-width: 250px; */ padding: 0px 20px; } .usp_section>.item .image { height: 65px; } .usp_section>.item .image img { filter: brightness(0) invert(37%) sepia(6%) saturate(3887%) hue-rotate(189deg) brightness(79%) contrast(103%); height: 40px; } .usp_section>.item .title { font-size: 16px; /* font-weight: bold; */ margin-bottom: 10px; color: var(--accent_2); } .usp_section>.item .text { font-size: 14px; color: rgba(0, 0, 0, .63); } /* --> HOME > PRODUCT CATEGORIES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > PRODUCT CATEGORIES > LAYOUT [2] =========================================================================================================== */ .carousel.product_categories { margin-top: 80px; } .carousel.product_categories .swiper-container { overflow: visible; } /* --> HOME > PRODUCT CATEGORIES > LAYOUT > BG [3] ------------------------------------------------------------- */ /* .carousel.product_categories { position: relative; z-index: 0; } .carousel.product_categories:before { content: ""; background: url("/image/catalog/desikos-b2c/cut_assets/banner 3.jpg") !important; height: 1495px; width: 100vw; position: absolute; display: block; left: 50%; top: -350px; transform: translateX(-50%); z-index: -1; } */ /* --> HOME > PRODUCT CATEGORIES > TITLE [2] =========================================================================================================== */ .carousel.product_categories .section_title { margin-bottom: 35px; } /* .carousel.product_categories .section_title * { color: white !important; } */ /* --> HOME > PRODUCT CATEGORIES > NAVIGATION [2] =========================================================================================================== */ .carousel.product_categories .swiper-pager { top: 35px !important; } .carousel.product_categories .swiper-pager>div:before { color: white !important; } /* --> HOME > PRODUCT CATEGORIES > ITEMS [2] =========================================================================================================== */ .carousel.product_categories .swiper-slide-link, .carousel.product_categories .swiper-slide-link img { width: 100% !important; } .carousel.product_categories .text_container, .carousel.product_categories .text_container .swiper-slide-link { transition: all .2s; } /* --> HOME > PRODUCT CATEGORIES > ITEMS > TITLE [3] ------------------------------------------------------------- */ .carousel.product_categories .swiper-slide .text_container { font-size: 16px; font-weight: normal; display: block !important; color: black !important; width: calc(100% - 30px); padding: 35px 10px; background: white } .carousel.product_categories .swiper-slide:hover .text_container { color: var(--accent_3) !important; } /* --> HOME > PRODUCT CATEGORIES > ITEMS > LINK TEXT [3] ------------------------------------------------------------- */ .carousel.product_categories .text_container .swiper-slide-link { color: black; margin-top: 0px; display: block; opacity: 0; visibility: hidden; font-weight: normal !important; margin-top: 20px; } .carousel.product_categories .text_container .swiper-slide-link:hover { text-decoration: underline; } /* --> HOME > PRODUCT CATEGORIES > ITEMS > HOVER EFFECT [3] ------------------------------------------------------------- */ .carousel.product_categories .swiper-slide:hover .text_container { transform: translateY(-30px); box-shadow: 0 4px 8px 0 rgba(98, 98, 98, 0.25); } .carousel.product_categories .swiper-slide:hover .swiper-slide-link { opacity: 1; visibility: visible; } /* --> HOME > 4 BANNER GRID [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .home_4_banner_grid { margin-top: 80px } .home_4_banner_grid .swiper-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px } .home_4_banner_grid .swiper-wrapper .swiper-slide, .home_4_banner_grid .swiper-wrapper .swiper-slide a, .home_4_banner_grid .swiper-wrapper .swiper-slide a img { width: 100% !important; } .home_4_banner_grid .swiper-slide { overflow: hidden; } .home_4_banner_grid .swiper-slide img { transition: all .2s; } .home_4_banner_grid .swiper-slide:hover img { transform: scale(1.07); } /* --> HOME > DAILY OFFERS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .products_carousel_with_html { display: flex; align-items: flex-start; max-width: 100% !important; position: relative; margin-top: 115px } /* --> HOME > DAILY OFFERS > TITLE [2] =========================================================================================================== */ .products_carousel_with_html .section_title { margin-top: 60px !important; max-width: 440px; padding-right: 20px; } .products_carousel_with_html .section_title img { max-width: 100%; margin-bottom: 80px; width: 250px; } .products_carousel_with_html .section_title>* { width: 340px } .products_carousel_with_html .section_title .main_title { margin-bottom: 0px } /* --> HOME > DAILY OFFERS > PRODUCTS [2] =========================================================================================================== */ .products_carousel_with_html>.row { width: calc(100% - 440px) !important; } /* --> HOME > DAILY OFFERS > VIEW MORE [2] =========================================================================================================== */ .products_carousel_with_html .view_more { position: absolute; top: unset; right: 75px; bottom: calc(100% - 15px); z-index: 99999; color: white !important; border-color: white !important; } .products_carousel_with_html .view_more:hover { color: var(--accent_3) !important; } /* --> HOME > DAILY OFFERS > NAVIGATION [2] =========================================================================================================== */ @media(min-width: 1651px) { .products_carousel_with_html .swiper-pager { position: absolute; top: 220PX !important; bottom: unset !important; right: calc(100% + 100px) !important; } } @media(max-width: 1650px) { .products_carousel_with_html .swiper-pager { position: absolute; top: unset !important; bottom: calc(100% + 25px) } } /* --> HOME > ABOUT US [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .html_section:has(.about_us_section) { /* background: #8291c8 !important; */ padding-block: 82px; color: white; box-shadow: var(--calculatedPadding) 0px #5364a4, calc(-1 * var(--calculatedPadding)) 0px #8190c7; margin-top: 70px; background: linear-gradient(-90deg, #5364a4 50%, #8190c7 100%) !important; } .html_section:has(.about_us_section)>h2 { color: white !important; } .html_section .about_us_section .section_title { margin-bottom: 20px; color: white; } .html_section .about_us_section { display: grid; gap: 80px; grid-template-columns: 1fr 1fr; } .html_section .about_us_section .video_content { height: fit-content !important; } .html_section .about_us_section .video_content iframe { height: auto; aspect-ratio: 16/9; pointer-events: none !important; width: 100%; border: none; outline: none; } /* --> HOME > PRODUCT TABS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .module_product_tabs { display: flex; flex-direction: column; width: 100%; /* padding-left: 50px; padding-right: 50px; */ margin-top: 75px } .module_product_tabs .swiper-container { overflow: visible !important; } /* --> HOME > PRODUCT TABS > TITLE & NAVIGATION WRAPPER [2] =========================================================================================================== */ .module_product_tabs .title_n_nav_wrapper { display: flex; justify-content: flex-start; gap: 150px; align-items: flex-end; padding-right: 65px; } /* --> HOME > PRODUCT TABS > NAV TABS [2] =========================================================================================================== */ .module_product_tabs .nav-tabs { display: flex; justify-content: flex-start; margin: 0px; border: none !important; overflow: auto; /* padding-bottom: 10px; */ max-width: 100vw; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; /* margin-left: auto; margin-right: auto; */ flex-wrap: wrap; overflow: hidden; justify-content: center; } .module_product_tabs .nav-tabs>li { margin: 8px 10px; } .module_product_tabs .nav-tabs>li>a { box-shadow: none !important; font-size: 16px; color: black !important; height: 52px; display: flex; align-items: center; justify-content: center; text-transform: uppercase; transition: all 0.2s; background: #fff !important; line-height: normal; font-weight: normal; padding-inline: 23px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; position: relative; margin-right: 0px; margin-left: 0px; border-radius: 10px; border: 1px solid #c4c4c4; } .module_product_tabs .nav-tabs>li>a:hover { border-color: #000 !important; } /* --> HOME > PRODUCT TABS > NAV TABS > ACTIVE [3] ------------------------------------------------------------- */ .module_product_tabs .nav-tabs>li.active>a { color: white !important; background: var(--accent_3) !important; border-color: var(--accent_3) !important; } /* --> HOME > PRODUCT TABS > TAB PANE [2] =========================================================================================================== */ /* carousel in tabs fix */ .module_product_tabs .swiper-container { /* padding: 0px 20px; */ } .module_product_tabs .tab-content>.tab-pane { display: block !important; height: 0px !important; /* overflow:hidden; */ opacity: 0; visibility: hidden; transition: all .8s; } .module_product_tabs .tab-content>.tab-pane.active { height: auto !important; opacity: 1; visibility: visible; } /* --> HOME > PRODUCT TABS > TAB PANE > HIDE CUSTOM TITLE [3] ------------------------------------------------------------- */ .module_product_tabs .tab-content>.tab-pane h3 { display: none !important; } /* --> HOME > PRODUCT TABS > TAB PANE > PRODUCTS [3] ------------------------------------------------------------- */ #common-home .module_product_tabs .swiper-wrapper { margin-top: 25px; } .swiper-wrapper .product-layout { width: 100% !important; } /* --> HOME > PRODUCT TABS > TAB PANE > VIEW MORE [3] ------------------------------------------------------------- */ #common-home .module_product_tabs .view_more { position: absolute; right: 0px; top: -32px; } /* --> HOME > MANUFACTURERS CAROUSEL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .manufacturer_carousel { margin-top: 0px; position: relative; background: #eef2ff !important; padding-block: 80px 120px; box-shadow: 150px 0px #eef2ff, -150px 0px #eef2ff !important; } .manufacturer_carousel .swiper-container { /* overflow: visible; */ } .manufacturer_carousel .swiper-slide { border-radius: 10px !important; overflow: hidden; /* filter: grayscale(100%); */ transition: all 0.3s; /* -webkit-filter: grayscale(100%); */ background: white; } .manufacturer_carousel .swiper-slide:hover { transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); } /* .manufacturer_carousel .swiper-slide:hover img { filter: grayscale(0%); } */ /* --> HOME > MANUFACTURERS CAROUSEL > TITLE [2] =========================================================================================================== */ .manufacturer_carousel .section_title { margin-bottom: 55px; } /* --> HOME > MANUFACTURERS CAROUSEL > VIEW MORE [2] =========================================================================================================== */ .manufacturer_carousel .view_more { position: absolute; top: 117px; right: 0px; } /* --> HOME > MANUFACTURERS CAROUSEL > NAVIGATION [2] =========================================================================================================== */ .manufacturer_carousel .swiper-pager { display: none !important; } /* --> HOME > PER PROFESSION CAROUSEL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > PER PROFESSION CAROUSEL > LAYOUT [2] =========================================================================================================== */ .per_profession { margin-top: 150px; } .per_profession .swiper-container { overflow: visible; } .per_profession .swiper-slide-link, .per_profession .swiper-slide-link img { width: 100% !important; } /* --> HOME > PER PROFESSION CAROUSEL > TITLE [2] =========================================================================================================== */ .per_profession .section_title { margin-bottom: 35px; } /* --> HOME > PER PROFESSION CAROUSEL > NAVIGATION [2] =========================================================================================================== */ .per_profession .swiper-pager { display: none !important; } /* --> HOME > PER PROFESSION CAROUSEL> IMAGE [2] =========================================================================================================== */ .carousel.per_profession>.swiper-container img { margin: auto; width: 100%; } .carousel.per_profession .wrapped_in_link { width: 100% !important; } /* --> HOME > PER PROFESSION CAROUSEL> TEXTS [2] =========================================================================================================== */ /* --> HOME > PER PROFESSION CAROUSEL> TEXTS > COMMON [3] ------------------------------------------------------------- */ .carousel.per_profession .swiper-slide .text_container * { color: white; } .carousel.per_profession .swiper-slide .wrapped_in_link:before, .carousel.per_profession .swiper-slide .wrapped_in_link:after, .carousel.per_profession .swiper-slide .text_container, .carousel.per_profession .swiper-slide .text_container>* { transition: all 0.25s; } .carousel.per_profession .text_container>* { z-index: 2; position: relative; } /* --> HOME > PER PROFESSION CAROUSEL> TEXTS > CONTAINER [3] ------------------------------------------------------------- */ .carousel.per_profession .swiper-slide .text_container { position: absolute; z-index: 2; bottom: 10px; width: 100%; padding-bottom: 15px; display: block } .carousel.per_profession .swiper-slide .wrapped_in_link:before { content: ""; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 200px; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.76) 100%); } .carousel.per_profession .swiper-slide .wrapped_in_link:after { content: ""; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background-color: rgba(4, 4, 4, 0.45); opacity: 0; } /* --> HOME > PER PROFESSION CAROUSEL> TEXTS > TITLE [3] ------------------------------------------------------------- */ .carousel.per_profession .swiper-slide .text_container .swiper-slide-title { font-size: 18px; font-weight: bold; } /* --> HOME > PER PROFESSION CAROUSEL> TEXTS > LINK [3] ------------------------------------------------------------- */ .carousel.per_profession .swiper-slide .text_container .swiper-slide-link { font-family: var(--font2); font-size: 16px; border-bottom: 1px solid transparent; display: block; line-height: 1; overflow: hidden; max-height: 0px; opacity: 0; padding: 0px; margin: 0 auto; width: fit-content !important; } /* --> HOME > PER PROFESSION CAROUSEL> EFFECTS [2] =========================================================================================================== */ .carousel.per_profession .swiper-slide:hover .wrapped_in_link:before { opacity: 0; } .carousel.per_profession .swiper-slide:hover .wrapped_in_link:after { opacity: 1; } .carousel.per_profession .swiper-slide:hover .text_container .swiper-slide-link { border-bottom-color: white; margin-top: 10px !important; max-height: 16px; opacity: 1; } /* --> HOME > ROW [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .module_row_section { position: relative !important; margin-top: 110px !important; gap: 33px !important; } .module_row_section .swiper-viewport { max-width: 100vw !important; position: static; } .module_row_section .section_title { margin-bottom: 0px !important; } .module_row_section>.columns-container { display: flex !important; flex-wrap: nowrap !important; gap: max(2.1vw, var(--defaultPadding)) !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px !important; } /* --> HOME > ROW: BANNER AND PRODUCTS / PRODUCTS AND BANNER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > ROW:BANNER AND PRODUCTS / PRODUCTS AND BANNER > LAYOUT [2] =========================================================================================================== */ /* .module_row_section:is(.home_banner_n_products, .home_products_n_banner)>.columns-container { width: calc(100vw - var(--calculatedPadding)); } */ .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .carousel { display: flex; flex-direction: column; } /* --> HOME > ROW:BANNER AND PRODUCTS / PRODUCTS AND BANNER > PRODUCTS SECTION [2] =========================================================================================================== */ .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .products-carousel-module { width: 100%; display: block; position: relative !important; } .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .carousel.swiper-viewport { width: 100% !important; } .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .view_more { position: absolute; top: 0px; right: 0px; z-index: 2; margin: 0px; } /* --> HOME > ROW:BANNER AND PRODUCTS / PRODUCTS AND BANNER > VIEW MORE [2] =========================================================================================================== */ .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .view_more { right: 75px !important; } .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .view_more { bottom: calc(100% + 20px) !important; top: unset !important; } .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .view_more { display: none; } /* --> HOME > ROW:BANNER AND PRODUCTS / PRODUCTS AND BANNER > NAVIGATION [2] =========================================================================================================== */ .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .products-carousel-module .swiper-pager { bottom: calc(100% + 20px) !important; top: unset !important; position: relative !important; order: -99; bottom: unset !important; top: unset !important; margin-bottom: 35px; margin-left: auto; } /* --> HOME > ROW: BANNER AND PRODUCTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > ROW:BANNER AND PRODUCTS > LAYOUT [2] =========================================================================================================== */ /* .module_row_section.home_banner_n_products .columns-container { margin-left: calc(-1 * var(--calculatedPadding)) !important; margin-right: 0px !important; } */ /* --> HOME > ROW:BANNER AND PRODUCTS > PRODUCTS CAROUSEL [2] =========================================================================================================== */ .module_row_section.home_banner_n_products .columns-container .column-content-2 { width: calc(100% - 30px) } /* --> HOME > ROW:BANNER AND PRODUCTS > TITLE [2] =========================================================================================================== */ /* .module_row_section.home_banner_n_products .section_title * { color: white !important; } */ /* --> HOME > ROW:BANNER AND PRODUCTS > VIEW MORE [2] =========================================================================================================== */ /* .module_row_section.home_banner_n_products .view_more { color: white !important; border-color: white !important; } */ .module_row_section.home_banner_n_products .view_more:hover { color: var(--accent_3) !important; } /* --> HOME > ROW:BANNER AND PRODUCTS > NAVIGATION [2] =========================================================================================================== */ /* .module_row_section.home_banner_n_products .carousel .swiper-pager>div::before { color: white !important; } */ /* --> HOME > ROW: PRODUCTS AND BANNER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .home_products_n_banner { margin-top: 0px !important; } /* --> HOME > ROW: PRODUCTS AND BANNER > LAYOUT [2] =========================================================================================================== */ .module_row_section.home_products_n_banner .columns-container { margin-right: 0px !important; } /* --> HOME > PRODUCT CAROUSEL WITH BG [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > PRODUCT CAROUSEL WITH BG > LAYOUT [2] =========================================================================================================== */ .module_row_section.products_carousel_n_bg { background-size: cover; width: 100vw; margin-left: 50%; transform: translateX(-50%); padding-inline: var(--calculatedPadding); margin-top: 100px !important; padding-top: 120px; height: fit-content !important; background-position: left center; } .module_row_section.products_carousel_n_bg .columns-container { display: block !important; } /* --> HOME > PRODUCT CAROUSEL WITH BG > TOP TITLE [2] =========================================================================================================== */ .module_row_section.products_carousel_n_bg>.section_title * { color: white; } /* --> HOME > PRODUCT CAROUSEL WITH BG > PRODUCTS CAROUSEL [2] =========================================================================================================== */ .module_row_section.products_carousel_n_bg .products-carousel-module { display: flex; align-items: flex-start; max-width: 100% !important; position: relative; } /* --> HOME > PRODUCT CAROUSEL WITH BG > PRODUCTS CAROUSEL > TITLE [3] ------------------------------------------------------------- */ .module_row_section.products_carousel_n_bg .products-carousel-module .section_title { min-width: 440px !important; transform: translateY(-50px); } .module_row_section.products_carousel_n_bg .products-carousel-module .section_title * { font-family: var(--font_2); max-width: 210px !important; color: white; } .module_row_section.products_carousel_n_bg .products-carousel-module .section_title>.title { font-size: 106px; line-height: .85; font-weight: bold } .module_row_section.products_carousel_n_bg .products-carousel-module .section_title>.small_text { font-size: 20px; line-height: 25px !important; color: white; font-weight: 500; margin-top: 40px; } /* --> HOME > PRODUCT CAROUSEL WITH BG > PRODUCTS CAROUSEL > PRODUCTS [3] ------------------------------------------------------------- */ .module_row_section.products_carousel_n_bg .products-carousel-module>.row { width: calc(100% - 440px) !important; margin-top: 50px; } /* --> HOME > PRODUCT CAROUSEL WITH BG > PRODUCTS CAROUSEL > VIEW MORE [3] ------------------------------------------------------------- */ .module_row_section.products_carousel_n_bg .products-carousel-module .view_more { position: absolute; top: unset; right: 75px; bottom: calc(100% - 15px); z-index: 99999; color: white !important; border-color: white !important; } .module_row_section.products_carousel_n_bg .products-carousel-module .view_more:hover { color: var(--accent_3) !important; } /* --> HOME > PRODUCT CAROUSEL WITH BG > PRODUCTS CAROUSEL > NAVIGATION [3] ------------------------------------------------------------- */ .module_row_section.products_carousel_n_bg .products-carousel-module .swiper-pager { position: absolute; top: unset !important; bottom: calc(100% - 15px); } .module_row_section.products_carousel_n_bg .products-carousel-module .swiper-pager>div:before { color: white !important; } /* --> HOME > VIDEO CAROUSEL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > TEXT & BANNERS CAROUSEL > TITLE [2] =========================================================================================================== */ .video-carousel-container .pre_title, .video-carousel-container .main_title { color: white; } /* --> HOME > TEXT & BANNERS CAROUSEL > LAYOUT [2] =========================================================================================================== */ .video-carousel-container { background: var(--accent_4); margin: 0px !important; margin-top: -1px !important; padding-block: 100px 15px; box-shadow: 200px 0px var(--accent_4), -200px 0px var(--accent_4); /* margin-top: 118px !important; */ } .video-carousel-header { text-align: center; margin-bottom: 40px; position: relative; z-index: 2; } .video-carousel-header h2 { margin-top: 0px !important; } .video-swiper { margin: 50px auto 0px; position: relative; z-index: 2; width: 100%; } .video-swiper .swiper-slide { display: flex; justify-content: center; transition: all 0.3s ease; opacity: 0.7; } .video-swiper .swiper-slide-active { opacity: 1; transform: scale(1.5); z-index: 1 } .video-slide { overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); max-width: 560px; width: 100%; position: relative; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; } .video-slide.active, .swiper-slide-active .video-slide { box-shadow: 0 12px 48px rgba(0, 188, 212, 0.3); } .video-carousel-container .swiper-slide:not(.swiper-slide-active) { pointer-events: none; } .video-slide iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: block; } /* 16:9 Aspect Ratio Container */ .video-slide::before { content: ''; display: block; width: 100%; padding-top: 56.25%; /* 16:9 aspect ratio (9/16 * 100%) */ } /* Custom Swiper Navigation */ .video-carousel-container .swiper-button-next, .video-carousel-container .swiper-button-prev { background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.2); color: #ffffff; width: 50px; height: 50px; border-radius: 50%; backdrop-filter: blur(10px); transition: all 0.3s ease; display: none !important } .video-carousel-container .swiper-button-next:after, .video-carousel-container .swiper-button-prev:after { font-size: 18px; } .video-carousel-container .swiper-button-next:hover, .video-carousel-container .swiper-button-prev:hover { background: rgba(0, 188, 212, 0.3); border-color: var(--accent_3); transform: scale(1.1); } /* Custom Swiper Pagination */ .video-carousel-container .swiper-pagination { margin-top: 120px !important; position: relative !important; display: flex; width: fit-content; margin-inline: auto; gap: 8px } .video-carousel-container .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.3); opacity: 1; width: 12px; height: 12px; transition: all 0.3s ease; } .video-carousel-container .swiper-pagination-bullet:hover { background: white; } .video-carousel-container .swiper-pagination-bullet-active { background: #509af6; transform: scale(1.2); } /* --> HOME > TEXT UNDER VIDEO CAROUSEL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .video-carousel-container+.html_section { background: var(--accent_4); box-shadow: 200px 0px var(--accent_4), -200px 0px var(--accent_4); color: white; font-size: 15px; font-weight: 400 !important; } .video-carousel-container+.html_section p { font-size: 15px; text-align: center; font-weight: 400 !important; display: block; margin: 0px; width: 100%; max-width: 670px; margin-inline: auto; padding-bottom: 125px } /* --> HOME > BANNER & BLOG [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > BANNER & BLOG > LAYOUT [2] =========================================================================================================== */ .home_banner_blog { width: 100vw !important; margin-left: 50% !important; transform: translateX(-50%); position: relative !important; gap: 0px !important; margin-top: 0px !important; } .home_banner_blog .columns-container { display: flex !important; gap: 0px !important; } .home_banner_blog>.section_title { display: none !important; } /* --> HOME > BANNER & BLOG > BANNER [2] =========================================================================================================== */ .home_banner_blog .column-content-1 { width: 797px; } .home_banner_blog .swiper-slide { position: relative; } .home_banner_blog .swiper-slide::after { content: ""; background: linear-gradient(0deg, rgba(73, 91, 157, .6) 60%, rgba(117, 133, 189, .2) 100%); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } /* --> HOME > BANNER & BLOG > TEXT [2] =========================================================================================================== */ .home_banner_blog .column-content-2 { position: absolute; left: 0px; bottom: 0px; width: 797px; z-index: 1; padding-bottom: 60px; } .home_banner_blog .column-content-2>* { width: 500px; margin-left: calc((797px - 500px) / 2); } .home_banner_blog .column-content-2 .html_section h2 { margin: 0px !important; color: white !important; padding-bottom: 50px; display: block; } .home_banner_blog .column-content-2 .html_section p { color: white; font-size: 15px; font-weight: 400; } .home_banner_blog .column-content-2 .html_section a { font-weight: bold !important; color: white !important; display: block; margin-top: 25px !important } /* --> HOME > BANNER & BLOG > BLOG [2] =========================================================================================================== */ .home_banner_blog .column-content-3 { width: calc(100% - 797px); display: flex; align-items: center; padding-inline: var(--calculatedPadding); } /* --> HOME > BANNER & BLOG > BLOG > HEADING & BUTTONS [3] ------------------------------------------------------------- */ .latest_posts_wrapper>.heading_n_buttons { display: flex; justify-content: space-between; gap: 30px; } .latest_posts_wrapper>.heading_n_buttons>.blog_buttons { display: flex; gap: 30px; } .latest_posts_wrapper>.heading_n_buttons>a { white-space: nowrap; } /* --> HOME > BANNER & BLOG > BLOG > BLOG ITEMS [3] ------------------------------------------------------------- */ .blogpost_items_wrapper { margin-top: 50px; gap: 30px; display: flex; flex-direction: column; } .blogpost_items_wrapper>.blogpost_item { display: flex; gap: 30px; align-items: flex-start; } .blogpost_items_wrapper>.blogpost_item>img { max-width: 250px; } /* .blogpost_items_wrapper>.blogpost_item:hover { color: var(--accent_2); } */ /* .blogpost_items_wrapper>.blogpost_item>img { width: 232px; height: 164px; } */ .blogpost_items_wrapper>.blogpost_item>.blogpost_item_content { padding-top: 15px; } .blogpost_items_wrapper>.blogpost_item>.blogpost_item_content>.blogpost_item_date { font-size: 14px; font-weight: 400; } .blogpost_items_wrapper>.blogpost_item>.blogpost_item_content>.blogpost_item_title { font-size: 20px; font-weight: normal; line-height: 1.2 } /* --> HOME > BANNER & BLOG > BLOG > VIEW MORE [3] ------------------------------------------------------------- */ .view_more_blog { margin-top: 10px; margin-left: auto; width: fit-content !important; display: flex !important; height: fit-content; } /* --> HOME > WHY US [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > WHY US > LAYOUT [2] =========================================================================================================== */ .html_section:has(.why_us) { display: flex; justify-content: flex-start; width: 100vw; margin-left: 50%; transform: translateX(-50%); padding: 140px var(--calculatedPadding) 60px; background-repeat: no-repeat !important; background-size: contain; background-position: bottom right; gap: 55px; background: url("/image/catalog/desikos-b2c/desikos_cut_assets/home/Shape.png"), url("/image/catalog/desikos-b2c/desikos_cut_assets/home/guy.png"), linear-gradient(135deg, #0560d2 0%, #061f3e 100%); background-position: 5% bottom, 95% bottom, center; background-repeat: no-repeat, no-repeat, no-repeat; } .html_section:has(.why_us) *:not(.section_title, .title) { color: white; font-size: 15px; } /* --> HOME > WHY US > LEFT SIDE [2] =========================================================================================================== */ .html_section:has(.why_us) .left_side { width: 100%; max-width: 385px; } .html_section:has(.why_us) .left_side * { color: white; } .html_section:has(.why_us) .left_side .section_content .text { margin-top: 28px } /* --> HOME > WHY US > RIGHT SIDE [2] =========================================================================================================== */ .html_section:has(.why_us) .right_side { width: 100%; max-width: 800px; } .html_section:has(.why_us) .right_side .intro_text { padding-inline: 90px; } .html_section:has(.why_us) .right_side .items_wrapper { display: grid; gap: 45px 55px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .html_section:has(.why_us) .right_side .items_wrapper .item { display: grid; grid-template-areas: "image title" "image text"; gap: 4px 10px; align-content: flex-start; } .html_section:has(.why_us) .right_side .items_wrapper .item img { grid-area: image; } .html_section:has(.why_us) .right_side .items_wrapper .item .title { grid-area: title; color: white; font-weight: bold; font-size: 25px; line-height: normal; margin-bottom: 5px } .html_section:has(.why_us) .right_side .items_wrapper .item text { grid-area: text; } .html_section:has(.why_us) .right_side>a { margin-top: 45px; display: block; margin-left: 82px; font-weight: 500; } /* --> HOME > CATALOG IMAGE & TEXT [2] =========================================================================================================== */ .html_section:has(.catalog) .catalog { display: grid; grid-template-columns: 688px auto; width: 100%; max-width: 1432px; margin-inline: auto; gap: 66px; padding-block: 58px 20px; align-items: center } .html_section:has(.catalog) .catalog>div { flex: 0 0 auto; } .html_section:has(.catalog) .catalog .right_side { font-size: 18px; font-weight: 500; padding-block: 60px; } .html_section:has(.catalog) .catalog .right_side .section_content { margin-top: 15px; } .html_section:has(.catalog) .catalog .right_side .common_button { margin-top: 40px; } /* --> HOME > TWO BANNERS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .module_row_section.home_two_banners { width: 100%; max-width: var(--maxContainerWidth); margin-inline: auto; margin-top: 40px !important; } .module_row_section.home_two_banners .section_title { display: none !important; } .module_row_section.home_two_banners .columns-container { display: grid; grid-template-columns: 36.36% 62.42%; } .module_row_section.home_two_banners .columns-container>div>div { width: 100% !important; } .module_row_section.home_two_banners .columns-container .column-content-1 { aspect-ratio: 600/600; } .module_row_section.home_two_banners .columns-container .column-content-2 { aspect-ratio: 1030/600; } /* --> HOME > TEXT & BANNERS SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > TEXT & BANNERS SECTION > LAYOUT [2] =========================================================================================================== */ #common-home .text_and_banners_section { display: flex; /* align-items:center; */ width: 100vw; min-width: 100vw; margin-left: 50%; transform: translateX(-50%); display: flex; } #common-home .text_and_banners_section>div { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } /* --> HOME > TEXT & BANNERS SECTION > HTML [2] =========================================================================================================== */ .text_and_banners_section>div:not(.carousel) { position: relative; padding: 100px calc((100vw - var(--maxContainerWidth))/2) 100px calc((100vw - var(--maxContainerWidth))/2) !important; text-align: center; margin-top: 60px; width: 40% !important; } .text_and_banners_section>div:not(.carousel):before { content: ""; display: block; top: 0px; left: -50vw; display: block; width: 200vw; height: 100%; position: absolute; background: var(--accent_1); opacity: 0.13; } /* --> HOME > TEXT & BANNERS SECTION > HTML > TITLE [3] ------------------------------------------------------------- */ .text_and_banners_section>div:not(.carousel) H2 { color: #000000; font-size: 30px; line-height: normal; font-weight: bold; margin-bottom: 25px; } /* --> HOME > TEXT & BANNERS SECTION > HTML > TEXT [3] ------------------------------------------------------------- */ .text_and_banners_section>div:not(.carousel) p { font-size: 18px; line-height: normal; text-align: center; margin-bottom: 25px; } /* --> HOME > TEXT & BANNERS SECTION > HTML > IMAGE [3] ------------------------------------------------------------- */ .text_and_banners_section>div:not(.carousel) img { position: absolute; bottom: 0px; transform: translateY(calc(50% + 43px)) translateX(-50%); max-width: 80%; width: 100% !Important; left: 50%; } /* --> HOME > TEXT & BANNERS SECTION > BANNERS [2] =========================================================================================================== */ .text_and_banners_section>div.carousel { padding-right: calc((100vw - var(--maxContainerWidth))/2); width: 60% !important; } #common-home .home_banner_grid .swiper-slide>*, #common-home .home_banner_grid .swiper-slide img { width: 100%; } #common-home .home_banner_grid { margin-bottom: 4px !important; } #common-home .home_banner_grid .swiper-wrapper { margin: 0px; display: flex; flex-wrap: wrap; } #common-home .home_banner_grid .swiper-wrapper .swiper-slide { margin: 4px; box-sizing: border-box; width: calc(50% - 8px) !important; } /* --> HOME > TEXT & BANNERS SECTION > BANNERS > TEXTS [2] =========================================================================================================== */ /* --> HOME > TEXT & BANNERS SECTION > BANNERS > TEXTS > COMMON [3] ------------------------------------------------------------- */ .text_and_banners_section .carousel .swiper-slide .text_container * { color: white; } .text_and_banners_section .carousel .swiper-slide:before, .text_and_banners_section .carousel .swiper-slide:after, .text_and_banners_section .carousel .swiper-slide .text_container, .text_and_banners_section .carousel .swiper-slide .text_container>* { transition: all 0.4s; } .text_and_banners_section .carousel .text_container>* { z-index: 2; position: relative; } /* --> HOME > TEXT & BANNERS SECTION > BANNERS > TEXTS > CONTAINER [3] ------------------------------------------------------------- */ .text_and_banners_section .carousel .swiper-slide .text_container { position: absolute; z-index: 2; bottom: 0px; width: 100%; padding-bottom: 30px; } .text_and_banners_section .carousel .swiper-slide:before { content: ""; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 200px; /* background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.76) 100%); */ } .text_and_banners_section .carousel .swiper-slide:after { content: ""; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background-color: rgba(4, 4, 4, 0.45); opacity: 0; } /* --> HOME > TEXT & BANNERS SECTION > BANNERS > TEXTS > TITLE [3] ------------------------------------------------------------- */ .text_and_banners_section .carousel .swiper-slide .text_container .swiper-slide-title { font-size: 25px } /* --> HOME > TEXT & BANNERS SECTION > BANNERS > TEXTS > LINK [3] ------------------------------------------------------------- */ .text_and_banners_section .carousel .swiper-slide .text_container .swiper-slide-link { /* font-family: var(--font2); */ font-size: 13px; border-bottom: 1px solid transparent; border-bottom-color: transparent; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; line-height: 1; overflow: hidden; max-height: 0px; margin-top: 0px !important; opacity: 0; margin: 0px; padding: 0px; padding-bottom: 0px; margin: 0 auto; margin-top: 0px; padding-bottom: 2px; } /* --> HOME > TEXT & BANNERS SECTION > BANNERS > EFFECTS [2] =========================================================================================================== */ .text_and_banners_section .carousel .swiper-slide:hover:before { opacity: 0; } .text_and_banners_section .carousel .swiper-slide:hover:after { opacity: 1; } .text_and_banners_section .carousel .swiper-slide:hover .text_container .swiper-slide-link { border-bottom-color: white; margin-top: 30px !important; max-height: 17px; opacity: 1; } /* --> HOME > BANNER & TABS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> HOME > BANNER & TABS > BANNER [2] =========================================================================================================== */ .banner_and_tabs_section { display: flex; align-items: center; width: 100vw !important; justify-content: space-between; margin-top: 120px; } .banner_and_tabs_section>.swiper-viewport { width: 45% !important; } .banner_and_tabs_section>.swiper-viewport>.swiper-container { margin: 0px !important; } /* --> HOME > BANNER & TABS > TABS [2] =========================================================================================================== */ .banner_and_tabs_section>.module_product_tabs { width: 970px !important; transform: translateX(calc((var(--maxContainerWidth) - 100vw)/2)) !important; position: relative; z-index: 1; margin-top: 0px !important; } /* --> HOME > LATEST BLOGS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CATEGORY PAGE VVV VVV VVV VVV VVV VVV VVV */ /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION PRODUCT PARTIALS VVV VVV VVV VVV VVV VVV VVV */ /* --> PRODUCT PARTIALS > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb { /* border: 1px solid transparent; */ transition: all .25s; transform-origin: center top; position: relative; } .product-thumb>* { text-align: left; line-height: 1.2; } .product-thumb { padding-bottom: 20px; } .product-thumb>.caption { padding-top: 9px; } .product-thumb>*:not(.image) { padding-inline: 20px 20px; } .product-thumb .image a { padding: 45px 10px 10px; } /* --> PRODUCT PARTIALS > HOVER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* .product-thumb:hover { border-color: #f0f0f0; transform: translateY(-10px); box-shadow: 0 8px 10px -4px rgba(0, 0, 0, 0.15); } */ .product-thumb:hover { /* border-color: #ccc; */ /* transform: translateY(-10px); */ box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.15); } /* --> PRODUCT PARTIALS > DARK OVERLAY [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .image a, #product-product .thumbnail { position: relative; } .product-thumb .image a:before, #product-product .thumbnail:before { content: ""; width: 100%; height: 100%; position: absolute; background: rgba(0, 0, 0, .02); top: 0px; left: 0px; z-index: 2 } /* --> PRODUCT PARTIALS > EXTRA IMAGES ON HOVER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .image { position: relative; background: white !important; } .product-thumb .image a { position: relative; } .product-thumb .main-img, .product-thumb .hover-img { transition: all .3s; } .product-thumb .main-img { display: block; width: 100%; height: 100%; z-index: 1; } .product-thumb .hover-img { position: absolute; top: unset; left: 0; opacity: 0 !important; width: 100%; height: auto; z-index: 1; transform: scale(.9); bottom: 0px; } .product-thumb:hover .hover-img { opacity: 1 !important; transform: none; } /* --> PRODUCT PARTIALS > LABELS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* .product-thumb>.labels_container { display: none !important } */ .labels_container { display: flex; align-items: flex-end; padding: 5px; height: 35px; position: absolute; bottom: 10px; left: 10px; z-index: 2; } /* --> PRODUCT PARTIALS > LABELS > COMMON [2] =========================================================================================================== */ .labels_container>div { color: #FFFFFF; font-size: 13px; line-height: normal; padding: 0px 10px; font-weight: normal; text-align: center; white-space: nowrap; height: 25px; display: flex; align-items: center; justify-content: center; } /* --> PRODUCT PARTIALS > LABELS > NEW [2] =========================================================================================================== */ .labels_container>div.label_new { background: #003E68; } /* --> PRODUCT PARTIALS > LABELS > BESTSELLER [2] =========================================================================================================== */ .labels_container>div.label_bestseller { background: #101010; } /* --> PRODUCT PARTIALS > LABELS > SALE [2] =========================================================================================================== */ .labels_container>div.label_sale { background: #0561D1; } .labels_container>div.label_sale { font-size: 17px; font-weight: bold } .labels_container>div.label_sale .percent { font-weight: normal; font-size: 13px } /* --> PRODUCT PARTIALS > CATEGORY [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .product-category { color: #767676; margin-top: 5px; } /* --> PRODUCT PARTIALS > MANUFACTURER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .caption>.manufacturer { display: none; } /* --> PRODUCT PARTIALS > TITLE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb h4 { margin: 0px; margin-top: 10px; } .product-thumb h4 a { font-size: 16px; font-weight: normal; color: black; /* text-transform: uppercase; */ line-height: 20px; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; /* Adjust based on your line height to approximate 50px */ -webkit-box-orient: vertical; overflow: hidden; height: 45px; } /* --> PRODUCT PARTIALS > DESCRIPTION (DISABLED) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .caption>.product_description { color: #414141; font-size: 14px; font-weight: 400; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; /* Adjust based on your line height to approximate 50px */ -webkit-box-orient: vertical; overflow: hidden; height: 45px; display: none; } /* --> PRODUCT PARTIALS > MODEL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .caption>.model_section { display: flex; margin-top: 40px; gap: 4px } .product-thumb .caption>.model_section>div { font-size: 14px; color: #767676 } /* --> PRODUCT PARTIALS > AVAILABILITY [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .availability_section { margin-top: 8px; } .product-thumb .availability_section>div { font-size: 13px; text-transform: uppercase; font-weight: normal; } .product-thumb .availability_section.availability_id_7>div { color: #5BAE2F } /* --> PRODUCT PARTIALS > PRICE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .price-cont { margin-top: 10px } .product-thumb .price-cont { font-size: 17px; color: #000000; /* line-height: 1.2; */ margin-top: 25px !important; } .product-thumb .price-cont .price span { font-weight: normal !important; } .product-thumb .price-cont .price-tax { display: none; } .product-thumb .price-cont p { margin-bottom: 0px !important; } .product-thumb.ask_for_price .price-cont { visibility: hidden; } .product-thumb .price-cont .price-old { text-decoration: line-through !important; color: #959595; font-size: 12px; font-weight: normal; margin-left: 8px } /* --> PRODUCT PARTIALS > BUTTONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-thumb .button-group { height: fit-content !important; max-height: unset !important; } /* --> PRODUCT PARTIALS > BUTTONS > CART [2] =========================================================================================================== */ .product-thumb .cart_button, .product-thumb .cart_options_button, .product-thumb .interested { margin-top: 20px !important; width: 100% !important; background: #fff !important; border-radius: 8px !important; height: 50px !important; min-height: 50px !important; color: #434343 !important; transition: all .25s !important; display: flex !important; font-size: 14px; padding: 0px !important; /* display: flex !important; */ justify-content: center; align-items: center; font-weight: normal; text-transform: uppercase; /* border: none; */ border: 1px solid #e6e6e6; } .product-thumb .cart_button:hover, .product-thumb .cart_options_button:hover, .product-thumb .interested:hover { background: var(--accent_3) !important; color: white !important; } .product-thumb .cart_button { margin-top: 0px !important; } .product-thumb .interested { transition: all .25s; opacity: 0; visibility: hidden; } .product-thumb:hover .interested { opacity: 1; visibility: visible; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CATEGORY-LIKE VVV VVV VVV VVV VVV VVV VVV */ /* --> CATEGORY-LIKE > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-category, #product-manufacturer, #produt-search { width: 100%; } #product-category>.row>#column-left, #product-manufacturer>.row>#column-left, #produt-search>.row>#column-left { width: 354px !important; } .product-category body, .product-search body, .product-manufacturer body { overflow: visible } /* --> CATEGORY-LIKE > INTRO SECTION > COLUMN LEFT [2] =========================================================================================================== */ #column-left { padding-inline: 0px !important } #product-category #column-left #column-left, #product-manufacturer #column-left #column-left, #product-search #column-left #column-left { width: 100%; padding: 0; margin-top: 45px; position: sticky; top: 135px; } #product-manufacturer #column-left #column-left, #product-search #column-left #column-left { margin-top: 0px !important; } /* --> CATEGORY-LIKE > INTRO SECTION > FOOTER [2] =========================================================================================================== */ body:has(#product-category) footer, body:has(#product-manufacturer) footer, body:has(#product-search) footer { margin-top: 80px !important; } /* --> CATEGORY-LIKE > BREADCRUMB [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-category .breadcrumb { margin-bottom: 58px !important; } /* --> CATEGORY-LIKE > BOTTOM PAGINATION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-category .pagination_container.at_bottom, #product-manufacturer .pagination_container.at_bottom, #product-search .pagination_container.at_bottom { margin-top: 45px !important; width: fit-content; margin-inline: auto; } /* --> CATEGORY-LIKE > INTRO SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> CATEGORY-LIKE > INTRO SECTION > DESCRIPTION [2] =========================================================================================================== */ #product-category .description_section, #product-manufacturer .description_section, #product-search .description_section { line-height: 1.8; } @media(min-width: 769px) { #product-category .description_section, #product-manufacturer .description_section, #product-search .description_section { height: 150px; overflow: auto; margin-bottom: 0px; margin-bottom: 25px; } #product-category .description_section, #product-manufacturer .description_section, #product-search .description_section, #product-category .description_section *, #product-manufacturer .description_section *, #produt-search .description_section * { color: black !important; } } .description_section::-webkit-scrollbar { width: 7px; height: 7px; } .description_section::-webkit-scrollbar-thumb { background: #bbb; border-radius: 10px; } .description_section::-webkit-scrollbar-track { background: transparent; } .description_section { scrollbar-width: thin; scrollbar-color: #bbb transparent; } #column-left .description_section { visibility: hidden; } /* --> CATEGORY-LIKE > INTRO SECTION > BACKGROUND [2] =========================================================================================================== */ .category_intro_section { height: 380px; margin-bottom: -380px; width: 100vw; margin-left: 50%; transform: translateX(-50%); position: relative; } @media(min-width: 1271px) { .category_intro_section { background: #e1e7f0 !important; } } /* --> CATEGORY-LIKE > INTRO SECTION > PAGINATION [2] =========================================================================================================== */ #product-category .sorting_bar .pagination_container .pagination>li>a:hover { background: var(--accent_2) !important; color: white !important; } #product-category .sorting_bar .pagination_container .pagination>li.active>span { background: var(--accent_3) !important; font-weight: bold } /* --> CATEGORY-LIKE > INTRO SECTION > CATEGORY PAGE EXCEPTIONS [2] =========================================================================================================== */ /* @media(min-width: 769px) { #product-category .breadcrumb *, #product-category .description_section *, #product-category .sorting_bar .form-group label, #product-category .sorting_bar .form-group select, #product-category .sorting_bar .pagination_container .pagination>li>a { color: white !important; } } */ /* --> CATEGORY-LIKE > SORTING BAR [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-category .sorting_bar .form-group select option { color: black !important; } /* --> CATEGORY-LIKE > SORTING BAR > LAYOUT [2] =========================================================================================================== */ .sorting_bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; } .sorting_bar>div { float: none; width: fit-content; padding-inline: 0px; } body:has(#product-category, #product-manufacturer, #produt-search) { overflow: visible; } #column-left #column-left { position: sticky; top: 10px; margin-top: 10px; } /* --> CATEGORY-LIKE > SORTING BAR > LIMITS [2] =========================================================================================================== */ .sorting_bar .form-group { margin-bottom: 0px; } .sorting_bar .form-group label { background: unset; text-transform: uppercase; font-weight: 400; color: #000; border: unset; height: 30px; font-size: 15px; padding-left: 0px; } .sorting_bar .form-group select { font-size: 14px; padding-inline: 15px !important; /* max-width: 195px !important; */ background: transparent !important; width: fit-content !important; } /* --> CATEGORY-LIKE PAGINATION [2] =========================================================================================================== */ .sorting_bar .pagination_container { margin-left: unset !important; } /* --> CATEGORY-LIKE > FILTERS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-category .mfilter-box .box-heading, #product-manufacturer .mfilter-box .box-heading, #product-search .mfilter-box .box-heading { font-size: 20px; line-height: 1.2; font-weight: 400; margin-bottom: 20px; color: black !important; letter-spacing: normal !important; } /* --> CATEGORY-LIKE > PRODUCT LIST [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-list-grid { margin-top: 30px; } .product-list-grid .product-layout { width: 100%; padding: 0px; } .product-list-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-column-gap: 30px !important; grid-row-gap: 30px !important; } #product-category>.row, #product-manufacturer>.row, #product-search>.row { display: flex; gap: 68px; } .row.product-list-grid::before, .row.product-list-grid::after { display: none !important; } @media(max-width: 1024px) { #product-category .row.product-list-grid, #product-manufacturer .row.product-list-grid, #product-search .row.product-list-grid { grid-template-columns: 1fr 1fr; } } @media(max-width: 355px) { #product-category .row.product-list-grid, #product-manufacturer .row.product-list-grid, #product-search .row.product-list-grid { grid-template-columns: 100%; } } /* --> CATEGORY-LIKE > LEFT SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> CATEGORY-LIKE > LEFT SECTION > FILTERS CONTAINER [2] =========================================================================================================== */ @media(min-width:768px) and (max-width: 1024px) { .scroll-wrapper>.scroll-content { max-height: 180px !important; } } /* --> CATEGORY-LIKE > LEFT SECTION > FILTERS RESET BUTTON [2] =========================================================================================================== */ .mfilter-button .mfilter-button-reset { display: none; } /* .mfilter-button .mfilter-button-reset { border: solid 1px black; border-radius: 4px; padding: 5px; color: black; font-size: 15px; margin-bottom: 10px; text-decoration: none !important; } .mfilter-button .mfilter-button-reset:hover { background: black; color: white; transition: all 0.5s; } .mfilter-button.mfilter-button-top i { margin-right: 7px; } */ /* --> CATEGORY-LIKE > LEFT SECTION > SECTION ITEMS [2] =========================================================================================================== */ .mfilter-content>ul { display: flex; margin-top: 0px; flex-direction: column; gap: 10px } .mfilter-content>ul>li { margin-top: 0px; margin-bottom: 0px !important; } /* --> CATEGORY-LIKE > LEFT SECTION > SECTION ITEMS > SCROLL [3] ------------------------------------------------------------- */ .mfilter-iscroll>.scroll-element, .mfilter-iscroll>.scroll-element div { z-index: 1 !important; } .mfilter-iscroll>.scroll-element .scroll-element_track { background: #ccc !important; } .mfilter-iscroll>.scroll-element .iScrollIndicator { background: var(--accent2) !important; opacity: 1 !important; } /* --> CATEGORY-LIKE > LEFT SECTION > SECTION TITLES [2] =========================================================================================================== */ .mfilter-heading { background: none; border: none !important; } .mfilter-heading-text span { font-size: 15px; font-weight: 400; text-transform: none !important; } .mfilter-heading-content { padding: 7px 8px 0px 8px !important; border-bottom: 1px solid #d8d8d8; } /* --> CATEGORY-LIKE > LEFT SECTION > SECTION TITLES > COLLAPSE ICONS [3] ------------------------------------------------------------- */ .mfilter-heading .mfilter-head-icon { background: none !important; transform: none !important; width: auto !important; height: auto !important; margin: 0px !important; transition: none !important; transform-origin: center center !important; } .mfilter-heading .mfilter-head-icon { transform: scaleX(1.7) !important; } .mfilter-heading .mfilter-head-icon::after { content: "-"; font-style: normal !important; font-size: 23px; font-weight: bold; color: #999; } .mfilter-heading.mfilter-collapsed .mfilter-head-icon { transform: none !important; } .mfilter-heading.mfilter-collapsed .mfilter-head-icon::after { content: "+"; } /* --> CATEGORY-LIKE > LEFT SECTION > SECTION CONTENT [2] =========================================================================================================== */ .mfilter-opts-container { border: none !important; padding-top: 12px } .mfilter-tb-as-td.mfilter-col-input { padding: 0px !important; } .mfilter-tb-as-td { border: none !important; } .mfilter-col-input+.mfilter-tb-as-td { border: none !important; font-size: 14px; padding: 3px 0px 3px 10px !important } /* @media(min-width:768px) and (max-width: 1024px) { .mfilter-col-input+.mfilter-tb-as-td { font-size: 18px; } } */ .mfilter-category-tree ul li a { font-size: 16px !important; color: black !important; } /* --> CATEGORY-LIKE > LEFT SECTION > SECTION CONTENT > SCROLLBARS */ .scroll-wrapper.mfilter-scroll-standard::-webkit-scrollbar { width: 7px; height: 7px; } .scroll-wrapper.mfilter-scroll-standard::-webkit-scrollbar-thumb { background: #bbb; border-radius: 10px; } .scroll-wrapper.mfilter-scroll-standard::-webkit-scrollbar-track { background: transparent; } /* For Firefox */ .scroll-wrapper.mfilter-scroll-standard { scrollbar-width: thin; scrollbar-color: #bbb transparent; } /* --> CATEGORY-LIKE > LEFT SECTION > SECTION CONTENT > PRICE [3] ------------------------------------------------------------- */ .mfilter-price-inputs { margin-top: 20px; } .mfilter-price-inputs .separator { width: 15px; display: inline-block; } .mfilter-price-inputs>input { width: 35px !important; height: 35px !important; font-size: 15px !important; font-weight: 400; color: black; border: 1px solid #979797 !important; border-radius: 0px !important; box-shadow: none !important; min-width: 35px !important; padding: 0px; text-align: center; margin: 0px 5px !important; } .mfilter-price-slider { margin-top: 25px; background: none !important; } .mfilter-slider-slider, #mfilter-price-slider { margin: 0 !important; display: block; position: relative; background: #f4f4f4 !important; margin-left: 5px !important; border-radius: 10px !important; } .mfilter-slider-slider, #mfilter-price-slider { height: 15px !important; } .mfilter-slider-slider .ui-slider-handle, #mfilter-price-slider .ui-slider-handle { margin-top: 1px; border-radius: 100% !Important; box-shadow: none !Important; background: none !important; background: var(--accent_3) !important; width: 23px !important; height: 23px !important; } .mfilter-box-83 .mfilter-slider-slider .ui-slider-range, .mfilter-box-83 #mfilter-price-slider .ui-slider-range { background: #e1e7f0 !important; } .mfilter-price-inputs label { display: inline !important; position: relative; overflow: visible; font-size: 0px; } .mfilter-price-inputs>label:first-of-type:after { content: "Από"; font-size: 15px; } html[lang*="en"] .mfilter-price-inputs>label:first-of-type:after { content: "From"; } .mfilter-price-inputs>label:last-of-type { margin-left: 5px; } .mfilter-price-inputs>label:last-of-type:after { content: "Έως"; font-size: 15px; } html[lang*="en"] .mfilter-price-inputs>label:last-of-type:after { content: "To"; } /* --> CATEGORY-LIKE > FITLERS > CHECKBOXES [2] =========================================================================================================== */ /* --> CATEGORY-LIKE > FILTERS > DROPDOWNS > RADIOS/CHECKBOXES [3] ------------------------------------------------------------- */ /* .mfilter-option:not(.mfilter-price) .mfilter-col-input>input[type="radio"], .mfilter-option:not(.mfilter-price) .mfilter-col-input>input[type="checkbox"] { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; line-height: 1 !important; margin-left: 0px !important; outline: none; } .mfilter-tb-as-td { font-size: 0px; } .mfilter-option:not(.mfilter-price) .mfilter-col-input>input[type="radio"]::before, .mfilter-option:not(.mfilter-price) .mfilter-col-input>input[type="checkbox"]::before { content: ""; width: 18px; height: 18px; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EE78737F1-08BC-48B9-BCFA-75C6A6810B7E%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='PRODUCT-LIST-_-FILTERS-OPEN' transform='translate(-987.000000, -787.000000)' fill='%23FFFFFF' stroke='%23CDCDCD'%3E%3Cg id='Group-13' transform='translate(0.000000, 460.000000)'%3E%3Cg id='Group-4' transform='translate(987.000000, 168.000000)'%3E%3Cg id='Group-8' transform='translate(0.000000, 39.000000)'%3E%3Cg id='Rectangle' transform='translate(0.000000, 120.000000)'%3E%3Crect x='0.5' y='0.5' width='17' height='17' rx='2'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .mfilter-option:not(.mfilter-price) .mfilter-col-input>input[type="radio"]:checked::before, .mfilter-option:not(.mfilter-price) .mfilter-col-input>input[type="checkbox"]:checked::before { background-size: 100%; background-image: url("data:image/svg+xml,%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EELEMENT/RADIO BUTTON/BOOKS Copy 30%3C/title%3E%3Cg id='PAGES' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='PRODUCT-LIST-' transform='translate(-24.000000, -982.000000)'%3E%3Cg id='tick-2' transform='translate(24.000000, 982.000000)'%3E%3Crect id='Rectangle' fill='%23F50000' x='0' y='0' width='18' height='18' rx='2'/%3E%3Cpath d='M6.07139037,13.507445 L3.66497326,10.9354276 C3.08743316,10.2429614 3.08743316,9.15480021 3.66497326,8.46233398 L3.66497326,8.46233398 C4.14625668,7.8687915 5.10882353,7.76986776 5.68636364,8.36341024 C5.78262032,8.36341024 5.78262032,8.46233398 5.78262032,8.46233398 L7.03395722,9.94619018 L12.1355615,4.50538413 C12.7131016,3.91184165 13.6756684,3.91184165 14.2532086,4.50538413 C14.2532086,4.50538413 14.2532086,4.50538413 14.2532086,4.50538413 L14.2532086,4.50538413 C14.8307487,5.09892661 14.8307487,6.08816407 14.2532086,6.68170655 L7.70775401,13.507445 C7.32272727,14.0020638 6.5526738,14.0020638 6.07139037,13.507445 C6.07139037,13.507445 6.07139037,13.507445 6.07139037,13.507445' id='Path' fill='%23FFFFFF' fill-rule='nonzero'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } */ /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION TOP-LEVEL CATEGORY PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> TOP-LEVEL CATEGORY PAGE > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ body:has(.top_level_category):has(.has_subcategories) { background: var(--accent_1); color: white; } #product-category.top_level_category.has_subcategories { padding-top: 60px } /* INTRO SECTION */ /* --> TOP-LEVEL CATEGORY PAGE > INTRO SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .top_category_intro_section { max-width: 1230px; margin-inline: auto; } .top_category_intro_section>div { width: fit-content; margin-inline: auto; text-align: center; color: white !important; } .top_category_intro_section .description_text { margin-top: 10px; line-height: 27px; font-size: 15px; } /* --> CHILDREN CATEGORIES SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .top_category_children_section { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 50px 35px } .top_category_children_section .child_category_item img { width: 100%; background: #eee } .top_category_children_section .child_category_item .image_wrapper { overflow: hidden; } .top_category_children_section .child_category_item .image_wrapper img { transition: all .2s; } .top_category_children_section .child_category_item:hover .image_wrapper img { transform: scale(1.07); } .top_category_children_section .child_category_item div { font-size: 19px; font-family: var(--font_2); font-weight: 30; text-align: center; margin-top: 18px; line-height: normal; text-transform: uppercase; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION SEARCH PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> SEARCH PAGE > SORTING BAR [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-search .sorting_bar { padding-top: 25px !important; } /* --> SEARCH PAGE > SEARCH FIELDS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-search #content_search { margin-bottom: 25px !important; } #product-search #content_search>h1 { padding-bottom: 5px !important; color: #000000; font-size: 35px; font-weight: 400; position: relative; margin-bottom: 0px; } #product-search #content_search>div.row { align-items: center; display: flex; gap: 20px 0px; margin-left: -20px; } #product-search #content_search #input-search, #product-search #content_search select[name="category_id"] { height: 50px !important; border-radius: 0px !important; box-shadow: none !important; } #product-search #content_search #button-search-altered { /* background: var(--accent1) !important; */ /* color: white !important; */ /* border: none !important; */ /* font-size: 16px; */ /* font-weight: bold; */ /* text-transform: uppercase; */ /* border-radius: 0px; */ height: 50px; /* margin-top: 10px !important; */ /* padding-left: 35px; */ /* padding-right: 35px; */ margin-top: 35px !important; background: white !important; color: black !important; border: 1px solid black !important; transition: all 0.2s; } #product-search #content_search #button-search-altered:hover { background: black !important; color: white !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION PRODUCT PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> PRODUCT PAGE > STICKY REQUEST BUTTONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > STICKY REQUEST BUTTONS > DESKTOP [2] =========================================================================================================== */ header~.request_buttons { position: fixed; right: 0px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; top: 400px; z-index: 2 } header~.request_buttons>* { display: flex; text-align: center; justify-content: center; align-items: center; width: 181px; height: 58px; color: white !important; border-radius: 8px 0px 0px 8px; font-size: 15px; line-height: 20px; font-weight: 500; cursor: pointer; display: flex; flex-direction: column; } header~.request_buttons>.ask_for_call_button { background: var(--accent_2); transition: transform 0.3s, background 0.2s; } header~.request_buttons>.ask_for_price_button { background: var(--accent_3); transition: transform 0.3s 0.2s, background 0.2s; } header~.request_buttons>*:hover { background: var(--accent_1); } html.retract_request_buttons header~.request_buttons>* { transform: translateX(100%); } /* --> PRODUCT PAGE > STICKY REQUEST BUTTONS > MOBILE [2] =========================================================================================================== */ #product .request_buttons_mobile { display: flex; width: 100%; gap: 20px; margin-top: 18px; } #product .request_buttons_mobile>* { display: flex; text-align: center; justify-content: center; align-items: center; height: 50px; color: white !important; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; flex: 1 1 100%; line-height: normal; padding-inline: 15px; } #product .request_buttons_mobile>.ask_for_call_button { background: var(--accent_2); transition: transform 0.3s, background 0.2s; } #product .request_buttons_mobile>.ask_for_call_button>span:first-child { margin-right: 6px } #product .request_buttons_mobile>.ask_for_price_button { background: var(--accent_3); transition: transform 0.3s 0.2s, background 0.2s; } #product .request_buttons_mobile>*:hover { background: var(--accent_1); } /* --> PRODUCT PAGE > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-product #content { margin-top: 20px !important; display: flex; flex-direction: column; } #product-product #content>.row.default_infos { display: flex; flex-direction: row; /* gap: 54px; */ } #product-product #content>.row>div { padding: 0px; float: none !important; } .product-product body { overflow-x: hidden !important } /* --> PRODUCT PAGE > LAYOUT > TOP LEFT SECTION [2] =========================================================================================================== */ #product-product .thumbnails { display: flex; gap: 65px; flex-direction: row-reverse; margin-left: 0px !important; align-items: center; } #product-product .thumbnail { border-color: transparent !important; border-radius: 0px !important; padding: 0px; -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; -ms-border-radius: 0px !important; -o-border-radius: 0px !important; } /* --> PRODUCT PAGE > LAYOUT > TOP LEFT SECTION > MAIN IMAGE CONTAINER [3] ------------------------------------------------------------- */ #product-product .main_image_container { position: relative; width: 100%; } #product-product .main_image_container a { padding: 65px 10px 10px; } /* --> PRODUCT PAGE > LAYOUT > TOP LEFT SECTION > ADDITIONAL IMAGES CONTAINER [3] ------------------------------------------------------------- */ #product-product .thumbnails, #product-product #content>.row>div.left_section { overflow: hidden; } /* @media(min-width: 769px) { .additional_images_container .swiper-wrapper { flex-direction: column !important; gap: 25px } .additional_images_container .swiper-wrapper .swiper-slide { flex-shrink: 1 !important; } } */ #product-product .additional_images_container { display: flex; flex-direction: column; gap: 30px; width: 150px; min-width: 150px; } #product-product .additional_images_container .swiper-slide { height: fit-content !important; } #product-product .additional_images_container .thumbnail { margin: 0px; } #product-product .additional_images_container .thumbnail:hover { border-color: black !important; } /* --> PRODUCT PAGE > LAYOUT > TOP LEFT SECTION > ADDITIONAL IMAGES CONTAINER > NAVIGATION */ .additional-images-swiper .additional-images-pagination { display: none !important; } .additional_images_container .swiper-button-prev { position: absolute; top: unset; bottom: calc(100% + 20px); left: 50%; transform: translateX(-50%) rotate(-90deg); height: fit-content; margin: 0px !important; } .additional_images_container .swiper-button-next { position: absolute; bottom: unset; top: calc(100% + 20px); left: 50%; transform: translateX(-50%) rotate(90deg); height: fit-content; margin: 0px !important; } .additional_images_container .swiper-button-prev::before { content: "" !important; background: url("/image/catalog/cut_assets/generic/icons/chevron_right.svg"); background-size: contain; width: 22px !important; height: 22px !important; font-family: unset; display: block !important; background-repeat: no-repeat; } .additional_images_container .swiper-button-next::before { content: "" !important; background: url("/image/catalog/cut_assets/generic/icons/chevron_right.svg"); background-size: contain; width: 22px !important; height: 22px !important; font-family: unset; display: block !important; background-repeat: no-repeat; } /* --> PRODUCT PAGE > LAYOUT > TOP RIGHT SECTION [2] =========================================================================================================== */ /* --> PRODUCT PAGE > TOP RIGHT SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-product .right_section { /* padding-right: 120px !important; */ padding-left: 80px !important; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > BRAND [2] =========================================================================================================== */ #product-product .manufacturer-section { margin-bottom: 10px } /* --> PRODUCT PAGE > TOP RIGHT SECTION > BRAND > LOGO [3] ------------------------------------------------------------- */ #product-product .manufacturer-section .manufacturer-logo { /* border: 1px solid #ddd; */ } #product-product .manufacturer-section img.manufacturer-logo { max-width: 157px; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > BRAND > TEXT [3] ------------------------------------------------------------- */ #product-product .manufacturer-section>span { font-size: 16px !important; } #product-product .manufacturer-section>span>a { font-weight: bold; font-size: 16px; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > TITLES [2] =========================================================================================================== */ #product-product .right_section .titles_wrapper { border-bottom: 1px solid #d8d8d8; margin-top: 17px; display: block; padding-bottom: 13px } /* --> PRODUCT PAGE > TOP RIGHT SECTION > TITLES > MAIN TITLE [3] ------------------------------------------------------------- */ #product-product .right_section .titles_wrapper h1.section_title { margin: 0px; /* text-transform: uppercase; */ font-size: 35px } /* --> PRODUCT PAGE > TOP RIGHT SECTION > TITLES > MAIN SUBTITLE [3] ------------------------------------------------------------- */ #product-product .right_section .titles_wrapper .product_subtitle { font-size: 16px; font-weight: 400; margin-top: 8px; margin-block: 20px 10px; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > AVAILABILITY/STOCK AND MODEL [2] =========================================================================================================== */ .stock_and_model_wrapper { display: flex; align-items: center; justify-content: space-between !important; padding-inline: 20px; margin-top: 25px; } .stock_and_model_wrapper .availability_section div { font-size: 13px; font-weight: 500; text-transform: uppercase; } .stock_and_model_wrapper .availability_section.availability_id_7 div { color: #5BAE2F } #product-product .right_section .product_model { display: flex; gap: 8px; } #product-product .right_section .product_model>span { font-family: var(--font_2); font-size: 16px; } #product-product .right_section .product_model>span:last-child { font-weight: bold; color: black; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > CATEGORY [2] =========================================================================================================== */ .main-product-category { font-size: 16px !important; font-family: var(--font_2); } .main-product-category span { font-weight: bold; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > STORE AVAILABILITY AND PRICE [2] =========================================================================================================== */ .store_availability_and_price_wrapper { display: flex; justify-content: space-between; margin-top: 45px; gap: 28px } .product_page_store_availability { width: 100%; border-radius: 10px; overflow: hidden !important; border: 1px solid #d9d9d9; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > STORE AVAILABILITY AND PRICE > STORE AVAILABILITY [3] ------------------------------------------------------------- */ .product_page_store_availability select { height: 50px; width: 100%; border: none !important; background: white; padding-inline: 22px; font-size: 14px; color: #2E2B2B; box-shadow: none; outline: none !important; box-shadow: none !important; font-weight: 500; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > STORE AVAILABILITY AND PRICE > PRICE [3] ------------------------------------------------------------- */ #product-product .right_section .price_section { background: #EBEBEB; display: flex; align-items: baseline; padding: 11.5px 23px; border-radius: 10px; justify-content: space-between; min-width: 330px; } #product-product .right_section .price_section .old_price_value { text-decoration: line-through !important; } #product-product .right_section .price_section>div { display: flex; gap: 12px; align-items: baseline; } #product-product .right_section .price_section .price_label { font-size: 15px; font-weight: 500; line-height: 1; height: fit-content; } #product-product .right_section .price_section .price_value { font-size: 25px; font-weight: 900; line-height: 1; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > STEPPER AND CART BUTTON [2] =========================================================================================================== */ #product-product .right_section .stepper_n_cart { display: flex; justify-content: space-between; margin-top: 40px; margin-bottom: 0px } /* --> PRODUCT PAGE > TOP RIGHT SECTION > STEPPER AND CART BUTTON > STEPPER [3] ------------------------------------------------------------- */ #product .stepper_section { display: flex; align-items: center; } #product .stepper_section .stepper_buttons { display: flex; align-items: center; } #product #input-quantity { height: 45px; width: 45px; min-width: 45px; font-size: 18px; font-weight: bold; color: black; border: 1px solid rgba(0, 0, 0, 0.24); box-shadow: none !important; border-radius: 0px !important; text-align: center !important; padding: 0px; pointer-events: none; -moz-appearance: textfield; border-radius: 8px !important; } #product #input-quantity::-webkit-outer-spin-button, #product #input-quantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #product button.ctm-stepper { width: 45px; height: 45px; border-radius: 0px; border: none !important; box-shadow: none !important; overflow: hidden; background: none; } #product button.ctm-stepper::before { font-size: 25px; font-weight: bold; display: block; background: none !important; } #product button.ctm-stepper:first-of-type:before { content: "-"; transforM: scaleX(1.5); } #product button.ctm-stepper:last-of-type:before { content: "+" } #product-product .right_section .stepper_n_cart .stepper_section { margin-inline: auto; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > STEPPER AND CART BUTTON > BUTTON [3] ------------------------------------------------------------- */ #product-product .right_section .stepper_n_cart #button-cart, #product-product .right_section #enquiry_button { width: 100% !important; max-width: 330px !important; text-transform: uppercase; font-family: var(--font_2); } /* --> PRODUCT PAGE > TOP RIGHT SECTION > ENQUIRY BUTTON [2] =========================================================================================================== */ #enquiry_button:before { filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); } /* --> PRODUCT PAGE > TOP RIGHT SECTION > PRODUCT DESCRIPTION [2] =========================================================================================================== */ #product-product .right_section .description_section { margin-top: 40px; } #product-product .right_section .description_section, #product-product .right_section .description_section * { font-size: 16px; font-weight: 400 !important; } #product-product .right_section .description_section p { margin-bottom: 0px !important; } #product-product .right_section .description_section strong, #product-product .right_section .description_section b { font-weight: bold !important; } /* --> PRODUCT PAGE > TOP RIGHT SECTION > PRODUCT DESCRIPTION > UL [3] ------------------------------------------------------------- */ #product-product .right_section .description_section ul { margin-bottom: 0px; } #product-product .right_section .description_section ul br { display: none !important; } /* --> PRODUCT PAGE > ROW :TEXT & BANNER (DISABLED + PRODUCT_FORM.TWIG) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > ROW: TEXT & BANNER > LAYOUT [2] =========================================================================================================== */ #product-product #content>.row.text_n_banner { display: flex; margin-top: 73px; align-items: center; display: none !important; } #product-product #content>.row.text_n_banner>div { min-width: 50%; } /* --> PRODUCT PAGE > ROW: TEXT & BANNER > LEFT SIDE [2] =========================================================================================================== */ #product-product #content>.row.text_n_banner .left_side { padding-right: 35px } /* --> PRODUCT PAGE > ROW: TEXT & BANNER > LEFT SIDE > TITLE [3] ------------------------------------------------------------- */ #product-product #content>.row.text_n_banner .left_side .title { /* font-size: 45px; font-weight: 900; line-height: 53px; color: var(--accent_2); width: 400px; */ } /* --> PRODUCT PAGE > ROW: TEXT & BANNER > LEFT SIDE > TEXT [3] ------------------------------------------------------------- */ #product-product #content>.row.text_n_banner .left_side .text { font-size: 16px; font-weight: 400; margin-top: 20px; } #product-product #content>.row.text_n_banner .left_side .text p { font-weight: 400; } /* --> PRODUCT PAGE > ROW: TEXT & BANNER > RIGHT SIDE [2] =========================================================================================================== */ #product-product #content>.row.text_n_banner .right_side { min-width: calc(50% + var(--calculatedPadding)); display: flex; justify-content: center; } /* --> PRODUCT PAGE > ROW: SWIPER & MODAL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > ROW: SWIPER & MODAL > LAYOUT [2] =========================================================================================================== */ .image_swiper_container { margin-top: 20px; min-width: calc(100% + var(--calculatedPadding)); } /* --> PRODUCT PAGE > ROW: SWIPER & MODAL > SWIPER [2] =========================================================================================================== */ .product_page_image_swiper { width: 100%; height: fit-content; overflow: hidden; /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */ } .product_page_image_swiper .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; /* padding: 5px; */ } .product_page_image_swiper .swiper-slide img { display: block; width: 100%; height: auto; /* object-fit: contain; cursor: pointer; */ transition: transform 0.3s ease; } /* --> PRODUCT PAGE > ROW: SWIPER & MODAL > SWIPER > HOVER EFFECTS [3] ------------------------------------------------------------- */ .product_page_image_swiper .swiper-slide { position: relative; background: black; } .product_page_image_swiper .swiper-slide img, .product_page_image_swiper .swiper-slide:after { transition: all .3s !important; } .product_page_image_swiper .swiper-slide:after { content: ""; background-image: url("/image/catalog/desikos-b2c/cut_assets/pr page/Group 20.svg"); background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background-size: 100%; visibility: hidden; opacity: 0; } .product_page_image_swiper .swiper-slide:hover img { opacity: .41; } .product_page_image_swiper .swiper-slide:hover:after { visibility: visible; opacity: 1; } /* --> PRODUCT PAGE > ROW: SWIPER & MODAL > MODAL [2] =========================================================================================================== */ .product_page_image_modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); animation: fadeIn 0.3s ease; -webkit-animation: fadeIn 0.3s ease; } #product_page_image_modal #modalImage { max-width: 100% !important; } .product_page_image_modal.show { display: flex !important; justify-content: center; align-items: center; } .product_page_image_modal .modal-content { max-width: 90%; max-height: 90%; animation: zoomIn 0.3s ease; aspect-ratio: 480/370; } /* .product_page_image_modal .modal-content img { width: 100%; height: 100%; object-fit: contain; } */ .product_page_image_modal .close { position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; transition: color 0.3s ease; } .product_page_image_modal .close:hover { color: #ccc; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes zoomIn { from { transform: scale(0.5); } to { transform: scale(1); } } @media (max-width: 768px) { .product_page_image_swiper { height: 240px; } .product_page_image_modal .close { top: 10px; right: 20px; font-size: 30px; } } /* --> PRODUCT PAGE > ROW: SPECS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > ROW: SPECS > LEFT SIDE [2] =========================================================================================================== */ .product-product .small-description { margin-bottom: 25px; } /* --> PRODUCT PAGE > ROW: SPECS > LEFT SIDE > LAYOUT [3] ------------------------------------------------------------- */ .product-product .row.specs { margin-block: 50px 20px; display: flex; gap: 50px; flex-direction: column; max-width: 100%; width: 885px; margin-inline: auto; } .product-product .row.specs>div { width: 100%; border: none !important; } /* --> PRODUCT PAGE > ROW: SPECS > LEFT SIDE > TITLE [3] ------------------------------------------------------------- */ .product-product .row.specs .section_title { margin-bottom: 25px; margin-inline: auto; width: fit-content; } /* --> PRODUCT PAGE > ROW: SPECS > LEFT SIDE > TABLE [3] ------------------------------------------------------------- */ .product-product .row.specs .top_side .specs_table { display: flex; flex-direction: column; font-size: 16px; } .product-product .row.specs .top_side .specs_table .specs_row { display: flex; gap: 60px; padding-inline: 14px; } .product-product .row.specs .top_side .specs_table .specs_row:nth-child(2n+1) { background: #EDEDED; } .product-product .row.specs .top_side .specs_table .specs_row>div { padding-block: 12px } .product-product .row.specs .top_side .specs_table .specs_row .specs_label { max-width: 200px; white-space: wrap !important; width: 100%; } .product-product .row.specs .top_side .specs_table .specs_row .specs_value { font-weight: bold; } /* --> PRODUCT PAGE > ROW: SPECS > BOTTOM SIDE > CATALOG FILES [3] ------------------------------------------------------------- */ .product-product .row.specs .catalog_files_container { margin-top: 0px; } .product-product .row.specs .catalog_files_container .title { font-size: 16px; font-weight: bold; text-transform: uppercase; } .product-product .row.specs .catalog_files_container { display: flex; align-items: center; gap: 15px 40px; } .product-product .row.specs .catalog_files_container .items_container a { display: flex; gap: 12px; align-items: center; font-weight: 400; } /* --> PRODUCT PAGE > ROW: VIDEOS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > ROW: VIDEOS > LAYOUT [2] =========================================================================================================== */ .product-product .row.videos { margin-top: 60px; padding-block: 85px; background-image: linear-gradient(180deg, #8291c8 0%, #091C38 100%); width: 100vw; margin-left: 50%; transform: translateX(-50%); padding-inline: var(--calculatedPadding); } .product-product .row.videos .video_container { display: flex; /* gap: 100px; */ /* margin-top: 45px; */ } .product-product .video_container p { color: white; } /* --> PRODUCT PAGE > ROW: VIDEOS > TITLE [2] =========================================================================================================== */ .product-product .row.videos .section_title * { color: white; } /* --> PRODUCT PAGE > ROW: VIDEOS > VIDEOS [2] =========================================================================================================== */ /* .product-product .row.videos .video_container>iframe { width: 100%; height: 400px; } */ .product-product .row.videos iframe { aspect-ratio: 16/9 !important; display: block !important; max-width: 100%; width: 1070px; height: auto; margin-inline: auto; } /* --> PRODUCT PAGE > ROW: CONTACT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > ROW: CONTACT > LEFT SIDE [2] =========================================================================================================== */ /* --> PRODUCT PAGE > ROW: CONTACT > LAYOUT [3] ------------------------------------------------------------- */ .product-product .row.contact { margin-top: 125px; display: flex; gap: 122px; padding-inline: 140px; } .product-product .row.contact>div { width: 100%; } /* --> PRODUCT PAGE > ROW: CONTACT > INTRO TEXT [3] ------------------------------------------------------------- */ .product-product .row.contact .intro_text { font-size: 25px; font-weight: 400; color: #343434; line-height: 35px; margin-top: 45px; } /* --> PRODUCT PAGE > ROW: CONTACT > MAIN TEXT > CONTAINER [3] ------------------------------------------------------------- */ .product-product .row.contact .main_text_container { font-size: 16px; line-height: 23px; margin-top: 40px; display: flex; flex-direction: column; gap: 15px } /* --> PRODUCT PAGE > ROW: CONTACT > MAIN TEXT > LINK [3] ------------------------------------------------------------- */ .product-product .row.contact .main_text_container>div>a { display: block; width: fit-content; } /* --> PRODUCT PAGE > ROW: CONTACT > RIGHT SIDE [2] =========================================================================================================== */ .product-product .row.contact .right_side { max-width: 569px; } .product-contact-form { display: flex; flex-direction: column; } .product-contact-form .form-group:not(:last-child) { margin-bottom: 35px; } .product-contact-form .form-group.product_page_ideal_time_container { margin-top: -20px !important; } .product-contact-form .form-group *:is(input, textarea, select) { border: none; border-bottom: 1px solid #c3c2c2; border-radius: 0px; box-shadow: none; color: #343434; outline: none !important; box-shadow: none !important; font-weight: 500; } .product-contact-form .contact-preferences-label { font-weight: 500; } .product-contact-form .form-group.agree_to_terms { order: 99; } .product-contact-form .form-group.agree_to_terms * { font-size: 13px !important; } .product-contact-form .form-group.agree_to_terms input { margin-right: 10px !important; } .product-contact-form .form-group:has(.contact-submit-btn) { order: 100; } .product-contact-form .form-group.submit-group { margin-bottom: 0px; } .product-contact-form .form-group *:is(input, textarea, select)::placeholder { color: #3A3434 !important; } .product-contact-form .form-group *:is(input, textarea, .checkbox-label, label, select), .product-contact-form { font-size: 16px; line-height: normal; } .product-contact-form .form-group textarea { height: 32px } .product-contact-form .form-group .checkbox-group>label:first-child { margin-right: 55px; margin-top: 10px; margin-bottom: 10px } .product-contact-form .form-group input[type="checkbox"] { margin-right: 5px } .product-contact-form .form-group .text-danger { margin-top: 10px } .product-contact-form .form-group.contact-preferences { margin-top: 0px !important; } .product-contact-form .form-group .preferred-time { width: 310px; } .product-contact-form .form-group.privacy-policy .checkbox-label { font-size: 13px; margin-top: 5px; } .product-contact-form .form-group button[type="submit"] { margin-inline: auto; } .product-contact-form textarea+label { position: absolute; bottom: 0px; } /* --> PRODUCT PAGE > IMAGES SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > IMAGES > SMOOTHNESS FOR MODAL [2] =========================================================================================================== */ /* Smooth appearance for .mfp-bg */ .mfp-bg { opacity: 0; transition: opacity 0.3s ease-in-out; /* background: #afafaf !important; */ } .mfp-figure::after { display: none !important; } .mfp-bg.mfp-ready { opacity: .5; } /* Smooth appearance for .mfp-wrap */ .mfp-wrap { opacity: 0; transform: scale(0.95) translateY(50px); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; } .mfp-wrap.mfp-ready { opacity: 1; transform: scale(1) translate(0px); } /* --> PRODUCT PAGE > IMAGES > ZOOM BUTTONS ON MODAL [2] =========================================================================================================== */ #mfp-image-zoom-mm .zoom-buttons { position: absolute !important; gap: 0px; margin-top: 50px; margin-left: 10px; gap: 10px; } #mfp-image-zoom-mm .zoom-buttons>div>button { border-radius: 100% !important; background: transparent !important; border: none; } #mfp-image-zoom-mm>.mfp-close { width: 40px; padding: 0px; position: absolute; margin: 0px; border-radius: 100%; background: transparent; font-size: 40px; top: 50px; right: 10px; } #mfp-image-zoom-mm .zoom-buttons>div>button, #mfp-image-zoom-mm>.mfp-close { /* transform: scale(.8); */ display: flex; align-items: center; justify-content: center; padding: 0px !important; /* box-shadow: 0 3px 10px -4px rgba(0, 0, 0, .1); */ color: #2a2a2a; } .mfp-gallery .mfp-image-holder .mfp-figure :is(#zoom-in, #zoom-out, #zoom-reset) button i:before { content: "" !important; width: 30px !important; height: 30px !important; background-position: center; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z' fill='%23000000'/%3E%3C/svg%3E"); background-size: cover; display: block !important; } .mfp-gallery .mfp-image-holder .mfp-figure #zoom-out button i:before { background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z' fill='%23000000'/%3E%3C/svg%3E"); } .mfp-gallery .mfp-image-holder .mfp-figure #zoom-reset button i:before { background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 21 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' transform='matrix(0 1 1 0 2.5 2.5)'%3E%3Cpath d='m3.98652376 1.07807068c-2.38377179 1.38514556-3.98652376 3.96636605-3.98652376 6.92192932 0 4.418278 3.581722 8 8 8s8-3.581722 8-8-3.581722-8-8-8'/%3E%3Cpath d='m4 1v4h-4' transform='matrix(1 0 0 -1 0 6)'/%3E%3C/g%3E%3C/svg%3E"); } .mfp-gallery .mfp-image-holder .mfp-figure #zoom-reset { display: none !important; } #mfp-image-zoom-mm>.mfp-close { font-size: 0px; } #mfp-image-zoom-mm>.mfp-close:before { content: "" !important; width: 35px !important; height: 35px !important; background-position: center; background-size: cover; display: block !important; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z' fill='%23000000'/%3E%3C/svg%3E"); transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -o-transform: rotate(45deg) scale(1); } /* --> PRODUCT PAGE > IMAGES > BOTTOM BAR ON MODAL [2] =========================================================================================================== */ #mfp-image-zoom-mm figcaption:has(.mfp-bottom-bar) { background: #eee !important; } #mfp-image-zoom-mm .mfp-bottom-bar * { color: black !important; } /* --> PRODUCT PAGE > PRODUCT INFORMATION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product_information { display: flex; justify-content: space-between; } #product_information strong { font-weight: 600 !important; } #product_information :not(.fa) { font-size: 14px !important; } #product_information .product_information_right { text-align: right; /* background: Red; */ display: flex; flex-direction: column; justify-content: space-between; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > MODEL [2] =========================================================================================================== */ #product_information .product_model { margin-bottom: 20px !important; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > MANUFACTURER [2] =========================================================================================================== */ #product_information .product_manufacturer a { color: black !important; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > STOCK [2] =========================================================================================================== */ #product_information .product_stock { /* margin-bottom: 20px !important; */ text-transform: uppercase; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > REVIEWS [2] =========================================================================================================== */ #product_information .rating .title { display: inline-block; margin-right: 10px; } #product_information .rating { display: flex; align-items: center; justify-content: flex-end; } #product_information .rating span:not(:first-child) { margin-left: 5px; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > ATTRIBUTES [2] =========================================================================================================== */ .product_attributes_section>.title { display: none !important; } .product_attributes_section .attribute_heading { display: none !important; } .product_attributes_section .attribute_line { display: flex; } .product_attributes_section .attribute_line:nth-last-child(2) { margin-top: 15px; } .product_attributes_section .attribute_line .attribute_name { margin-right: 5px; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > PRODUCT VARIATIONS (SIMILAR PRODUCTS) [2] =========================================================================================================== */ .similar_as_variations_wrapper { margin-block: 50px; } .similar_as_variations_wrapper>.variations_title { margin-bottom: 15px; font-weight: 500; color: black; } .variations_products { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 100px)); gap: 10px; } .variations_products .product-thumb { box-shadow: none; border: 1px solid #ccc; padding: 0px; } .variations_products .product-thumb a { padding: 0px; } /* .variations_products .product-thumb :is(.caption, .product-card-bot, .labels_container) { display: none; } */ .variations_products .product-thumb .image button { display: none; } .variations_products .product-thumb:hover { border-color: black; } .variations_products .product-thumb :is(.caption > *:not(h4), .product-card-bot, .labels_container) { display: none; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > PRODUCT VARIATIONS (SIMILAR PRODUCTS) > DISPLAY NAME ON HOVER [3] ------------------------------------------------------------- */ .variations_products .product-thumb h4 a { overflow: unset; -webkit-line-clamp: unset; font-size: 12px; font-weight: bold; text-transform: uppercase; line-height: normal; background: #eee; height: fit-content; width: 150px; position: absolute; left: 50%; top: calc(100% + 0px); transform: translateX(-50%); transition: opacity .2s; opacity: 0; padding: 5px; color: white; background: var(--accent_1); border-radius: 5px; text-align: center; } /* .variations_products .product-thumb h4 a { overflow: unset; -webkit-line-clamp: unset; font-size: 12px; font-weight: normal; text-transform: uppercase; line-height: normal; background: #eee; height: 100%; width: 100%; position: absolute; left: 0px; top: 0px; transform: none; transition: opacity .2s; opacity: 0; padding: 5px; color: white; background: #4a5c9e; border-radius: 0px; text-align: center; display: flex; align-items: center; justify-content: center; line-height: 1.2 !important; } */ .variations_products .product-thumb:hover h4 a { opacity: 1; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > ENQUIRY BUTTON [2] =========================================================================================================== */ .enquiry_button { display: flex; align-items: center; cursor: pointer; text-transform: uppercase; } .enquiry_button::before { content: ""; width: 27px; height: 27px; margin-right: 15px; display: block; background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 489.3 489.3' style='enable-background:new 0 0 489.3 489.3;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M265,369.25c6.8,0,12.3-5.5,12.3-12.3s-5.5-12.3-12.3-12.3H38.4c-7.7,0-13.9-6.2-13.9-13.9V77.35 c0-7.7,6.2-13.9,13.9-13.9H451c7.7,0,13.9,6.2,13.9,13.9v253.6c0,7.7-6.2,13.9-13.9,13.9h-30.2c-6.8,0-12.3,5.5-12.3,12.3v60.9 l-69.5-69.5c-4.8-4.8-12.5-4.8-17.3,0s-4.8,12.5,0,17.3l78.9,78.9c3.6,3.6,8.5,5.6,13.4,5.6c2.4,0,4.9-0.5,7.3-1.4 c7.1-2.9,11.7-9.8,11.7-17.5v-61.9h17.9c21.2,0,38.4-17.2,38.4-38.4V77.35c0-21.2-17.2-38.4-38.4-38.4H38.4 C17.2,38.95,0,56.15,0,77.35v253.6c0,21.2,17.2,38.4,38.4,38.4H265V369.25z'/%3E%3Cpath d='M88.1,152.85h313.2c6.8,0,12.3-5.5,12.3-12.3s-5.5-12.3-12.3-12.3H88.1c-6.8,0-12.3,5.5-12.3,12.3 S81.3,152.85,88.1,152.85z'/%3E%3Cpath d='M88.1,218.75h313.2c6.8,0,12.3-5.5,12.3-12.3s-5.5-12.3-12.3-12.3H88.1c-6.8,0-12.3,5.5-12.3,12.3 S81.3,218.75,88.1,218.75z'/%3E%3Cpath d='M244.7,284.65h156.6c6.8,0,12.3-5.5,12.3-12.3s-5.5-12.3-12.3-12.3H244.7c-6.8,0-12.3,5.5-12.3,12.3 C232.5,279.15,237.9,284.65,244.7,284.65z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A"); } /* --> PRODUCT PAGE > PRODUCT INFORMATION > ENQUIRY BUTTON > ENQUIRY FORM [3] ------------------------------------------------------------- */ #enquiry_form_container { position: fixed; top: 50%; left: 50%; background: white; padding: 25px; width: 500px; transform: translate(-50%, 100%); z-index: 4; box-shadow: 0 10px 17px -10px rgba(0, 0, 0, .7); transition: all 0.4s; opacity: 0; visibility: hidden; overflow: auto !important; max-width: calc(100% - 50px); max-height: calc(100% - 50px); } #enquiry_form_container legend { color: black !Important; font-size: 23px; font-weight: normal; /* text-transform: uppercase; */ border: none !important; color: var(--accent_2) !important; } #enquiry-form fieldset .form-group { margin-bottom: 15px; } #enquiry_form_container .form-group { display: flex; flex-direction: column; width: 100%; margin-right: 0px; margin-left: 0px; } #enquiry_form_container .form-group>* { width: 100%; text-align: left; padding: 0px; } #enquiry_form_container .form-group * { font-size: 14px !important; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > ENQUIRY BUTTON > ENQUIRY FORM > AGREE AND TERMS */ #enquiry_form_container .buttons input[type="submit"] { width: 100% !important; display: block !important; order: 100; margin-top: 30px; } #enquiry_form_container .buttons .pull-right { display: flex; flex-wrap: wrap; justify-content: space-between } #enquiry_form_container .buttons span { order: 99; display: inline-block; width: calc(100% - 30px); font-size: 14px; line-height: 1.4; } #enquiry_form_container .buttons input[type="checkbox"] { display: block; /* z-index: -99999 !important; */ } /* --> PRODUCT PAGE > PRODUCT INFORMATION > ENQUIRY BUTTON > ENQUIRY FORM > CLOSE BUTTON */ #enquiry_form_container .close_button { width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 1000' enable-background='new 0 0 1000 1000' xml:space='preserve'%3E%3Cmetadata%3E Svg Vector Icons : http://www.onlinewebfonts.com/icon %3C/metadata%3E%3Cg%3E%3Cpath d='M990,59.5L940.5,10L500,450.5L59.5,10L10,59.5L450.5,500L10,940.5L59.5,990L500,549.5L940.5,990l49.5-49.5L549.5,500L990,59.5z'/%3E%3C/g%3E%3C/svg%3E"); position: absolute; right: 25px; top: 33px; cursor: pointer; } /* --> PRODUCT PAGE > PRODUCT INFORMATION > ENQUIRY BUTTON > ENQUIRY FORM > ENABLED */ .enquiry_enabled body::before { opacity: 1; visibility: visible; width: 100%; } .enquiry_enabled #enquiry_form_container { transform: translate(-50%, -50%); opacity: 1; visibility: visible; } header, body { transition: all .2s; } .enquiry_enabled header { transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); } .enquiry_enabled body { margin-top: 0px } /* --> PRODUCT PAGE > OPTIONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product .options_container { margin-top: 40px } #product .options_container .form-group { margin-top: 20px; } #product .options_container h3 { display: none; } #product .options_container .form-group>div { display: flex; gap: 10px; flex-wrap: wrap; } #product .options_container .form-group>label { margin-bottom: 10px; color: #000 !important } #product .options_container .form-group>div>div { margin: 0px } /* --> PRODUCT PAGE > OPTIONS > SELECTED OPTION [2] =========================================================================================================== */ #product .checked-tk { border-color: var(--accent_1) !important; /* border-width: 3px !important; */ } /* --> PRODUCT PAGE > OPTIONS > LABELS [2] =========================================================================================================== */ #product>div[class*="option"] label { color: #000 !important; font-size: 14px !important; text-transform: uppercase; font-weight: 600 !important; width: 150px; } /* --> PRODUCT PAGE > OPTIONS > ITEMS [2] =========================================================================================================== */ /* --> PRODUCT PAGE > OPTIONS > ITEMS > ΜΕΓΕΘΟΣ [3] ------------------------------------------------------------- */ #product>div[class*="option"] .radio label { border: 1px solid #ddd; font-size: 14px !important; font-weight: 600; color: black !important; padding: 9px 13px !important; /* height: 38px; */ /* width: 38px; */ display: flex; align-items: center; justify-content: center; border-radius: 0px !important; width: fit-content; line-height: 1; } #product>div[class*="option"] .img-thumbnail { border: none !important; } /* --> PRODUCT PAGE > OPTIONS > ITEMS > ΧΡΩΜΑ [3] ------------------------------------------------------------- */ /* #product-product #product .option-1 .radio label { font-size: 0px !important; } */ #product label:has(.color-swatch) span { display: none !important; } /* --> PRODUCT PAGE > TABS SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > TABS SECTION > TITLES [2] =========================================================================================================== */ #product-product .tabs_section ul.nav-tabs { border-bottom: 1px solid #d8d8d8; } #product-product .tabs_section ul.nav-tabs>li { margin-bottom: 0px !important; } #product-product .tabs_section ul.nav-tabs>li a { border: none !important; font-size: 18px !important; color: black !important; transition: all 0.09s; background-color: white !important; padding: 6px 18px !important; } #product-product .tabs_section ul.nav-tabs>li.active a {} /* .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{ border:none !important; color: black !important; font-weight:bold; } */ /* --> PRODUCT PAGE > TABS SECTION > CONTENTS [2] =========================================================================================================== */ #product-product .tab-content>div { display: none !important; } #product-product .tab-content>div.active { display: block !important; } #product-product .tab-content * { color: #787878; font-size: 15px; line-height: 28px; } /* --> PRODUCT PAGE > TAGS SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #product-product .tags_section { display: none !important } /* --> PRODUCT PAGE > EXTRA PRODUCTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> PRODUCT PAGE > EXTRA PRODUCTS > TITLES [2] =========================================================================================================== */ #product-product #content .extra_products .section_title { margin-bottom: 25px } /* --> PRODUCT PAGE > EXTRA PRODUCTS > SIMILAR PRODUCTS (ΠΑΡΕΛΚΟΜΕΝΑ) [2] =========================================================================================================== */ #product-product #content .extra_products.similar_products { padding-top: 70px; order: 98 } /* --> PRODUCT PAGE > EXTRA PRODUCTS > RELATED PRODUCTS [2] =========================================================================================================== */ #product-product #content .extra_products.related { padding-top: 70px; order: 99; } /* --> PRODUCT PAGE > EXTRA PRODUCTS > RECENTLY VIEWED [2] =========================================================================================================== */ #product-product #content .extra_products.recently_viewed { /* margin-top: 82px; */ order: 100; padding-top: 70px; } /* #product-product #content .extra_products.recently_viewed .section_title * { color: black; } */ /* --> PRODUCT PAGE > EXTRA PRODUCTS > NAVIGATION [2] =========================================================================================================== */ /* #product-product #content .extra_products .swiper-pager { display: none } */ #product-product #content .extra_products .swiper-pager { display: block; top: -65px !important } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION BLOG PARTIALS VVV VVV VVV VVV VVV VVV VVV */ /* .blogpost-thumb, .latest-posts .swiper-slider { box-shadow: none !important; border: none !important; outline: none !important; } .blogpost-thumb .caption { margin: 0px !important; width: 100% !important; transform: none !important; box-shadow: none !important; padding: 10px 15px !important; text-align: left; } .blogpost-thumb .caption h4 { font-size: 16px; } .blogpost-thumb .caption h5 a { font-size: 25px; font-weight: bold; color: #000 !important; } .blogpost-thumb:hover .caption, .blogpost-thumb:hover .caption * { transition: all .12s; } .blogpost-thumb:hover .caption { background: #555 !important; } .blogpost-thumb:hover .caption * { color: white !important; } */ /* --> PRODUCT PAGE > FOOTER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-product footer { margin-top: 110px !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION BLOG LIST PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> BLOG LIST PAGE > BREADCRUMBS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .extension-d4u-blogs .breadcrumb li * { color: white; } /* --> BLOG LIST PAGE > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .extension-d4u-blogs body { background: var(--accent_1); color: white; } /* --> BLOG LIST PAGE > BLOG ITEMS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #blog-category #content>.row { border-top: none } #blog-category .headingmain { padding: 0px !important; margin-left: 0px !important; margin-right: 0px !important; color: white !important; } .extension-d4u-blogs #content>.row { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 35px; } .extension-d4u-blogs #content>.row>div, .extension-d4u-blogs #content>.row>div img { width: 100%; } .extension-d4u-blogs #content>.row>div { padding: 0px } #blog-category .blogpost-thumb { margin: 0px; } .extension-d4u-blogs #content>.row>div img, .extension-d4u-blogs #content>.row>div .caption h4 { transition: all .2s ease; } .extension-d4u-blogs #content>.row>div .caption h4 { font-size: 16px; font-weight: bold; color: white; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 40px; } .extension-d4u-blogs #content>.row>div:hover .caption h4 { color: var(--accent_3); } @media(max-width: 1100px) { .extension-d4u-blogs #content>.row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media(max-width: 768px) { .extension-d4u-blogs #content>.row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 15px; } .extension-d4u-blogs #content>.row>div .caption h4 { height: 40px; } } @media(max-width: 550px) { .extension-d4u-blogs #content>.row { grid-template-columns: 1fr; gap: 20px; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION BLOG PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> BLOG PAGE > CONTENT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #latestpost .commentadta { display: none !important; } #latestpost .innerheader h1 { max-height: unset; line-height: normal; } .single_blog_page #latestpost { display: flex; margin-top: 70px; } #latestpost * { font-family: inherit !Important; } .single_blog_page #latestpost .image.listimg { width: 500px; } #latestpost .image.listimg .img-responsive { width: 100%; } .single_blog_page #latestpost>.row { width: calc(100% - 500px); padding-left: 25px; } #latestpost>.row .headtitle { position: relative; background: none; opacity: 1; display: flex; flex-direction: column; } #latestpost>.row .headtitle>div:first-child { display: none; } #latestpost>.row .description { color: #444; line-height: 26px; text-align: justify; margin-top: 25px; font-size: 15px; -moz-column-count: 2; column-count: 2; -moz-column-gap: 41px; column-gap: 41px; font-weight: normal !important; } /* .post-description * { font-weight: normal !important; } */ #blog #content .featured-image { width: 700px; } #blog #content .featured-image img { width: 100%; } #blog #content .blog-text.col-sm-6 { width: calc(100% - 700px); padding-left: 50px } @media(max-width: 1024px) { #blog #content .blog-text.col-sm-6 { padding-left: 0px } } /* --> BLOG PAGE > SOCIALS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #latestpost .social-icons { margin-top: 30px; } #latestpost .social-icons li i:before { font-family: FontAwesome; } /* --> BLOG PAGE > ALERT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #latestpost { position: relative; } #latestpost .alert.alert-success.alert-dismissible { position: absolute; left: 50%; transform: translateX(-50%) translateY(-100%); z-index: 9999999; top: 0px; } #latestpost .alert.alert-success.alert-dismissible i:before { font-family: FontAwesome; } #latestpost .alert-dismissable .close, #latestpost .alert-dismissible .close { right: 0px !important; } /* --> BLOG PAGE > RELATED PRODUCTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .row.related .headingmain { margin-top: 0px !important; } #blogrelated .product-thumb h4 { text-align: left !important; } #blogrelated .price-cont { display: flex; align-items: center; } #blogrelated .product-thumb .price { margin-bottom: 0px !important; text-align: left; } #blogrelated .product-thumb .price-old { margin-left: 0px !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CART PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> CART PAGE > BUTTONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #checkout-cart .bottom_section .input-group-btn input { background: var(--accent_2) !important; color: white !important; border: none !important; height: 60px !important; } /* #checkout-cart .what-next[href*="home"], .checkout-cart #error-not-found .btn-primary { border: 1px solid rgba(0, 0, 0, 0.3) !important; color: black !important; } */ #checkout-cart .what-next[href*="checkout"] { background: var(--accent_2) !important; color: white !important; border: none !important; text-transform: uppercase !important; } /* --> CART PAGE > INTRO [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #cart-intro { display: flex; width: 100%; justify-content: space-between; margin-bottom: 36px; margin-top: 30px; margin-bottom: 45px; } #cart-intro>div { display: flex; align-items: center; } /* --> CART PAGE > INTRO > LEFT SECTION [2] =========================================================================================================== */ #cart-intro .left-section {} /* --> CART PAGE > INTRO > MID SECTION [2] =========================================================================================================== */ #cart-intro .mid-section * { text-align: center; } #cart-intro .mid-section { font-size: 30px; font-weight: bold; margin-top: 10px; line-height: 1; } /* --> CART PAGE > INTRO > RIGHT SECTION [2] =========================================================================================================== */ #cart-intro .right-section {} /* --> CART PAGE > NO PRODUCTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> CART PAGE > NO PRODUCTS > INTRO [2] =========================================================================================================== */ .checkout-cart #error-not-found #content { text-align: center; } .checkout-cart #error-not-found #content>h1 { font-size: 15px; letter-spacing: 1px; text-transform: uppercase; } .checkout-cart #error-not-found #content>p { font-family: var(--font2); font-size: 40px; font-weight: bold; text-transform: uppercase; margin-top: 10px; line-height: 1; } .checkout-cart #error-not-found #content .pull-right { float: none !important; margin-top: 100px; } /* --> CART PAGE > TABLE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #checkout-cart form { margin-bottom: 30px !important; } /* --> CART PAGE > TABLE > HEAD [2] =========================================================================================================== */ #checkout-cart table thead { background: #eeeeee; height: 50px; } #checkout-cart table thead td { color: black; font-size: 16px; } /* --> CART PAGE > TABLE > TR [2] =========================================================================================================== */ #checkout-cart form tbody tr:not(:last-child) { border-bottom: 1px solid #f3f3f3 !important } /* --> CART PAGE > TABLE > TD [2] =========================================================================================================== */ #checkout-cart form tbody { border: none !important; } #checkout-cart table tbody td { border: none; } #checkout-cart #cart-intro+form tbody td { padding: 25px 0px; } /* --> CART PAGE > TABLE > NAME [2] =========================================================================================================== */ /* --> CART PAGE > TABLE > NAME > MODEL [3] ------------------------------------------------------------- */ #checkout-cart table tbody td.product-title .model-info { color: #6C6C6C !important; margin: 15px 0px !important; display: block !important; font-size: 14px; } /* --> CART PAGE > TABLE > NAME > OPTIONS [3] ------------------------------------------------------------- */ #checkout-cart table tbody td.product-title small { display: block; font-size: 14px; } #checkout-cart table tbody td.product-title small strong { text-transform: uppercase; } /* --> CART PAGE > TABLE > ΠΟΣΟΤΗΤΑ [2] =========================================================================================================== */ /* --> CART PAGE > TABLE > ΠΟΣΟΤΗΤΑ > BOX [3] ------------------------------------------------------------- */ #checkout-cart form #cart-stepper { height: 40px; width: 40px; min-width: 40px; font-size: 18px; font-weight: bold; color: black; border: 1px solid rgba(0, 0, 0, 0.12); padding: 0px; } /* disable arrow view in chrome */ #checkout-cart form input[type=number]::-webkit-inner-spin-button, #checkout-cart form input[type=number]::-webkit-outer-spin-button { display: none !important; } /* --> CART PAGE > TABLE > ΠΟΣΟΤΗΤΑ > BUTTONS [3] ------------------------------------------------------------- */ #checkout-cart form .input-group-btn button { width: 40px; height: 40px; min-width: 40px; border: 1px solid rgba(0, 0, 0, 0.12) !important; color: black !Important; box-shadow: none; padding: 0px; } #checkout-cart form .input-group-btn button:first-child { margin-right: 10px; } /* --> CART PAGE > TABLE > PRICES [2] =========================================================================================================== */ #checkout-cart form tbody .price { font-size: 25px; font-weight: bold; } /* --> CART PAGE > BOTTOM SECTION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> CART PAGE > BOTTOM SECTION > LAYOUT [2] =========================================================================================================== */ #checkout-cart .bottom_section { background: #eeeeee; padding: 50px 50px 50px 50px; margin-bottom: 45px; display: flex; justify-content: space-between; } #checkout-cart .bottom_section>* { width: auto; } /* --> CART PAGE > BOTTOM SECTION > DISABLES [2] =========================================================================================================== */ #checkout-cart .panel { display: none !important; } /* --> CART PAGE > BOTTOM SECTION > COUPON SECTION [2] =========================================================================================================== */ /* --> CART PAGE > BOTTOM SECTION > COUPON SECTION > TITLE [3] ------------------------------------------------------------- */ #checkout-cart .bottom_section .coupon_title { font-size: 17px; } /* --> CART PAGE > BOTTOM SECTION > COUPON SECTION > INPUT [3] ------------------------------------------------------------- */ #checkout-cart .bottom_section .input-group { margin-top: 35px; } #checkout-cart .bottom_section .input-group .form-control { height: 60px; border-bottom: none; font-size: 15px; width: 500px; padding: 0px 25px; max-width: 100% } /* --> CART PAGE > BOTTOM SECTION > COUPON SECTION > BUTTON [3] ------------------------------------------------------------- */ /* --> CART PAGE > BOTTOM SECTION > TOTALS SECTION [2] =========================================================================================================== */ /* --> CART PAGE > BOTTOM SECTION > TOTALS SECTION > COMMON [3] ------------------------------------------------------------- */ #checkout-cart .bottom_section .cart-total-table tr { display: flex; justify-content: space-between; } #checkout-cart .bottom_section .cart-total-table tr td { display: flex; align-items: center; } #checkout-cart .bottom_section .cart-total-table tr .title { text-transform: uppercase; margin-right: 100px !important; } #checkout-cart .bottom_section .cart-total-table tr .value { font-weight: bold; } /* --> CART PAGE > BOTTOM SECTION > TOTALS SECTION > TOTAL [3] ------------------------------------------------------------- */ #checkout-cart .bottom_section .cart-total-table tr:last-child .title { font-size: 18px; font-weight: bold; } #checkout-cart .bottom_section .cart-total-table tr:last-child .value { font-size: 25px; font-weight: bold; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION THANK YOU PAGE (CHECKOUT) VVV VVV VVV VVV VVV VVV VVV */ .checkout-success #content { text-align: center; } .checkout-success #content img { width: 600px; max-width: 100%; } .checkout-success #content .buttons .pull-right { float: none !important; } .checkout-success #content .buttons .pull-right a { text-align: center !important; margin-inline: auto !important; float: none !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION INFORMATION PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> INFORMATION PAGE > CONTENT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .information-information #content p { font-weight: unset } /* --> INFORMATION PAGE > SIDEBBAR [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .information-information #content p { font-weight: unset } .information-information .sidebar li a { background: none; border: none !important; outline: none !important; color: black !important; } .information-information .sidebar li a:hover { color: var(--accent_1) !important } .information-information #content #accordion h4 a { margin: 0px; } .sidebar .nav-tabs a.current { background: #eef2ff; } /* --> INFORMATION PAGE > BOOTSTRRAP ACCORDION [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .information-information #content #accordion .panel-heading { min-height: unset !important; } .information-information #content #accordion .panel-heading .panel-title { line-height: normal; } .information-information #content #accordion .panel-heading .panel-title a { width: 100%; min-width: 100%; display: block; padding: 10px 13px; font-weight: normal; font-size: inherit; font-size: 15px !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION INFORMATION PAGE: CATALOG VVV VVV VVV VVV VVV VVV VVV */ .information-information iframe { width: 100%; height: auto; aspect-ratio: 16/9; margin-block: 50px } .information-information iframe+a { padding: 18px 30px !important; font-size: 14px !important; width: fit-content !important; font-weight: bold; text-transform: uppercase; background: none; box-shadow: none; border: none; border-radius: 0px; box-sizing: border-box; background: var(--accent_3); line-height: 1 !important; border-radius: 8px; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; color: white; margin-inline: auto !important; display: block } .information-information iframe+a:hover { background: var(--accent_4); } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CERTIFICATIONS PAGE VVV VVV VVV VVV VVV VVV VVV */ .certifications_carousel { background: #131b42 !important; padding-block: 50px !important; width: 100vw; margin-left: 50%; transform: translateX(-50%); padding-inline: 15px !important; margin-bottom: 50px !important; } .certifications_carousel .swiper-pager { display: none; } .certifications_carousel .section_title { color: white !important; text-align: center; margin-bottom: 50px; } .information-information:has(.certifications_carousel) .breadcrumb { margin-bottom: 0px !important; } .information-information:has(.certifications_carousel) h1 { display: none !important; } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION CONTACT PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> CONTACT PAGE > LAYOUT [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #information-contact #content { padding-top: 10px !important; } /* --> CONTACT PAGE > INFOS ROW [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #information-contact .infos_row { display: flex; gap: 50px; margin-top: 30px; flex-direction: column; align-items: center; } #information-contact .infos_row .logo_section img { width: 180px; } #information-contact .infos_row .infos_section { gap: 50px; display: flex; flex-direction: row; } #information-contact .infos_row .infos_section>div { display: flex; flex-direction: column; } #information-contact .infos_row .infos_section>div * { font-size: 16px !important } #information-contact .infos_row .infos_section .contact_section_title { font-weight: bold; margin-bottom: 10px; } /* --> CONTACT PAGE > MAPS ROW [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #information-contact .maps_row { display: grid; gap: 20px; padding-block: 70px 70px; grid-template-columns: repeat(2, minmax(0, 1fr)); } #information-contact .maps_row>div, #information-contact .maps_row>div>* { width: 100%; } #information-contact .maps_row>div { overflow: hidden; background: #eef2ff; /* border: 1px solid var(--accent_3); */ } #information-contact .maps_row>div>iframe { height: 300px } #information-contact .maps_row>div>.address_text { padding: 10px; display: block; text-align: center; transition: all .2s; font-size: 14px; } /* --> CONTACT PAGE > FORM [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #information-contact form { /* background: #eef2ff !important; padding: 40px 50px 30px; */ margin-top: 0px !important; max-width: 1024px; margin-inline: auto; margin-bottom: 35px; } #information-contact form :is(input, textarea) { background: transparent; } #information-contact form legend { margin-top: 0px !important; } #information-contact .form-group.agree_to_terms { text-align: center; margin-top: 55px !important; } #information-contact .form-group.agree_to_terms label, #information-contact .form-group.agree_to_terms label a, #information-contact .form-group.agree_to_terms label a b { font-size: 15px !important } /* --> CONTACT PAGE > RESPONSIVE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(min-width: 1025px) { #information-contact .maps_row>div:hover>.address_text a { background: var(--accent_3); color: white; } } @media(max-width: 991px) { #information-contact .maps_row { display: flex; flex-direction: column; gap: 15px } #information-contact .maps_row>div { display: grid; grid-template-columns: 1fr 250px; align-items: center; } } @media(max-width: 600px) { #information-contact .infos_row .infos_section { width: 100%; justify-content: space-between; gap: 20px; flex-wrap: wrap; } #information-contact .maps_row { padding-block: 40px; } #information-contact .maps_row>div { display: flex; flex-direction: column; } #information-contact form { background: none !important; padding: 0px !important; margin-top: 0px; } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION RESPONSIVE VVV VVV VVV VVV VVV VVV VVV */ /* --> RESPONSIVE > VARIABLES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1250px) { body { --menuPadding: 30px; } } @media(max-width: 1024px) { body { --headerHeight: 70px; --menuPadding: 20px; } } @media(max-width: 450px) { body { --headerHeight: 60px; } } /* --> RESPONSIVE > COMMON [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> RESPONSIVE > COMMON > TITLES [2] =========================================================================================================== */ @media(max-width: 991px) { .section_title, .main_title, .latest-posts .blog-headings .headingmain, .home_banner_blog .column-content-2 .html_section h2, #product-category .cat-title { font-size: 35px; } .section_title_sec, .pre_title, .section_title .after_title, .section_title, .main_title, .latest-posts .blog-headings .headingmain, .home_banner_blog .column-content-2 .html_section h2, #product-category .cat-title, #blog-category .headingmain, #product-product #content>.row.text_n_banner .left_side .title, #information-contact #content>h3, .form-horizontal legend { line-height: normal !important; } } @media(max-width: 991px) and (min-width: 769px) { #product-category .cat-title { font-size: 26px; line-height: normal; } } /* --> RESPONSIVE > COMMON > CAROUSEL [2] =========================================================================================================== */ /* --> RESPONSIVE > COMMON > CAROUSEL > VIEW MORE [3] ------------------------------------------------------------- */ @media(max-width: 1400px) { .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .view_more, .carousel .view_more, .products-carousel-module .view_more { position: relative !important; left: 0px; right: 0px !important; bottom: 0px !important; width: fit-content; margin-top: 20px; margin-inline: auto; display: block; color: black !important; border-color: black !important; } } /* --> RESPONSIVE > HEADER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> RESPONSIVE > HEADER > TOGGLE DEPENDING ON SCROLL HEIGHT (+JS) [2] =========================================================================================================== */ @media(max-width: 768px) { html:not(.fixedToTop) header { transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); } } /* --> RESPONSIVE > HEADER > TOP BAR (+JS) [2] =========================================================================================================== */ /* @media(max-width: 900px) { #top-bar { display: none !important; flex-direction: column; justify-content: center; align-content: center; text-align: center; } #top-bar p { margin-bottom: 0px; line-height: normal; font-size: 10px; } #header_sections_container { margin: 0px; } } */ /* @media (max-width: 1649px) { */ #top-bar { overflow: hidden; white-space: nowrap; position: relative; padding: 10px 0; width: 100vw; margin-left: 50%; transform: translateX(-50%); } #top-bar.marquee-active { display: flex; align-items: center; } #top-bar.marquee-active .marquee-content { display: inline-block; animation: marquee 17s linear infinite; white-space: nowrap; color: white; font-weight: 500; font-size: 13px; text-transform: uppercase; -webkit-animation: marquee 17s linear infinite; cursor: default; } @keyframes marquee { 0% { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } 100% { transform: translateX(-33.33%); } } /* Pause animation on hover */ #top-bar:hover .marquee-content { animation-play-state: paused; } /* Hide original paragraphs when marquee is active */ #top-bar.marquee-active>p { display: none; } /* } */ /* Desktop styles - show original paragraphs normally */ /* @media (min-width: 1650px) { */ #top-bar .marquee-content { display: none; } /* } */ /* --> RESPONSIVE > HEADER > LAYOUT [2] =========================================================================================================== */ @media(max-width: 1550px) { .header_mid_section { width: 100% !important; } body { --headerItmesDinstance: 10px !important; } } @media(max-width: 1400px) { .header_left_section, .header_right_section { width: fit-content !important; } } @media(max-width: 1024px) { #logo { margin-right: auto } #menu_toggle_section #category { display: none } #menu_toggle_section #burger_button { margin: 0px !important; } } @media(max-width: 768px) { .header_mid_section #logo a { height: 50px; width: 75px; float: none; display: block !important; overflow: hidden } .header_mid_section #logo a img { height: 100% } } @media(max-width: 620px) { .header_sections_container {} body { --headerItemsDistance: 10px !important; } } @media(max-width: 540px) { .header_right_section>ul>li.account_item { margin-right: -7px } body>header { padding-left: 8px !important; transition: all .2s; } .header_left_section #logo a img { height: 35px; } .header_left_section { padding-right: 5px !important; } .header_right_section>ul { gap: 15px !important; } /* .header_right_section .b2b_login_item a { font-size: 0px; margin-right: 0px; } */ /* .header_right_section .b2b_login_item a:after { content: "B2B"; font-size: 15px } */ } @media(max-width: 450px) { .header_mid_section #logo a { height: 30px; width: 45px; } .header_right_section>ul { gap: 15px; } #search .input-group-btn>button>svg, .header_right_section .language_item #form-language>.btn-group>button>img, .header_right_section .compare_item>a>img, .header_right_section .account_item>a>svg, .header_right_section .cart_item>button>img, .header_right_section .search_item>a>svg, .header_right_section .wishlist_item>a #wishlist_image img { height: 20px } } /* --> RESPONSIVE > HEADER > MENU [2] =========================================================================================================== */ @media(max-width: 1100px) { #menu_close_button { background: var(--accent_1) !important; border-radius: 100%; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; top: 25px !important; } #menu_container:has(.dropdown_activated) #menu_close_button { visibility: hidden !important; } } @media(max-width: 768px) { #menu_header>a>img { width: auto !important; height: 50px !important; } /* #menu_container, #menu .nav.navbar-nav li.dropdown .dropdown-menu { padding-left: 30px !important; padding-right: 30px !important; } */ #menu_container { width: 350px; } /* #menu .extra_links>a { padding: 9px 30px; } */ } @media(min-width: 1551px) { #menu .navbar-nav>.outside_menu_links_mobile { display: none; } } /* HEADER > MENU */ @media(max-width: 1550px) { #menu_toggle_section>#category { font-size: 0px !important } #menu_toggle_section>#category:after { content: "MENU"; font-size: 15px; } #menu .outside_menu_links { display: none } #menu .navbar-nav>li:not(.outside_menu_links_mobile)+.outside_menu_links_mobile { margin-top: auto } } /* --> RESPONSIVE > HEADER > MENU > HEIGHTS [3] ------------------------------------------------------------- */ @media(max-width: 1100px) { #menu .nav.navbar-nav li.dropdown .dropdown-menu { padding-top: 20px; } } @media(max-width: 768px) { #menu_header { /* height: 60px; */ margin-bottom: 0px; } #menu .nav.navbar-nav { height: calc(100vh - 60px - 230px); overflow: auto; justify-content: unset; } /* #menu .nav.navbar-nav li.dropdown .dropdown-menu{ height: calc(100vh - 230px); overflow:auto; } #menu .extra_links { height: 200px; margin-top: 30px; } */ } /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLY [3] ------------------------------------------------------------- */ @media(min-width: 1101px) { /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION */ /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > CONTAINER */ #menu_container { width: 100%; background: transparent; flex-direction: row; } /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > ALL LEVELS */ /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > ALL LEVELS > BACK ARROW / CLOSE BUTTON */ #menu .parent_header>a { padding-left: 25px !important; white-space: wrap; padding-right: 10px !important; } .arrow_back { position: absolute; top: 12px !important; right: 20px; transition: all .2s; } #menu_close_button { transition: all .2s; } .arrow_back>img { display: none; } .arrow_back { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' width='50px' height='50px'%3E%3Cpath d='M 40.783203 7.2714844 A 2.0002 2.0002 0 0 0 39.386719 7.8867188 L 25.050781 22.222656 L 10.714844 7.8867188 A 2.0002 2.0002 0 0 0 9.2792969 7.2792969 A 2.0002 2.0002 0 0 0 7.8867188 10.714844 L 22.222656 25.050781 L 7.8867188 39.386719 A 2.0002 2.0002 0 1 0 10.714844 42.214844 L 25.050781 27.878906 L 39.386719 42.214844 A 2.0002 2.0002 0 1 0 42.214844 39.386719 L 27.878906 25.050781 L 42.214844 10.714844 A 2.0002 2.0002 0 0 0 40.783203 7.2714844 z'%3E%3C/path%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; display: block !important; min-width: 27px !important; min-height: 27px !important; cursor: pointer; background-size: cover } .dropdown-inner:has(> ul > li:is(.dropdown_activated))>.parent_header>.arrow_back, #menu_container:has(.dropdown_activated) #menu_close_button { opacity: 0; visibility: hidden; transform: translateX(10px); } #menu_close_button { left: calc((100vw / 4) - 55px) !important; } /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > ALL LEVELS > PARENT ELEMENT */ #menu .parent_header { /* display: none */ border: none !important; text-transform: uppercase; margin-bottom: 0px !important; } /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > ALL LEVELS > FLAG ACTIVE PARENT */ #menu .nav.navbar-nav li.dropdown>a { border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -ms-border-radius: 5px 0 0 5px; -o-border-radius: 5px 0 0 5px; } #menu .nav.navbar-nav li.dropdown.dropdown_activated>a { /*font-weight: bold !important; */ /*color: var(--accent_3) !important; */ } /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > LEVEL 0+1 (USED AS BASE) */ /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > LEVEL 0+1 (USED AS BASE) > LAYOUT */ #menu .navbar-nav, .level_1_wrapper { width: calc(100% / 4) !important; } /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > INNER LEVELS */ /* --> RESPONSIVE > HEADER > MENU > DESKTOP VERSION ONLYMENU > DESKTOP VERSION > INNER LEVELS > LAYOUT */ .level_1_wrapper, .level_2_wrapper, .level_3_wrapper { overflow: visible !important; } .level_1_wrapper { left: calc(100% / 4) !important; } .level_2_wrapper { left: 100% !important; background: #f1f1f1 !important; } .level_3_wrapper { left: 100% !important; } } /* --> RESPONSIVE > HEADER > CART [2] =========================================================================================================== */ @media(max-width:635px) { body { --minicart-width: 100vw !important; } /* #cart .dropdown-menu>li.bottom-section { height: 220px !important; } */ /* li.bottom-section > div.container{ width: 280px !important; } */ #cart .dropdown-menu { padding: 20px 0px; } #cart .dropdown-menu .product-info a { font-size: 14px; line-height: normal; } .minicart_intro .subtitle { font-size: 25px !important; line-height: normal !important; } #cart .dropdown-menu .product-info .product-options .option-name, #cart .dropdown-menu .product-info .product-options .option-value { font-size: 12px; } #cart .dropdown-menu .table-products { padding: 0px !important; } /* #cart .dropdown-menu>li.top-section .minicart_content { max-height: calc(100vh - 310px); overflow: auto; } */ #cart .dropdown-menu .cart-footer>a { height: 45px !important; } #cart .dropdown-menu .product-thumb { padding: 0px; width: 100px; height: 100px; vertical-align: top; } } /* --> RESPONSIVE > HEADER > SEARCH > RESULTS [2] =========================================================================================================== */ @media(max-width: 500px) { #search_contents #search { margin-top: 115px; } .live-search-div { max-height: calc(100vh - 195px); } } /* --> RESPONSIVE > FOOTER [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1370px) { .footer_extra_container { margin-top: 40px !important; } } @media(max-width: 1200px) { .footer_extra_container .contact_section_wrapper { width: 100% !important; } .footer_extra_container { margin-top: 0px !important; margin-left: 0px; gap: 30px } .footer_extra_container .contact_section { width: 100% !important; } } @media(max-width: 815px) { .footer_extra_container { align-items: flex-start } .footer_extra_container { flex-direction: column; width: 100%; } .footer_extra_container .contact_section { width: 100% !important; justify-content: space-around; } footer .socials_section { /* margin-left: 0px !important; margin-right: auto !important; margin-inline: 0px !important; */ width: fit-content !important; } footer .socials_section>h5 { text-align: center; width: 100%; } } @media(max-width: 605px) { footer .contact_section>div { white-space: nowrap !important; } footer .contact_section { display: flex; flex-direction: column; height: fit-content !important; gap: 25px !important; padding-block: 10px } } @media(max-width: 1200px) { footer>.container>.links-row { display: flex !important; flex-wrap: wrap !important; } footer>.container>.links-row>div { flex: 1 1 180px; } footer .links-row { gap: 26px 20px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 30px; } } @media(max-width: 1200px) { /* footer { background-image: none } */ footer .links-row { position: relative; z-index: 0 } footer .links-row>.footer-column:last-child { position: relative; z-index: 0; width: 100% !important; flex: 1 1 100% !important; margin-bottom: 30px; padding-left: 0px !important; } footer .links-row>.footer-column:last-child::before { display: none; } .footer-column .newsletter_section .news-form #subscribe:hover { background: var(--accent_2); } } @media(max-width: 900px) { footer>.container>.links-row>div { flex: 1 1 calc(50% - 30px) !important; } footer .links-row>.footer-column:last-child::before { display: none; } .powered_by, .powered_by>div { display: flex; flex-direction: column; text-align: center; gap: 5px; } } @media(max-width: 420px) { footer>.container>.links-row>div { flex: 1 1 100% !important; } .footer-column .newsletter_section .news-form .col-sm-6 { display: flex; flex-direction: column; gap: 15px } .footer-column .newsletter_section .news-form input#email, .footer-column .newsletter_section .news-form #subscribe { width: 100% !important; } } @media(max-width: 815px) { footer .horizontal_links_container { width: fit-content; margin-inline: auto; text-align: center; } } /* --> RESPONSIVE > NEWSLETTER POPUP [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 450px) { .tk-cart-body { padding: 0px !important; } .alert.alert-success.alert-dismissible .add-to-cart-inner { left: 50%; transform: translateX(-50%); width: calc(100vw - 30px) !important; padding: 15px; } } /* --> RESPONSIVE > HOME [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1420px) { #common-home #latestblog .product-thumb .caption h4 a { font-size: 18px; line-height: normal; } #common-home #latestblog .product-thumb .caption .dateadded i { font-size: 15px !important; } } @media(max-width: 1150px) { #common-home .headingmain { margin-left: 0px; margin-right: 0px !important } #common-home #latestblog>.row { display: flex !important; flex-wrap: wrap !important; } #common-home #latestblog>.row>div { width: 33.33%; } } @media(max-width: 991px) { #common-home #latestblog>.row>div { width: 50%; } #common-home #content .row.featured-products-module.featured0, #common-home #content .row.featured-products-module.featured1 { width: 100% !important; } /* #common-home #content> :not(.slideshow) { padding: 0px var(--responsivePadding); } */ .row.special-products-module { margin-left: 0px !important; margin-right: 0px !important; } #common-home #content .slideshow { order: -100 !important; } #common-home #content .banner0 { order: -90 !important; } #common-home #content .featured0 { order: -80 !important; } #common-home #content .banner1 { order: -70 !important; } #common-home #content .featured1 { order: -60 !important; } #common-home #content .row.swiper-viewport.banner2, #common-home #content .row.swiper-viewport.banner3 { padding: 0px !important; } } @media(max-width: 820px) { .row.news-form { display: flex; align-items: center; flex-direction: column; padding-top: 15px; } .news-form h1 { text-align: center !important; } #common-home #content .row .news-form h3 { text-align: center; line-height: normal; margin-top: 15px; } #common-home #content .row .news-form .pull-center { display: flex; flex-wrap: wrap !important; text-align: center; justify-content: center; align-items: center; justify-content: center; } #common-home #content .row .news-form .pull-center input { order: -100; margin-right: 10px; margin-top: 0px; } } @media(max-width:768px) { #common-home #latestblog>.row>div .dateadded i { font-size: 14px !important; } #common-home #latestblog>.row>div .caption { padding: 10px !important; justify-content: flex-end !important; } #common-home #latestblog>.row>div .caption h4 a { font-size: 17px !important; line-height: normal !important; } } @media(max-width: 600px) { #common-home #content .row.swiper-viewport.banner2, #common-home #content .row.swiper-viewport.banner3 { width: 100% !important; padding: 0px var(--responsivePadding) !important; } } @media(max-width: 450px) { #common-home #latestblog>.row>div { width: 100% !important; } } @media(max-width: 400px) { .row.news-form>div { display: flex; flex-direction: column; } .news-form #subscribe { width: 100% !important; margin-top: 10px; } } /* --> RESPONSIVE > HOME > SPACING [2] =========================================================================================================== */ @media(max-width: 1200px) { /* #common-home .home_category_carousel, #common-home .module_product_tabs { margin-top: 90px !important; } #common-home .text_and_banners_section>div:not(.carousel) { margin-top: 10px !important; } #common-home .banner_and_tabs_section { margin-top: 30px !important; } */ } @media(max-width: 768px) { .module_row_section.multi-banner-group { margin-top: 20px !important; } .module_product_tabs { margin-top: 20px; } .per_profession { margin-top: 80px } .carousel.product_categories { margin-top: 80px; } .home_banner_n_products, .home_products_n_banner { margin-top: 80px !important; } .video-carousel-container { padding-block: 0px 15px; } .video-carousel-container+.html_section p { padding-bottom: 80px; } } /* --> RESPONSIVE > HOME > MANUFACTURERS DUAL CAROUSEL [2] =========================================================================================================== */ @media(max-width: 1400px) { .manufacturer_carousel .section_title { margin-bottom: 30px !important; } .manufacturer_carousel { padding-block: 80px 30px !important; } #content .carousel.manufacturer_carousel .view_more { order: 99 !important; height: fit-content !important; top: unset !important; bottom: unset !important; margin-top: 20px !important; display: flex !important; position: relative !important; margin-bottom: 50px; margin-left: 0px } } /* --> RESPONSIVE > HOME > PRODUCT TABS [2] =========================================================================================================== */ @media(max-width: 1660px) { .module_row_section.home_products_n_banner>.columns-container { width: 100%; } .module_product_tabs .title_n_nav_wrapper { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-right: 0px } .module_product_tabs .title_n_nav_wrapper .nav-tabs { justify-content: flex-start } } /* --> RESPONSIVE > HOME > PRODUCTS AND HTML (DAILY OFFERS SECTION) [2] =========================================================================================================== */ @media(max-width: 991px) { .products_carousel_with_html .section_title { margin-top: 0px !important; } .products_carousel_with_html { flex-direction: column !important; gap: 25px } .products_carousel_with_html>div, .products_carousel_with_html>.row { width: 100% !important; } .module_row_section.products_carousel_with_html { padding: 80px var(--calculatedPadding) !important; gap: 15px !important; } .module_row_section.products_carousel_with_html .products-carousel-module { flex-direction: column; } .module_row_section.products_carousel_with_html .products-carousel-module>div { width: 100% !important; min-width: 100% } .module_row_section.products_carousel_with_html .products-carousel-module .section_title { display: none; } } /* --> RESPONSIVE > HOME > ROW:BANNER AND PRODUCTS / PRODUCTS AND BANNER [2] =========================================================================================================== */ @media(max-width: 991px) { .module_row_section:is(.home_banner_n_products, .home_products_n_banner) .columns-container { display: flex !important; flex-direction: column; } .module_row_section.home_banner_n_products .columns-container { margin-left: 0px !important; } .module_row_section.home_banner_n_products>.columns-container { width: 100% !important } .module_row_section.home_banner_n_products .columns-container .column-content-2 { width: 100% } .module_row_section.home_products_n_banner .columns-container { flex-direction: column-reverse; } } /* --> RESPONSIVE > HOME > BG & PRODUCTS [2] =========================================================================================================== */ @media(max-width: 991px) { .module_row_section.products_carousel_n_bg { padding: 80px var(--calculatedPadding) !important; gap: 15px !important; } .module_row_section.products_carousel_n_bg .products-carousel-module { flex-direction: column; } .module_row_section.products_carousel_n_bg .products-carousel-module>div { width: 100% !important; min-width: 100% } /* .module_row_section.products_carousel_n_bg .products-carousel-module .section_title { display: none; } */ .module_row_section.products_carousel_n_bg .products-carousel-module>.row { width: 100% !important; margin-top: 0px !important; } } /* --> RESPONSIVE > HOME > VIDEO SECTION [2] =========================================================================================================== */ @media(max-width: 991px) { .video-carousel-container .video-swiper .swiper-slide-active { opacity: 1; transform: scale(1); z-index: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .video-carousel-container .swiper-pagination { margin-top: 30px !important } } /* --> RESPONSIVE > HOME > BLOG SECTION [2] =========================================================================================================== */ @media(max-width: 1380px) { .home_banner_blog .columns-container { display: grid !important; grid-template-areas: "image text" "posts posts"; grid-template-columns: 1fr 1fr !important; gap: 30px !important; margin-bottom: 50px; } .home_banner_blog { width: 100% !important; margin-left: unset !important; transform: none !important; -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; } .home_banner_blog .column-content-3 { padding-inline: 0px !important; } .home_banner_blog .columns-container>div { width: 100%; } .home_banner_blog .column-content-1 { grid-area: image; margin-left: calc(-1 * var(--calculatedPadding)); } .home_banner_blog .column-content-1 .swiper-slide { height: 400px; } .home_banner_blog .column-content-1 img { object-fit: cover !important; width: 100%; height: 100%; } .home_banner_blog .column-content-2 { grid-area: text; display: flex; align-items: center; padding-block: 15px; padding-right: var(--calculatedPadding); } .home_banner_blog .column-content-2 { position: relative; padding-bottom: 0px !important; margin: 0px !important; } .home_banner_blog .column-content-2>* { margin-left: 0px; width: 100%; } .home_banner_blog .column-content-2 *:not(h2), .home_banner_blog .column-content-2 .html_section h2 { color: black !important; } .home_banner_blog .column-content-3 { grid-area: posts; width: 100% !important; padding-bottom: 30px; } .home_banner_blog .column-content-3 .latest_posts_wrapper { width: 100% !important; } .home_banner_blog .column-content-3 .blogpost_items_wrapper { height: 100%; overflow: auto; } } @media(max-width: 768px) { .home_banner_blog .column-content-1 { width: 100vw !important; min-width: 100vw !important; } .home_banner_blog .column-content-3 .heading_n_buttons { display: flex; flex-direction: column; } .home_banner_blog .column-content-3 .heading_n_buttons { display: flex; flex-direction: column; align-items: flex-start !important; gap: 0 } .home_banner_blog .column-content-3 .heading_n_buttons .view_more_blog { margin-right: auto; margin-left: 0px; } .home_banner_blog .columns-container { display: flex !important; flex-direction: column; } /* .home_banner_blog .column-content-2 { padding-inline: var(--calculatedPadding); } */ } @media(max-width: 500px) { .blogpost_items_wrapper { gap: 50px; } .blogpost_items_wrapper>.blogpost_item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .blogpost_items_wrapper>.blogpost_item>* { width: 100% !important; max-width: 100% !important; } } /* --> RESPONSIVE > HOME > WHY US [2] =========================================================================================================== */ @media(max-width: 1530px) { .html_section:has(.why_us) { background: url("/image/catalog/desikos-b2c/desikos_cut_assets/home/Shape.png"), linear-gradient(135deg, #0560d2 0%, #061f3e 100%) !important; background-repeat: no-repeat !important; background-position: 3% bottom !important; } } @media(max-width: 991px) { .html_section:has(.why_us) { flex-direction: column; gap: 50px; } .html_section:has(.why_us) .right_side .intro_text { padding-inline: 0px; } .html_section:has(.why_us)>.right_side { max-width: 100% !important; } } @media(max-width: 768px) { .html_section:has(.why_us) { padding-block: 80px 80px; background: var(--accent_1); } } @media(max-width: 550px) and (min-width: 476px) { .html_section:has(.why_us)>div { max-width: 100% !important; } .html_section:has(.why_us) .right_side .items_wrapper .item { display: flex; flex-direction: column; } .html_section:has(.why_us) .right_side .items_wrapper .item img { display: none; } } @media(max-width: 475px) { .html_section:has(.why_us) .right_side .items_wrapper { grid-template-columns: 1fr !important; } } /* --> RESPONSIVE > HOME > CATALOG [2] =========================================================================================================== */ @media(max-width: 1300px) { .html_section:has(.catalog) .catalog { grid-template-columns: 1fr 1fr; } } @media(max-width: 768px) { .html_section:has(.catalog) .catalog { grid-template-columns: 1fr !important; } .html_section:has(.catalog) .catalog .right_side { padding-top: 0px } } /* --> RESPONSIVE > HOME > TEXT & BANNERS [2] =========================================================================================================== */ @media(max-width: 1300px) { #common-home .text_and_banners_section>div { width: 100% !important; text-align: center; /* background: red; */ margin-bottom: 5px; } #common-home .text_and_banners_section { flex-direction: column !important; } .text_and_banners_section>div:not(.carousel) img { display: none; } .text_and_banners_section>div:not(.carousel) { padding: 50px calc((100vw - var(--maxContainerWidth))/2) 50px calc((100vw - var(--maxContainerWidth))/2) !important; } } @media(max-width: 1300px) and (min-width:991px) { #common-home .text_and_banners_section>div.carousel { margin-left: 5px; margin-right: 5px; width: calc(100% - 10px) !important; } } /* --> RESPONSIVE > HOME > BANNER & PRODUCTS [2] =========================================================================================================== */ @media(max-width: 1650px) { .banner_and_tabs_section>div[class*="banner"] { width: 50vw !important; min-width: 50vw !important; position: absolute; transform: translateY(-100px); } .banner_and_tabs_section>.module_product_tabs { transform: none !important; width: 70vw !important; margin-left: 30vw !important; } } @media(max-width: 991px) { .banner_and_tabs_section>div[class*="banner"] { width: 100vw !important; min-width: 100vw !important; position: absolute; transform: translateY(0px); display: none !important; } .banner_and_tabs_section>.module_product_tabs { transform: none !important; width: 100% !important; margin-left: 0px !important; } } /* @media(max-width: 768px) { #common-home .module_row_section .columns-container { display: flex !important; flex-direction: column; } #common-home .row_section .columns-container>div { width: 100%; } } */ /* --> RESPONSIVE > HOME > ABOUT US [2] =========================================================================================================== */ @media(max-width: 990px) { .html_section:has(.about_us_section) { padding-block: 15px 30px } .html_section:has(.about_us_section) .about_us_section { display: flex; flex-direction: column; gap: 30px; } } /* --> RESPONSIVE > PRODUCT PARTIAL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* @media(max-width:600px){ .product-thumb .price { display: flex; flex-direction: column; align-items: flex-start; } .product-thumb .price-old{ margin-left:0px !important; } .labels_container > div{ font-size: 9px; } .product-thumb .button-group button { width: 30px !important; height: 30px !important; display: flex; align-content: center; align-items: center; justify-content: center; } } @media(max-width:450px){ .row.featured-products-module .row{ display:block; } .row.special-products-module .row{ display:block !important } .product-layout{ width: 100% !important; } } */ @media(max-width: 991px) { .product-thumb .product-card-bot { display: flex; flex-direction: column; align-items: flex-start; height: fit-content !important; } } @media(max-width: 1024px) { .product-thumb { box-shadow: none !important; } .product-thumb .model_section { display: flex; /* flex-direction: column; */ gap: 5px !important; } .product-thumb> :not(.image) { padding-inline: 10px 10px; } .product-thumb { padding-bottom: 10px; } } /* --> RESPONSIVE > TOP CATEGORY PAGE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1250px) { .top_category_children_section { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media(max-width: 1200px) { .top_category_children_section { gap: 40px 20px; } } @media(max-width: 1024px) { .top_category_children_section { gap: 40px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media(max-width: 768px) { .top_category_children_section .child_category_item div { font-size: 18px; line-height: normal } } @media(max-width: 475px) { .top_category_children_section { grid-template-columns: 1fr !important } } /* --> RESPONSIVE > CATEGORY PAGE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> RESPONSIVE > CATEGORY PAGE > LAYOUT [2] =========================================================================================================== */ #content:has(#mfilter-content-container), #mfilter-content-container>div { padding: 0px !important; } @media(max-width: 991px) { #product-category>.row, #product-manufacturer>.row, #product-search>.row { gap: 20px; } #product-category>.row>#column-left, #product-manufacturer>.row>#column-left, #product-search>.row>#column-left { min-width: 225px !important; } } /* --> RESPONSIVE > CATEGORY PAGE > DESCRIPTION [2] =========================================================================================================== */ @media(min-width: 991px) { #mfilter-content-container .row.desc-top { display: none !important; } } @media(max-width: 991px) { #mfilter-content-container>div { display: flex; flex-direction: column; } #mfilter-content-container>div .row.desc-top { order: -99; } } .category_description.for_mobile { display: none; } @media(max-width: 768px) { .category_description.for_mobile { display: block !important; } } /* --> RESPONSIVE > CATEGORY PAGE > SORTING BAR [2] =========================================================================================================== */ @media(max-width: 991px) { /* #mfilter-content-container > div > .row:first-child{ display:flex; flex-wrap:wrap; justify-content: flex-end; display:none !important; } */ .row.product-list-grid { margin-top: 30px !important; } /* #mfilter-content-container > div > .row:first-child > div { width: 240px !important; max-width: 240px !important; padding:0px !important; float:none !important; } */ #mfilter-content-container>div>.row:first-child>.hidden+div { widtH: 100% !important; max-width: 100% !important; } #mfilter-content-container>div>.row:first-child>div>div { margin-bottom: 0px !important; } } /* @media(max-width: 768px){ #column-left{ display:block !important; } } */ /* --> RESPONSIVE > CATEGORY PAGE > SIDEBAR [2] =========================================================================================================== */ /* @media(max-width: 1190px){ #product-category #column-left #column-left{ position: relative !important; margin-top: 0px !important; top:0px !important; } #product-category > .row > #column-left{ min-width:300px; } #product-category > .row > #column-left > h2, #product-category > .row > #column-left > h2 + .row{ display:none !important; } } */ #mfilter-content-container .desc-top { display: none !important; } /* --> RESPONSIVE > CATEGORY PAGE > SIDEBAR > FILTERS [3] ------------------------------------------------------------- */ @media(max-width: 768px) { .filters_toggle { display: none !important; } /* .mfilter-box-83 .mfilter-free-button { margin-top: 320px !important; } */ /* .mfilter-box-83.mfilter-free-container { top: 0px !important; } */ .box-content.mfilter-content { padding-right: 0px !important; } .mfilter-box-83.mfilter-free-container, .mfilter-box-83.mfilter-free-container .scroll-wrapper { /* height: 100vh !important; */ /* max-height: 100vh !important; */ width: 280px !important; /* height: unset !important; */ /* min-height: unset !important */ height: 100%; } /* .mfilter-iscroll { height: 100vh !important; max-height: 100vh !important; } */ .mfilter-free-container { margin-left: -290px; } .mfilter-free-button { margin: 10px 0 0 281px; } .scroll-wrapper>.scroll-content { overflow: auto !important; height: unset !important; min-height: unset !important; margin-right: 0px; } .box-content.mfilter-content { overflow: visible !important; } .mfilter-content>ul>li { margin-bottom: unset !important } } /* --> RESPONSIVE > CATEGORY PAGE > PRODUCTS [2] =========================================================================================================== */ @media(max-width: 768px) { .row.product-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media(max-width: 450px) { .row.product-list-grid { grid-template-columns: 1fr !important; } } /* --> RESPONSIVE > CATEGORY LIKE (update) [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1250px) { .row.product-list-grid { gap: 20px !important; } .sorting_bar { justify-content: space-between; flex-wrap: wrap !important; } .sorting_bar .form-group { flex-wrap: wrap; display: flex; height: fit-content !important; } .sorting_bar .form-group label { height: fit-content; width: fit-content; } /* .sorting_bar .pagination_container { display: none !important; } */ } @media(max-width: 1100px) { .row.product-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .sorting_bar .form-group select { width: fit-content !important } } @media(max-width: 768px) { html:has(#mfilter-content-container) .breadcrumb { margin-bottom: 15px !important; } .category_description.for_mobile { display: block !important; position: relative; } .sorting_bar { margin-top: 25px } .sorting_bar .form-group label { padding-left: 0px !important; } } @media(max-width: 450px) { .row.product-list-grid { grid-template-columns: 1fr !important; } } @media(max-width: 425px) { .sorting_bar { gap: 20px !important; } .sorting_bar .form-group { flex-direction: column; gap: 5px !important; } .sorting_bar .form-group label { margin-bottom: 0px } } /* --> RESPONSIVE > CATEGORY LIKE (update) > FILTERS [3] ------------------------------------------------------------- */ /* --> RESPONSIVE > CATEGORY LIKE (update) > FILTERS > BUTTON */ .mfilter-box-83 .mfilter-free-button { transition: all .4s ease; right: 0px; left: unset !important; transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; -o-transition: all .4s ease; } .mfilter-box-83 .mfilter-free-button { border-radius: 0px 20px 20px 0px; -webkit-border-radius: 0px 20px 20px 0px; -moz-border-radius: 0px 20px 20px 0px; -ms-border-radius: 0px 20px 20px 0px; -o-border-radius: 0px 20px 20px 0px; background-color: var(--accent_3); border-color: var(--accent_3); } .mfilter-free-container:is(.mfilter-free-container-opening, .mfilter-free-container-opened) .mfilter-free-button { top: -30px !important; background-color: white !important; border-color: white !important } .mfilter-free-container:is(.mfilter-free-container-opening, .mfilter-free-container-opened) .mfilter-free-button i { color: black !important; } .mfilter-free-container:is(.mfilter-free-container-closing, .mfilter-free-container-closed) .mfilter-free-button { background-color: var(--accent_3) !important; border-color: var(--accent_3) !important; } /* --> RESPONSIVE > CATEGORY LIKE (update) > FILTERS > BACKDROP */ html:has(.mfilter-free-container-opening), html:has(.mfilter-free-container-opened), html:has(.mfilter-free-container-closing) { overflow: hidden !important; } html:has(.mfilter-free-container-opening) header:after, html:has(.mfilter-free-container-opened) header:after { opacity: .5 !important; visibility: visible !important; } /* --> RESPONSIVE > CATEGORY LIKE (update) > FILTERS > CONTAINER */ .mfilter-box-83.mfilter-free-container { top: 0px; width: calc(100% - 70px) !important; margin-left: 0px !important; max-width: 400px } .mfilter-box-83.mfilter-free-container .scroll-wrapper { width: 100% !important; } .mfilter-free-container, .mfilter-free-container.mfilter-free-container-closing { margin-left: 0px !important; transform: translateX(-100%) !important; transition: all .4s !important; -webkit-transform: translateX(-100%) !important; -moz-transform: translateX(-100%) !important; -ms-transform: translateX(-100%) !important; -o-transform: translateX(-100%) !important; } .mfilter-free-container:is(.mfilter-free-container-opening, .mfilter-free-container-opened) { transform: translateX(0px) !important; } /* --> RESPONSIVE > PRODUCT PAGE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* --> RESPONSIVE > PRODUCT PAGE > SPACING [2] =========================================================================================================== */ @media(max-width: 1024px) { #product-product #content>.row.text_n_banner, .product-product .row.specs, #product-product #content .extra_products.related, #product-product #content .extra_products.recently_viewed, .product-product .row.contact { margin-top: 50px; } .product-product .row.videos { padding-block: 50px } #product-product #content .extra_products.recently_viewed { padding-top: 65px; } } /* --> RESPONSIVE > PRODUCT PAGE > REQUEST BUTTONS [2] =========================================================================================================== */ .request_buttons_mobile { display: none !important; } @media(max-width: 1500px) { .request_buttons { display: none !important; } .request_buttons_mobile { /* display: flex !important; */ } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: TOP SECTION [2] =========================================================================================================== */ /* --> RESPONSIVE > PRODUCT PAGE > ROW: TOP SECTION > LAYOUT [3] ------------------------------------------------------------- */ @media(max-width: 1500px) { #product-product .row.default_infos .right_section { padding-right: 0px !important; } } @media(max-width: 1100px) { #product-product #content>.row.default_infos { flex-direction: column; gap: 30px; } #product-product #content>.row.default_infos>div { width: 100%; } #product-product .row.default_infos .right_section { padding-left: 0px !important; } } @media(max-width: 768px) { #product-product #content { margin-top: 0px !important; } #product-product .breadcrumb { margin-bottom: 0px !important; } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: TOP SECTION > IMAGES [3] ------------------------------------------------------------- */ @media(max-width: 768px) { #product-product .main_image_container a { padding-bottom: 0px !important; margin-bottom: 0px !important; } #product-product .thumbnails { flex-direction: column; gap: 10px } #product-product .additional_images_container { width: 100%; min-width: unset; gap: unset; flex-direction: unset; display: unset; } #product-product .additional_images_container .image-additional { width: 100%; } #product-product .additional_images_container .swiper-pagination { position: relative !important; top: unset; bottom: unset; margin-top: 10px; display: none; } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: TOP SECTION > IMAGES > NAVIGATION */ @media(max-width: 768px) { .additional_images_container .swiper-button-prev, .additional_images_container .swiper-button-next { display: none !important; } .additional_images_container .swiper-slide { border: none !important; } .additional_images_container .swiper-button-prev { position: absolute; top: 50%; bottom: calc(100% + 20px); left: 0px; transform: translateY(-50%) rotate(-180deg); height: fit-content; margin: 0px !important; } .additional_images_container .swiper-button-next { position: absolute; bottom: unset; top: 50%; right: 0px; left: unset; transform: translateY(-50%) rotate(0deg); height: fit-content; margin: 0px !important; } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: TOP SECTION > INFOS [3] ------------------------------------------------------------- */ @media(max-width: 768px) { #product-product .right_section .stepper_n_cart { margin-top: 18px; } } @media(max-width: 450px) { #product-product .right_section .price_section { flex-direction: column; padding-left: 22px; } } @media(max-width: 430px) { #product-product .right_section .stepper_n_cart { flex-direction: column; gap: 18px } #product-product .right_section .stepper_n_cart #button-cart { width: 100%; max-width: 100% !important; } } @media(max-width: 680px) { .store_availability_and_price_wrapper { flex-direction: column; width: 500px; max-width: 100%; margin-left: auto } #product-product .right_section .price_section { min-width: unset; } } @media(max-width: 600px) { .stock_and_model_wrapper { flex-direction: column !important; gap: 10px !important; } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: TEXT & BANNER [2] =========================================================================================================== */ @media(max-width: 1100px) { #product-product #content>.row.text_n_banner .left_side { padding-right: 40px; } } @media(max-width: 1024px) { #product-product #content>.row.text_n_banner .left_side .title { font-size: 35px; line-height: normal; white-space: normal } #product-product #content>.row.text_n_banner .left_side { padding-right: 20px !important; } #product-product #content>.row.text_n_banner .left_side>div { width: 100% !important; } } @media(max-width: 768px) { #product-product #content>.row.text_n_banner { flex-direction: column !important; gap: 20px; } #product-product #content>.row.text_n_banner .left_side { padding-right: 0px; } #product-product #content>.row.text_n_banner .right_side, .image_swiper_container { min-width: 100%; } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: SPECS [2] =========================================================================================================== */ @media(max-width: 600px) { .product-product .row.specs .top_side .specs_table .specs_row .specs_label { min-width: 100px !important; width: 100px !important; } } @media(max-width: 400px) { .product-product .row.specs .top_side .specs_table .specs_row { flex-direction: column !important; display: flex !important; gap: 0px; padding: 12px; } .product-product .row.specs .top_side .specs_table .specs_row>div { padding: 0px !important; } } @media(max-width: 550px) { .catalog_files_container { flex-direction: column } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: VIDEOS [2] =========================================================================================================== */ @media(max-width: 1024px) { .product-product .row.videos .video_container { gap: 20px } .product-product .row.videos .video_container { margin-top: 25px } } @media(max-width: 768px) { .product-product .row.videos .video_container { flex-direction: column; } } /* --> RESPONSIVE > PRODUCT PAGE > EXTRA PRODUCTS [2] =========================================================================================================== */ @media(max-width: 1024px) { #product-product #content .extra_products .section_title { margin-bottom: 5px; } } /* --> RESPONSIVE > PRODUCT PAGE > EXTRA PRODUCTS > RECENTLY VIEWED BG ISSUES [3] ------------------------------------------------------------- */ @media(max-width: 1590px) { #product-product .extra_products.recently_viewed { background-size: auto 35vw; } } @media(max-width: 1180px) { #product-product .extra_products.recently_viewed { background-size: auto 39vw; } } @media(max-width: 991px) { #product-product .extra_products.recently_viewed { background-size: auto 45vw; } } @media(max-width: 768px) { #product-product .extra_products.recently_viewed { background-size: auto 55vw; } } @media(max-width: 600px) { #product-product .extra_products.recently_viewed { background-size: auto 95vw; } } /* --> RESPONSIVE > PRODUCT PAGE > ROW: CONTACT [2] =========================================================================================================== */ @media(max-width: 1024px) { .product-product .row.contact { gap: 50px !important; padding-inline: 0px; } .product-product .row.contact .intro_text { margin-top: 25px; font-size: 20px; line-height: 1.4 } .product-product .row.contact .main_text_container { margin-top: 20px; } } @media(max-width: 768px) { .product-product .row.contact { flex-direction: column; gap: 45px !important } .product-product .row.contact .right_side { max-width: 100%; } } /* --> RESPONSIVE > SEARCH PAGE [2] =========================================================================================================== */ @media(max-width: 768px) { #product-search>.row { padding-left: var(--FullwidthContainerPadding_2); padding-right: var(--FullwidthContainerPadding_2); } #product-search #content_search>div.row { display: flex; flex-direction: column; align-items: flex-start !important; margin: 0px !important; } #product-search #content_search>div.row div { padding-left: 0px !important } } /* ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ ΛΛΛ /* !SECTION */ /* SECTION RESPONSIVE > CART PAGE VVV VVV VVV VVV VVV VVV VVV */ /* --> RESPONSIVE > CART PAGE > INTRO [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1200px) { #checkout-cart.container { width: 100% !important; } #cart-intro { justify-content: center; margin-top: 30px !important; } #cart-intro>div:not(.mid-section) { display: none !important; } } /* --> RESPONSIVE > CART PAGE > PRODUCTS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 768px) { #checkout-cart #cart-intro+form thead { display: none; } #checkout-cart #cart-intro+form table tbody td { display: flex; align-items: flex-start; flex-direction: column; justify-content: center; } #checkout-cart #cart-intro+form table tbody td a { white-space: normal !important; } #checkout-cart #cart-intro+form tbody tr { display: flex; padding: 25px 0px !important; flex-wrap: wrap; } /* image */ #checkout-cart #cart-intro+form tbody tr>td:nth-child(1) { width: 108px !important; } /* title */ #checkout-cart #cart-intro+form tbody tr>td:nth-child(2) { width: calc(100% - 110px) !important } /* quantity */ #checkout-cart #cart-intro+form tbody tr>td:nth-child(3) { width: calc(100% - 150px) !important; } #checkout-cart #cart-intro+form tbody tr>td:nth-child(3) .input-group.btn-block { justify-content: flex-start; } /* item price */ #checkout-cart #cart-intro+form tbody tr>td:nth-child(4) { display: none; } /* total price */ #checkout-cart #cart-intro+form tbody tr>td:nth-child(5) { width: 140px !important; } #checkout-cart #cart-intro+form tbody tr>td:nth-child(5)>* { text-align: right; width: 100%; display: block; } } @media(max-width: 400px) { #checkout-cart #cart-intro+form tbody tr>td:nth-child(3) { width: 100% !important; } #checkout-cart #cart-intro+form tbody tr>td:nth-child(3) .input-group.btn-block { justify-content: flex-end; padding-right: 10px } #checkout-cart #cart-intro+form tbody tr>td:nth-child(5) { width: 100% !important; padding-right: 15px; padding-top: 15px; } } /* --> RESPONSIVE > CART PAGE > OUTRO [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1650px) { #checkout-cart .bottom_section { width: 100vw !important; margin-left: -20px; } } @media(max-width: 1350px) { #checkout-cart .bottom_section { flex-direction: column !important; width: 100% !important; margin-left: 0px; } } @media(max-width: 870px) { #checkout-cart .bottom_section .input-group { display: flex !important; flex-direction: column; } #checkout-cart .bottom_section .input-group>*, #checkout-cart .bottom_section .input-group .form-control, #checkout-cart .bottom_section .input-group-btn input { width: 100% !important; display: block !important; } } @media(max-width: 650px) { #checkout-cart .bottom_section { padding: 20px; } #checkout-cart .bottom_section .cart-total-table tr .title { margin-right: 0px !important; } #checkout-cart .bottom_section .cart-total-table tr { display: flex; justify-content: space-between; justify-content: flex-end; } #checkout-cart .bottom_section .cart-total-table tr td { align-items: flex-start; } #checkout-cart .bottom_section .table.cart-total-table { margin-top: 35px; } } /* --> RESPONSIVE > CART PAGE > BOTTOM BUTTONS [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 680px) { #checkout-cart .bottom_section+.buttons { display: flex; flex-direction: column; align-items: center; } #checkout-cart .bottom_section+.buttons>div { margin: 7px 0px; } } /* --> RESPONSIVE > BLOG CENTRAL [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1190px) { .central_blog_page #content>.row>div { width: 33.3333% } } @media(max-width: 991px) { .central_blog_page #content>.row>div { width: 50% } } @media(max-width: 450px) { .central_blog_page #content>.row>div { width: 100% } } /* --> RESPONSIVE > BLOG PAGE [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media(max-width: 1350px) { #latestpost>.row .description { -moz-column-count: unset; column-count: unset; text-align: left; } } @media(max-width: 1190px) { #latestpost { display: flex; flex-direction: column; } #latestpost>.row { padding-left: 0px; } #latestpost>* { width: 100% !important; } #latestpost .image img { max-width: 100% !important; width: 500px !important; margin: 0 auto !important; } } .color-swatch { display: inline-block; width: 100%; height: 100%; vertical-align: middle; } .manufacturer { display: flex; align-items: center; justify-content: flex-start; } .manufacturer a { color: var(--accent_1); text-decoration: none; transition: color 0.3s ease; font-weight: bold; } .manufacturer a:hover { color: var(--accent_2); text-decoration: none; } #mfilter-box-83.fixed { position: fixed; top: 200px; z-index: 10; } .cc-color-override--1033558147 .cc-btn, .cc-btn-save-settings { /* background-color: #bd8b26 !important; */ color: #fff !important; } .cc-color-override--1033558147 .cc-settings { background-color: transparent !important; /* border-color: #bd8b26 !important; */ } .cc-highlight .cc-btn:first-child { /* border-color: #6D5117 !important; */ background-color: transparent !important; color: #fff !important; } @media(max-width: 768px) { #wishlist-count { right: -6px !important; top: -6px !important; } .mfilter-box>.box-heading { margin-top: 20px !important; /* padding-left: 18px; */ margin-inline: auto; width: fit-content; font-weight: bold; color: black; font-family: var(--font_2); } } @media (max-width: 768px) { /* .mfilter-free-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: white; z-index: 0; border-right: 2px solid var(--accent_2); } */ #product-product h1 { font-size: 20px; } .mfilter-free-button { left: 7px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } #content { min-height: unset !important; } } .ac-menu-revealed .mfilter-box-83 .mfilter-free-button { display: none !important; } /* --> RESPONSIVE > INFORMATION PAGES [1] %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .information-information #content img { max-width: 100% }