/* Fonts */ @import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@400;600;700&display=swap'); :root { --font-h1: 60px; --font-h2: 45px; --font-xl: 30px; --font-l: 28px; --font-m: 22px; --font-s: 20px; --font-xs: 16px; --font-gothic: "Gothic A1", serif; --lineheight-h1: 70px; --lineheight-h2: 55px; --lineheight-xl: 40px; --lineheight-l: 38px; --lineheight-m: 33px; --lineheight-s: 30px; --lineheight-xs: 26px; --primary: #293994; --primary-light: #A7AFD9; --secondary: #F88120; --black: #161616; --white: #ffffff; --dark-grey: #4A4A4A; --light-grey: #CACACA; --div-space: 100px; } * {box-sizing: border-box;} html,body {width: 100%;position: relative; min-height: 100vh; height: auto;} body { margin: 0;padding: 0;position: relative; font-size: var(--font-xs); line-height: var(--lineheight-xs); color: var(--black); font-family: var(--font-gothic);} ul{ margin: 0; padding: 0; list-style: none;} a { text-decoration: none;} h1 , .h1{ font-size: var(--font-h1); line-height: var(--lineheight-h1);} h2 , .h2, #products .products-section-title, .featured-products .products-section-title, .product-accessories .products-section-title , #custom-text h2 , .ph-recommend-products.featured-products > h2 , .title_blog, .title_blog a { font-size: var(--font-h2); line-height: var(--lineheight-h2); color: var(--black); text-transform: capitalize; font-weight: 700; margin-bottom: 24px; margin-top: 0;} h3, .h3 { font-size: var(--font-xl); line-height: var(--lineheight-xl);} p, a , .text-xs , #custom-text .page-content.page-cms ul, #custom-text p, .page-content.page-cms #custom-text ul { font-size: var(--font-xs); line-height: var(--lineheight-xs); color: var(--black);} a:focus, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { text-decoration: none; outline: none;} p:last-child { margin-bottom: 0;} .container { width: 1400px} img { max-width: 100%; height: auto;} .btn , .block_newsletter .subscribe-btn , .product-miniature .highlighted-informations a{ background-color: var(--secondary); padding: 16px 35px; text-transform: uppercase; color: var(--white); border: 1px solid var(--light-grey); height: 100%; border-radius: 50px; font-weight: 600; font-size: var(--font-xs); line-height: 20px; width: fit-content;} .outline-btn { background-color: transparent; border-color: var(--white);} .btn.outline-btn:hover{ background-color: var(--primary); border-color: var(--primary);} .block_newsletter .subscribe-btn {background-color: transparent; } .block_newsletter .subscribe-btn:hover { background-color: var(--secondary);} .btn:hover , .product-miniature .highlighted-informations a:hover, .btn:focus ,.btn-primary.focus, .btn-primary:focus , .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.btn-primary.dropdown-toggle.focus, .open>.btn-primary.dropdown-toggle:focus, .open>.btn-primary.dropdown-toggle:hover , .btn-primary.active, .btn-primary:active, .open>.btn-primary.dropdown-toggle { background-color: var(--primary); color: var(--white) !important;} .bg-blue{ background-color: #3164B4;} body input:-webkit-autofill {background-color: transparent;-webkit-box-shadow: 0 0 0px 1000px var(--white) inset !important;-webkit-text-fill-color: var(--black) !important;} .text-medium , #custom-text h2.text-medium { font-size: var(--font-m); line-height: var(--lineheight-m);} .slick-dots { display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: 56px;} .slick-dots li { line-height: 0; font-size: 0; outline: none;} .slick-dots li button { font-size: 0; line-height: 0; width: 7px; height: 7px; border: none; background-color: var(--black); padding: 0; border-radius: 50%;} .slick-dots li.slick-active button{ width: 52px; background-color: var(--secondary); border-radius: 30px; outline: none;} #wrapper { padding: var(--div-space) 0; background-color: var(--white); position:relative; } .footer-cta-section { position: relative; z-index: 1; padding-bottom: var(--div-space);} .footer-cta-section::after {content: ""; position: absolute; width: 100%;height: 316px;bottom: 0;left: 0; background-image: url("../images/wave-bg-bottom.png"); background-size: cover; z-index: -1;} .breadcrumb { margin-bottom: 0;} .breadcrumb li a span{ color: #414141; font-size: var(--font-xs); line-height: var(--lineheight-xs); font-weight: 500;} .breadcrumb li span { color: var(--primary); font-weight: 500;} #wrapper .breadcrumb li::after { content: ">"; color: #2A2A2A66;margin: 8px; font-size: var(--font-xs); line-height: var(--lineheight-xs); } .page-title-bar { display: flex; justify-content: space-between;align-items: center; margin-bottom: 40px; flex-wrap: wrap; gap: 30px;} .page-title-bar .h2 { margin-bottom: 0; text-transform: none;} .slick-track{ display: flex !important;} .slick-slide{ height: inherit !important;} .page-index .page-title-bar { display: none;} .page-index #wrapper {background-image: url("../images/banner-right.png") , url("../images/banner-left.png") , url("../images/product-bg-circle.png") , url("../images/custom-text-bg.png") , url("../images/custom-text-bg.png"); background-size: auto; background-repeat: no-repeat; background-position:100% -2%,left 50px,left 24% ,right 68% , left 80%} textarea { resize: none;} .page-not-found #search_widget { float: unset;} .page-not-found #search_widget form input { background: transparent; color: var(--black); border: 1px solid var(--light-grey); border-radius: 30px; font-size: var(--font-xs); line-height: var(--lineheight-xs);} .page-not-found #search_widget form input::placeholder { color: var(--black); font-size: var(--font-xs); line-height: var(--lineheight-xs);} .page-not-found #search_widget form .material-icons.search { top: 50%; transform: translateY(-50%);left: 10px; padding: 0; color: var(--black);} #main .page-content { padding: 0; margin: 0;} @media only screen and (max-width:1280px) { .btn, .block_newsletter .subscribe-btn { padding: 12px 35px;} } @media only screen and (max-width: 1024px) { :root { --font-h1: 50px; --font-h2: 38px; --font-xl: 28px; --font-l: 26px; --lineheight-h1: 60px; --lineheight-h2: 48px; --lineheight-xl: 38px; --lineheight-l: 36px; --div-space: 80px; } .block_newsletter .subscribe-btn { padding: 12px 20px;} } @media only screen and (max-width: 991px) { :root { --font-h1: 40px; --font-h2: 34px; --font-xl: 26px; --font-l: 24px; --font-m: 20px; --font-s: 18px; --lineheight-h1: 60px; --lineheight-h2: 44px; --lineheight-xl: 36px; --lineheight-l: 34px; --lineheight-m: 30px; --lineheight-s: 28px; } h2, .h2, #products .products-section-title, .featured-products .products-section-title, .product-accessories .products-section-title, #custom-text h2 { margin-bottom: 16px;} .page-title-bar { gap: 10px; margin-bottom: 24px;} #wrapper .breadcrumb li::after { margin: 4px;} } @media only screen and (max-width: 767px) { :root { --font-h1: 32px; --font-h2: 26px; --font-xl: 24px; --font-l: 22px; --lineheight-h1: 42px; --lineheight-h2: 36px; --lineheight-xl: 34px; --lineheight-l: 32px; --div-space: 50px; } .btn, .block_newsletter .subscribe-btn { padding: 10px 30px; float: unset !important; margin-top: 20px;} } @media only screen and (max-width: 575px) { .container{ width: 100%;} } /* Footer */ footer { background-color: var(--black); padding-top: var(--div-space) !important; position: relative; z-index: 1;} footer::after, footer::before { content: ""; position: absolute; background-repeat: no-repeat; background-size: contain; width: 364px; height: 100%; bottom: 0;mix-blend-mode: color-burn; z-index: -1;} footer::before { left: 0; background-image: url("../images/footer-left-bg.png");} footer::after { right: 0; background-image: url("../images/footer-right-bg.png");} footer .contact-info-wrap ul li:nth-child(2) img{filter: brightness(0) saturate(100%) invert(69%) sepia(33%) saturate(603%) hue-rotate(84deg) brightness(97%) contrast(90%);transform: translateY(-3px);} .copy_right { background-color: var(--primary); padding: 12px 0 ;} .copyright_text, .footer_web a , .footer_web{ color: var(--white); width: auto;} .footer_web { text-align: right;} .footer_web a:hover{color: var(--secondary);} .block_newsletter { background-color: transparent; max-width: 100%; border-bottom: 1px solid #3D3D3D; padding-bottom: 50px;} .block_newsletter #block-newsletter-label { color: var(--white); font-size: var(--font-m); line-height: var(--lineheight-m);} .subscription-wrap { display: flex; align-items: center;} .block_newsletter form .input-wrapper { width: 100%;} .block_newsletter form input[type=email], .block_newsletter form input[type=email]:focus{ background-color: transparent;border: none; border-bottom: 1px solid var(--white);color: var(--white); font-size: var(--font-xs); line-height: var(--lineheight-xs);padding: 0 0 10px 0; height: 100%;} .block_newsletter form input[type=email]:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px var(--black) inset !important; -webkit-text-fill-color: var(--white) !important;} .block_newsletter form input[type=email]::placeholder { font-size: 0; line-height: 0;} .footer-container { padding-top: 50px; padding-bottom: var(--div-space);} .footer-section , .footer-other{ display: flex;flex-wrap: wrap;justify-content: space-between;} .foo-link-title { color: var(--secondary); font-weight: 700;} .links .foo-menu { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px;} .footer-container li { margin-bottom: 0;} .foo-menu li a { color: var(--white); font-size: var(--font-xs); line-height: var(--lineheight-xs); font-weight: 500;} .foo-menu li a:hover { color: var(--secondary);} .footer-container li a { word-break: break-word;} .footer_copyright_section { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} .contact-info-wrap .block-contact-title { color: var(--secondary); font-size: var(--font-xs); line-height: var(--lineheight-xs);} footer .contact-info-wrap ul { display: flex; flex-direction: column; gap: 25px;} footer .contact-info-wrap a { color: var(--white); font-size: var(--font-xs); line-height: var(--lineheight-xs); width: calc(100% - 39px);} footer .contact-info-wrap a:hover { color: var(--secondary);} footer .contact-info-wrap ul li { display: flex; align-items: flex-start; gap: 15px; } footer .contact-info-wrap ul li img { margin-top: 4px; width: 24px; height: 24px; display: block;} .footer-logo-wrap { display: flex; flex-direction: column; gap: 30px;} footer .social-info p{ color: var(--secondary); font-size: var(--font-xs); line-height: var(--lineheight-xs);margin-bottom: 10px; font-weight: 700;} footer .social-info a { display: inline-block; transition: all 0.5s ease;} footer .social-info a:hover { transform: scale(1.1); transition: all 0.5s ease;} @media only screen and (max-width: 991px) { .links .foo-menu { grid-template-columns: repeat(1, 1fr);} /* .footer-container li { margin-bottom: 12px;} .footer-container li:last-child { margin-bottom: 0;} */ .block-contact { padding-left: 15px;} } @media only screen and (max-width: 767px) { footer::after, footer::before { content: none;} footer .block_newsletter { padding-top: 0;} .links .foo-menu { display: none;} footer .footer-logo-wrap {text-align: center; margin-bottom: 30px;} .footer-logo a{ display: inline-block; } .social-info { display: flex; flex-direction: column; align-items: center;} footer .collapse-icons , .block-contact .navbar-toggler .material-icons {width: 24px; height: 24px; display: flex ; align-items: center; justify-content: center;color: var(--white);} .block-contact .title .float-xs-right { width: 24px; height: 24px;} footer .title { display: flex; align-items: center; justify-content: space-between; border-color: var(--white); padding: 10px 0 !important;} footer .title::after { display: none;} footer .title .h3 { color: var(--white); margin-bottom: 0; text-transform: capitalize; font-size: var(--font-xs); line-height: var(--lineheight-xs);} .footer-container .links ul>li { padding: 0; border-bottom: none;} .footer-container .links ul>li a { color: var(--white);} .footer-container .links ul>li a:hover{ color: var(--secondary);} .footer-container .links ul , .footer-container .block-contact #contact-infos{ background-color: transparent; padding: 0; margin-top: 20px;} /* .block-contact .title.collapsed .collapse-icons .remove , .block-contact .title .collapse-icons .remove{ display: none!important;} */ .footer_copyright_section { flex-direction: column; justify-content: center;} .copyright_text, .footer_web a, .footer_web { text-align: center; } .footer-section, .footer-other { flex-direction: column;} .copy_right { padding: 10px 0 ; margin-bottom: 44px;} .subscription-wrap { flex-direction: column; align-items: flex-start;} footer .contact-info-wrap ul { gap: 12px;} footer .contact-info-wrap ul li img { width: 20px; height: 20px;} footer .contact-info-wrap a { width: calc(100% - 35px);} } /* custom text*/ .page-index #custom-text { background-color: transparent; padding: 0 0 var(--div-space) 0; border-radius: 0; margin-bottom: 0; position: relative; z-index: 1;} /* .page-index #custom-text::after { content: ""; position: absolute; width: 488px; height: 588px; background-image: url("../images/custom-text-bg.png"); background-size: contain; background-repeat: no-repeat;bottom: 0;right: 0; transform: translateY(50%) translateX(50%);z-index: -1;} */ .text-with-img-list { display: flex; flex-direction: column; gap: 30px;} .text-with-img-list .text-with-img-listitems { display: flex; gap: 30px;} .text-with-img-list .text-with-img-listitems:nth-child(2n) { flex-direction: row-reverse;} .text-with-img-list .text-with-img-listitems .img-wrap { width: 50%;} .text-with-img-list .text-with-img-listitems .text-wrap { width: 50%; border-radius: 20px;padding: 50px; display: flex;flex-direction: column; justify-content: center;} .text-with-img-list .text-with-img-listitems:nth-child(2n) .text-wrap { background-color: #F1F1F1;} #custom-text .text-with-img-list .text-with-img-listitems .bg-blue.text-wrap h2, .text-with-img-list .text-with-img-listitems .bg-blue.text-wrap h6 ,#custom-text .text-with-img-list .text-with-img-listitems .bg-blue.text-wrap p { color: var(--white); text-align: left;} .text-with-img-list .text-with-img-listitems .bg-blue.text-wrap h6 { font-size: var(--font-m); line-height: var(--lineheight-m); font-weight: 600;} .text-wrap-list { margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid var(--light-grey);} .text-wrap-list:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: none;} .vision-mission-text .text-wrap-list { max-width: 450px; margin: 0 auto 50px;} .vision-mission-text .text-wrap-list:last-child { margin-bottom: 0;} #custom-text img { object-fit: cover; border-radius: 20px;} @media only screen and (max-width: 1280px) { .text-with-img-list .text-with-img-listitems .text-wrap {padding: 30px;} .text-with-img-list .text-with-img-listitems , .text-with-img-list{ gap: 24px} } @media only screen and (max-width: 1024px) { .text-with-img-list , .text-with-img-list .text-with-img-listitems { gap: 15px} } @media only screen and (max-width: 767px) { .text-with-img-list .text-with-img-listitems , .text-with-img-list .text-with-img-listitems:nth-child(2n) { flex-direction: column;} .text-with-img-list .text-with-img-listitems .img-wrap , .text-with-img-list .text-with-img-listitems .text-wrap { width: 100%;} .text-with-img-list .text-with-img-listitems .text-wrap { padding: 20px;} .text-wrap-list { padding-bottom: 30px;} .vision-mission-text .text-wrap-list { max-width: 100%; margin-bottom: 30px;} } /* USP */ .advantages-section {padding-bottom: var(--div-space); } .advantages-section ul {display:grid; grid-template-columns: repeat(4,1fr); gap: 120px; background-color:#F1F1F1; border-radius: 20px; padding: 50px;} .advantages-section ul li{display: flex; flex-direction: row; justify-content: center;align-items: center; gap: 20px;} .advantages-section ul li img { width: 60px; height: 60px; object-fit: contain;} .advantages-section ul li span { width: calc(100% - 80px); display: block; font-weight: 600;} @media only screen and (max-width: 1360px) { .advantages-section ul { gap: 80px; padding: 40px 80px;} } @media only screen and (max-width: 1280px) { .advantages-section ul { gap: 40px; padding: 30px 50px;} } @media only screen and (max-width: 1024px) { .advantages-section ul { gap: 30px; padding: 30px;} .advantages-section ul li { gap: 15px} .advantages-section ul li img { width: 50px; height: 50px;} .advantages-section ul li span { width: calc(100% - 65px);} } @media only screen and (max-width: 991px) { .advantages-section ul { gap: 24px; padding: 24px;} .advantages-section ul li { flex-direction: column; align-items: center; text-align: center; justify-content: flex-start;} } @media only screen and (max-width: 767px) { .advantages-section ul { grid-template-columns: repeat(2,1fr);} .advantages-section ul li { flex-direction: row; text-align: left;} } @media only screen and (max-width: 575px) { .advantages-section ul { grid-template-columns: repeat(1,1fr); padding: 20px;} .advantages-section ul li img { width: 40px; height: 40px;} } /* Header */ #header .header-nav { border-bottom: none;} #header, #header .header-top { background-color: var(--primary);} #header .header-top { padding: 15px 0;} #header .menu .top-menu { display: flex; align-items: center; gap: 24px;} #header .menu .top-menu li { position: relative;} #header .menu .top-menu li a { color: var(--white); text-transform: capitalize; font-weight: 500; padding: 0;} #header .menu .top-menu li.current a, #header .menu .top-menu li a:hover,#header .call a:hover { color: var(--secondary);} .top-menu .sub-menu { width: auto; min-width: auto; margin: 0; top: 100% !important; background-color: var(--white); border-radius:0; box-shadow: 0 4px 10px rgba(0,0,0,0.2); padding: 0;} #header .top-menu .sub-menu .top-menu { align-items: flex-start; margin: 0;} #header .top-menu .sub-menu .top-menu li a { color: var(--black);} #header .menu .top-menu .sub-menu .top-menu { flex-direction: column; gap: 0;} #header .menu .top-menu .sub-menu .top-menu li { float: unset; width: 100%;display: block; margin: 0;border-bottom: 1px solid #f4f4f4;} #header .menu .top-menu .sub-menu .top-menu li:last-child { border-bottom: 0;} #header .menu .top-menu .sub-menu .top-menu li a {padding: 10px 20px;} #header .menu .top-menu .sub-menu .top-menu li a:hover, #header .menu .top-menu .sub-menu .top-menu li.current a { background-color: var(--primary-light); color: var(--primary);} .header-top-right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap;justify-content: space-between;} .call a, .enquiry a{ display: flex; align-items: center; gap: 8px;} #header .call a,#header .enquiry a { color: var(--white); font-weight: 700;} #header .call a img { filter: brightness(0) saturate(100%) invert(69%) sepia(33%) saturate(603%) hue-rotate(84deg) brightness(97%) contrast(90%); width: 28px; height: 28px;} #header .enquiry:hover { background-color: var(--secondary); border-color: var(--secondary);} .enquiry { border: 1px solid var(--light-grey); padding: 10px 14px 10px 16px; border-radius: 10px;} .searched_category , #category-dropdown {background-color: transparent;border-color: var(--light-grey); border-radius: 10px;border-right: 1px solid var(--light-grey); color: var(--white); width: 311px; padding: 12px 20px 12px 18px; background-image: url("../images/dropdown.svg"); background-position-y: 50%; background-position-x: 94%; background-repeat: no-repeat; appearance: none;} .searched_category option , #category-dropdown option{ color: var(--primary); font-size: var(--font-xs); line-height: var(--lineheight-xs); font-weight: 500;} select.searched_category option:hover, #category-dropdown option:hover , #category-dropdown option:focus, #category-dropdown option:focus-visible { background-color: var(--primary) !important; color: var(--white);} #category-dropdown:focus, #category-dropdown:focus-visible{ outline: none;} /* #searchbox { width: fit-content;height: fit-content;position: relative;} */ #searchbox .button-search { background-color: transparent; border: none;position: absolute; right: 20px;padding: 0;} .button-search span { display: block; width: 30px; height: 30px;} .button-search span svg { width: 100%;height: 100%;} #search_query_top ,header #search_widget form input { width: 100%; height: 100%; transition: all .5s ease-in-out; border-radius: 10px;background-color: var(--primary); color: var(--white); font-size: var(--font-l); line-height: var(--lineheight-l); min-width: auto; transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2); border-color: var(--primary); padding: 15px 50px 15px 20px;} #search_query_top:active, #search_query_top:focus , header #search_widget form input:active, header #search_widget form input:focus { color: var(--white); border-color: var(--primary); box-shadow: 0 4px 10px rgba(0,0,0,0.4);} #search_query_top::placeholder , header #search_widget form input::placeholder { color: var(--white); font-size: var(--font-l); line-height: var(--lineheight-l); opacity: 1;} #search_widget form .clear { display: none !important;} .header-search { position: relative;} .header-search .header-search__toggle { display: flex;align-items: center;justify-content: center; width: 46px; height: 46px; border: 1px solid var(--white); border-radius: 10px;cursor: pointer;} .header-search .header-search__toggle svg { width: 20px; height: 20px;} .header-search .header-search__toggle svg path { fill: var(--white);} .header-search .header-search__toggle .close{opacity: 1; display: none;} .header-search .search-container{display: none; position: fixed;top:0; left:0; width:100%; height: 100%;background-color: rgba(0,0,0,0.9); align-items: center;justify-content: center;} .search--opend .header-search .search-container { display: flex;} header .search-container #search_widget { width: 80%; min-width: unset;max-width: 100%;} header .search-container #search_widget .search { right: 10px; top: 50%; transform: translateY(-50%); color: var(--white); font-size: var(--font-l); line-height: var(--lineheight-l); padding: 0; width: auto; height: auto;} .search--opend-body { position: relative;} /* .search--opend-body::before {content: ""; position: fixed; width: 100%;height: 100%;background-color: rgba(0,0,0,0.2); left: 0; top: 0;} */ #header .header-top .menu{ padding-left: 0;} #header.fixed-header{ position:fixed; left: 0; top:0; width:100%;} .close-search { position: absolute; top: 30px; right: 30px;} .close-search .close { width: 30px; height: 30px; opacity: 1;} .close-search .close path { fill: var(--white);} .mobile-header-action-wrap { display: flex;align-items: center; gap: 12px;} #mobile_top_menu_wrapper .top-menu .navbar-toggler { display: flex; align-items: center;justify-content: center;width: 24px;height: 24px;} @media only screen and (max-width: 1280px) { .header-top-right { gap: 20px;} .searched_category, #category-dropdown { width: 200px;} #header .menu .top-menu { gap: 16px;} } /* @media only screen and (max-width: 1200px) { .mobile-menu { display: block !important;} } */ @media only screen and (max-width: 1199px) { #header .header-top { padding: 0;} #header .header-nav { padding: 15px 0;} #header .header-nav #menu-icon { margin: 0;} #header .header-top .header-top-right { display: none;} .mobile-menu { display: flex; align-items: center; justify-content: space-between; gap: 30px;} .searched_category, #category-dropdown { padding: 9px 25px 9px 9px; width: 100%;} #header .header-nav , #header .top-logo img{ max-height: 100%;} #header .header-nav #menu-icon .material-icons { color: var(--white); font-size: var(--font-h2);} #header #mobile_top_menu_wrapper .js-top-menu >.top-menu { padding: 0; margin-bottom: 0; display: flex; flex-direction: column; gap: 0; overflow: auto; max-height: calc(100vh - 132px);} #header #mobile_top_menu_wrapper .top-menu li a { color: var(--black); font-size: var(--font-xs); line-height: var(--lineheight-xs); border: none; text-transform: uppercase; padding: 10px; border-bottom: #F0F0F0 1px solid;} #header .top-menu .sub-menu .top-menu { display: flex; flex-direction: column; gap: 0;} #header #mobile_top_menu_wrapper .top-menu li .sub-menu { padding: 0;} #mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="1"]>li{width: 100%;} #mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="1"]>li a{text-transform: none !important; padding-left: 20px !important;} #search_query_top, header #search_widget form input ,#search_query_top::placeholder, header #search_widget form input::placeholder { font-size: var(--font-s); line-height: var(--lineheight-s);} } @media only screen and (max-width: 425px) { .header-search .header-search__toggle { width: auto; height: auto; border: none; border-radius: 0;} .searched_category, #category-dropdown { overflow: hidden !important; text-overflow: ellipsis;} #header .header-nav #menu-icon .material-icons { font-size: 24px; font-weight: normal;} } /* Hero banner */ .hero-banner-wrapper { display: flex; gap: 30px; padding-bottom: var(--div-space); position: relative; z-index: 1;} /* .hero-banner-wrapper::before { background-image: url("../images/banner-left.png"); left: 0;} .hero-banner-wrapper::after { background-image: url("../images/banner-right.png"); right: 0; background-position-x: right; background-position-y: -56px;} */ .hero-banner-wrapper .carousel { margin-bottom: 0; max-width: 875px;width:100%;} .hero-banner-wrapper .carousel .carousel-inner { height: 100%; border-radius: 10px; overflow: hidden;} .carousel .carousel-item figure { position: relative; height: 100%;} .carousel .carousel-item figure::after { content: ""; position: absolute;top: 0;left: 0; width: 100%; height: 100%;background: #00000070;} body .hero-banner-wrapper .carousel .carousel-item figure figcaption { position: absolute; left: 0 !important; top: 50%; transform: translateY(-50%); bottom: unset !important; padding: 30px;} .hero-banner-wrapper .carousel .carousel-inner li a{display: block; height: 100%; width: 100%;} .hero-banner-wrapper .carousel .carousel-item figure img { height: 100%; object-fit: cover;border-radius: 20px; } .banner-img-tile-list { display: flex; flex-direction: column; gap: 30px; overflow: hidden; } .banner-img-tile-list img { transition: all 0.5s ease-in-out; overflow: hidden; position: relative; width: 100%;height: 100%; max-height: 318px;} .banner-img-tile-list a { height: 100%;} .banner-img-tile-list a:hover .banner-img-tile-wrap img{ transform: scale(1.1); transition: all 0.5s ease-in-out;} .banner-img-tile-list .banner-img-tile-wrap { position: relative; overflow: hidden; border-radius: 20px; height: 100%;} .banner-img-tile-list .banner-img-tile-wrap::after { content: ""; position: absolute;top: 0;left: 0; width: 100%; height: 100%;background: #00000070;} .banner-img-tile-list .banner-img-tile-wrap h4 { font-size: var(--font-xl); line-height: var(--lineheight-xl); color: var(--white); margin-bottom: 0; border-bottom: 1px solid var(--white); padding-bottom: 12px; display: inline-block;} .banner-img-tile-list .banner-img-tile-wrap .banner-desc {position: absolute; padding:15px 15px 15px 50px; max-width: 355px;top: 50%; transform: translateY(-50%); z-index: 1;} .hero-banner-wrapper .carousel .carousel-item .caption { max-width: 555px; z-index: 1;} .hero-banner-wrapper .carousel .carousel-item .caption .banner-title { color: var(--white); font-size: var(--font-h1); line-height: var(--lineheight-h1); font-weight: 800;} .hero-banner-wrapper .carousel .carousel-item .caption .caption-description p { font-size: var(--font-m); line-height: var(--lineheight-m); font-weight: 600; color: var(--white);} .hero-banner-wrapper .carousel .carousel-inner li .banner-btn a{ background-color: var(--secondary); border: 1px solid #CACACA; border-radius: 50px; color: var(--white);padding: 18px 50px 18px 23px; width: fit-content; display: inline-block; text-transform: uppercase; font-size: var(--font-xs); line-height: var(--lineheight-xs);font-weight: 600; position: relative;} .hero-banner-wrapper .carousel .carousel-inner li .banner-btn a::after { content: ""; position: absolute; right: 23px; top: 22px; background-image: url("../images/arrow_white.svg");width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-position: center;} .hero-banner-wrapper .carousel .carousel-inner li .banner-btn a:hover { background-color: transparent;} .hero-banner-wrapper .carousel .direction { display: none;} .hero-banner-wrapper .carousel .carousel-indicators { display: flex; align-items: center; justify-content: center;gap: 5px; margin: 0;left: 0; width: 100%; transform: none;} .hero-banner-wrapper .carousel .carousel-indicators li { width: 37px; height: 5px; border-radius: 30px; background-color: var(--white); border: none;} .hero-banner-wrapper .carousel .carousel-indicators li.active { background-color: var(--primary);} .header_button_mobile { position: fixed; bottom: 0; width: 100%;left: 0; background-color: var(--primary); display: flex; align-items: center; border-top: 1px solid var(--white);} .header_button_mobile .enquiry { padding: 0; border: none; border-radius: none;} .header_button_mobile .enquiry , .header_button_mobile .call { width: 50%; padding: 8px 15px;} .header_button_mobile .call { border-right: 1px solid var(--white);} .header_button_mobile .call a,.header_button_mobile .enquiry a { justify-content: center;} @media only screen and (max-width: 1280px) { .hero-banner-wrapper { display: grid; grid-template-columns: repeat(2, 1fr);} .banner-img-tile-list , .hero-banner-wrapper .carousel{max-width: 100%;} .hero-banner-wrapper .carousel .carousel-inner li .banner-btn a { padding: 12px 50px 12px 18px;} .hero-banner-wrapper .carousel .carousel-inner li .banner-btn a::after { width: 14px;height: 14px; top: 18px;} .hero-banner-wrapper .carousel .carousel-item .caption .banner-title { font-size: var(--font-h2); line-height: var(--lineheight-h2);} .hero-banner-wrapper .carousel .carousel-item .caption .caption-description p { font-size: var(--font-s); line-height: var(--lineheight-s);} } @media only screen and (max-width: 1024px) { .carousel .carousel-item .caption { max-width: 100%;} .banner-img-tile-list .banner-img-tile-wrap .banner-desc { padding: 30px;} } @media only screen and (max-width: 991px) { .hero-banner-wrapper .carousel {width: auto;left: 0; margin: 0;padding: 0;} .hero-banner-wrapper .carousel .carousel-item .caption {text-align: left; margin: 0;} .hero-banner-wrapper , .banner-img-tile-list { gap: 15px;} .banner-img-tile-list .banner-img-tile-wrap .banner-desc { max-width: 100%;} .search-container form { width: 96%;} #search_query_top { width: 100%; font-size: var(--font-s); line-height: var(--lineheight-s);padding: 10px 40px 10px 10px;} #search_query_top::placeholder { font-size: var(--font-s); line-height: var(--lineheight-s);} .button-search span { width: 15px; height: 15px;} } @media only screen and (max-width: 767px) { .hero-banner-wrapper { grid-template-columns: repeat(1,1fr);} .banner-img-tile-list { display: grid; grid-template-columns: repeat(2,1fr);} .banner-img-tile-list .banner-img-tile-wrap h4 { font-size: var(--font-m); line-height: var(--lineheight-m);} .banner-img-tile-list .banner-img-tile-wrap .banner-desc { padding: 15px;} .hero-banner-wrapper .carousel .carousel-item .caption { padding: 30px 15px; max-width: 100%;position: unset; transform: unset;} .hero-banner-wrapper .carousel .carousel-item { background-color: var(--black); height: auto; border-radius: 20px; padding-bottom: 30px;} .hero-banner-wrapper .carousel .carousel-indicators { margin-bottom: 30px;margin-left: 0; bottom: 0; transform: none} .hero-banner-wrapper .carousel-indicators li { background-color: var(--black); border-radius: 50%;} .hero-banner-wrapper .carousel-indicators .active { background-color: var(--secondary); border-color: var(--secondary); width: 53px; border-radius: 10px;} .carousel .carousel-item figure::after { content: none; } } @media only screen and (max-width: 575px) { .banner-img-tile-list { grid-template-columns: repeat(1,1fr);} .banner-img-tile-list .banner-img-tile-wrap h4 { font-size: var(--font-s); line-height: var(--lineheight-s);} .hero-banner-wrapper .carousel .carousel-item .caption .banner-title { margin-bottom: 12px;} } @media only screen and (max-width: 425px) { .header_button_mobile .call a,.header_button_mobile .enquiry a { font-size: 14px; line-height: 20px;} } /* Product category */ .category-list { padding-bottom: var(--div-space); position: relative; z-index: 1;} /* .category-list::before { content: ""; position: absolute; width:555px; height: 582px; left: -21%; background-image: url("../images/product-bg-circle.png"); background-repeat: no-repeat; background-size: contain; bottom: var(--div-space);} */ .product-category-wrap { display: flex; align-items: flex-start; gap: 18px;} .product-category-slider { overflow: hidden; width: calc(100% - 478px);} .product-category-wrap .section-heading { width: 460px; text-align: left;} .product-category-slider .slick-list {margin: 0 -15px;} .product-category-slider .slick-slide { display: flex; flex-direction: column; gap: 30px; margin: 0 15px;} .product-category-slider .slick-slide > div {background-color: #F1F1F1; padding: 26px; border-radius: 20px;} .product-category-slider .slick-slide > div img { max-height: 282px; object-fit: cover; border-radius: 20px; overflow: hidden;width: 100%;object-position: center; aspect-ratio: 16/12;} .product-category-slider .slick-slide > div a { position: relative; display: block;} .category-icon-wrapper { position: absolute; background-color: var(--secondary);right: 0px;bottom: 0;width: 100%;max-width: 74px;height: 74px;border-radius: 20px;z-index: 2;background: #F1F1F1; } .category-icon-wrapper::before {content: "";position: absolute;bottom: 0%;right: 100%;width: 40px;height: 40px;border-radius: 50%;background: transparent;box-shadow: 20px 20px #F1F1F1;z-index: 0; display: block;} .category-icon-wrapper::after {content: "";position: absolute;bottom: 100%;right: 0%;width: 40px;height: 40px;border-radius: 50%;background: transparent;box-shadow: 20px 20px #F1F1F1;z-index: 0; display: block;} .product-category-slider .slick-slide > div .category-icon {position: relative;background-color: var(--secondary); width: 100%;max-width: 64px; height: 100%;max-height: 64px;margin: 0px;border-radius: 20px;display: flex;align-items: center;justify-content: center;z-index: 2;transform: translate(10px, 10px);} .product-category-slider .slick-slide > div a p { color: var(--black); font-size: var(--font-m); line-height: var(--lineheight-m); font-weight: 700;} @media only screen and (max-width: 1360px) { .product-category-wrap .section-heading { width: 400px;} .product-category-slider { width: calc(100% - 418px);} } @media only screen and (max-width: 1280px) { .product-category-slider .slick-slide > div { padding: 20px;} .product-category-wrap .section-heading { width: 380px;} .product-category-slider { width: calc(100% - 398px)} } @media only screen and (max-width: 1024px) { .product-category-wrap .section-heading { width: 300px;} .product-category-slider { width: calc(100% - 318px)} .product-category-slider .slick-slide > div img { max-height: 250px;} .product-category-slider .slick-slide > div { padding: 15px;} } @media only screen and (max-width: 991px) { .product-category-wrap { flex-direction: column; gap: 0;} .product-category-wrap .section-heading , .product-category-slider { width: 100%;} .product-category-wrap .section-heading { text-align: center;} } /* icon-box-with-title-wrap */ .icon-box-with-title-wrap { background-color: var(--black); padding: var(--div-space) 15px; position: relative; border-radius: 20px;} .icon-box-with-title-wrap .section-heading { color: var(--white); text-align: center; margin-bottom: 40px;} .icon-box-with-title-wrap::after , .icon-box-with-title-wrap::before {content: "";position: absolute; background-size: contain; background-repeat: no-repeat; width: 558px; height: 336px;} .icon-box-with-title-wrap::after { background-image: url("../images/dots-bg-right.svg"); right: 0; bottom: 0;} .icon-box-with-title-wrap::before { background-image: url("../images/dots-bg-left.svg"); left: 0; top: 0;} .icon-box-with-title-list {display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 74px; column-gap: 40px; position: relative; z-index: 1; max-width: 1160px; margin: 0 auto;} .icon-box-with-title-list .icon-box-with-title a { display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 25px} .icon-box-with-title-list .icon-box-with-title a:hover p, .icon-box-with-title-list .icon-box-with-title a:focus p{ color: var(--light-grey); text-decoration: none;} .icon-box-with-title-list .icon-box-with-title a:hover img { filter: brightness(0.7);} .icon-box-with-title-list .icon-box-with-title a:hover .icon-box-wrap { border-color: var(--light-grey);} .icon-box-with-title-list .icon-box-with-title a p { color: var(--white); font-size: var(--font-xs); line-height: var(--lineheight-xs); font-weight: 700; margin-bottom: 0; width: calc(100% - 133px);} .icon-box-with-title-list .icon-box-with-title a .icon-box-wrap { background-color: var(--primary); border-radius: 50%; border: 2px solid var(--white); width: 108px; height: 108px; display: flex; align-items: center; justify-content: center;} .icon-box-with-title-list .icon-box-with-title a .icon-box-wrap img { width: 70px; height: 70px; object-fit: contain;} @media only screen and (max-width: 1360px) { .icon-box-with-title-list { column-gap: 12px; row-gap: 50px;} .icon-box-with-title-list .icon-box-with-title a p{ width: calc(100% - 115px);} .icon-box-with-title-list .icon-box-with-title a .icon-box-wrap { width: 90px; height: 90px; padding: 10px;} .icon-box-with-title-list .icon-box-with-title a .icon-box-wrap img { width: 60px; height: 60px;} } @media only screen and (max-width: 1024px) { .icon-box-with-title-list .icon-box-with-title a { gap: 16px;} .icon-box-with-title-list .icon-box-with-title a p{ width: calc(100% - 106px);} .icon-box-with-title-list .icon-box-with-title a .icon-box-wrap img { width: 50px; height: 50px;} } @media only screen and (max-width: 991px) { .icon-box-with-title-list { grid-template-columns: repeat(3,1fr); row-gap: 30px;} .icon-box-with-title-list .icon-box-with-title a .icon-box-wrap { width: 80px; height: 80px; padding: 5px;} .icon-box-with-title-list .icon-box-with-title a .icon-box-wrap img { width: 45px; height: 45px; } .icon-box-with-title-list .icon-box-with-title a p { width: calc(100% - 96px);} } @media only screen and (max-width: 767px) { .icon-box-with-title-list { grid-template-columns: repeat(2, 1fr);} .icon-box-with-title-wrap::after, .icon-box-with-title-wrap::before { width: 100%; height: 100%;} .icon-box-with-title-wrap::after { background-position: bottom;} .icon-box-with-title-wrap::before { background-position: top;} } @media only screen and (max-width: 575px) { .icon-box-with-title-list .icon-box-with-title a .icon-box-wrap { width: 70px; height: 70px;} } @media only screen and (max-width: 475px) { .icon-box-with-title-list { grid-template-columns: repeat(1, 1fr); gap: 15px;} } /* get-in-touch-section */ .get-in-touch-section { background-image: url("../images/get-in-touch.png");background-size: cover;background-position: center;padding: var(--div-space) 15px; border-radius: 20px;position: relative; overflow: hidden;} .get-in-touch-section::after { content: ""; position: absolute; width: 100%;height: 100%;background: #06313FAB; left: 0;top: 0;} .get-in-touch-text-desc { position: relative; z-index: 1; color: var(--white);display: flex; align-items: flex-start; justify-content: space-between;gap: 70px; max-width: 1280px; margin: 0 auto;} .get-in-touch-text-desc p { color: var(--white); margin-bottom: 0;} .get-in-touch-text-desc .big-text p{ font-size: var(--font-l); line-height: var(--lineheight-l); color: var(--white);} .get-in-text-with-btn { display: flex; flex-direction: column; gap: 71px;} .btn-wrap { display: flex; align-items: center;gap: 40px; flex-wrap: wrap;} @media only screen and (max-width: 1024px) { .get-in-touch-text-desc { gap: 30px;} .get-in-text-with-btn { gap: 40px} .btn-wrap { gap: 30px} } @media only screen and (max-width: 860px) { .get-in-touch-text-desc { flex-direction: column;} .get-in-text-with-btn { gap: 30px;} } @media only screen and ( max-width: 767px) { .get-in-text-with-btn { gap: 24px;} } @media only screen and (max-width: 475px) { .get-in-text-with-btn , .btn-wrap { gap: 16px;} } /* Product list page */ .page-category .page-title-bar .h2 {color: var(--primary);font-size: var(--font-l); line-height: var(--lineheight-l); font-weight: 700;letter-spacing: 0.6px;} .page-category #search_filters_wrapper #search_filters ,#left-column #categories_block_left{ background-color: var(--white); border-radius: 10px; box-shadow: 0px 0px 15px 0px #00000014; padding: 20px 16px;} .page-category #search_filters_wrapper #search_filters .facet {padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #8989894D; padding-top: 0;} .page-category #search_filters_wrapper #search_filters .facet.selected .collapse { display: flex; flex-direction: column; gap: 14px;} .page-category #search_filters_wrapper #search_filters .facet.selected .facet-title::after{ background-image: url("../images/chevron-up.svg");} .page-category #search_filters_wrapper #search_filters .facet:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0;} .page-category #search_filters_wrapper #search_filters .facet .facet-title , .verticalblockcategories .title_block { font-size: var(--font-s); line-height: var(--lineheight-s); font-weight: 600; color: #3A3A3A; margin-bottom: 0; position: relative; display: block; width: 100%;} /* .page-category #search_filters_wrapper #search_filters .facet .facet-title::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%);right: 0; background-image: url("../images/chevron-down.svg"); background-size: contain; background-position: right; width: 14px; height: 7px;} */ .page-category #search_filters_wrapper #search_filters .facet .collapse , #categories_block_left .block_content ul{max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;margin-top: 20px;} #categories_block_left .block_content { overflow-x: hidden;} #categories_block_left .vertical li { padding: 0;} #categories_block_left .vertical ul ul { display: none;} #categories_block_left .vertical a{ background: transparent; color: #4A4A4A; font-size: var(--font-xs); line-height: var(--lineheight-xs);font-weight: 500; position: relative; border: none !important; padding: 0 0 0 24px;} #categories_block_left .vertical a::after {content: "" !important; position: absolute;width: 16px; height: 16px;border: 2px solid #696969; left: 0; top: 50%; transform: translateY(-50%);} .verticalblockcategories .selected { border: none; background: transparent !important;} .verticalblockcategories .selected::after {background: #00A8FF !important;border-color: #00A8FF !important;} .verticalblockcategories .selected::before { content: ""; position: absolute; background-image: url("../images/check-solid.svg"); background-size: contain; background-position: center; width: 16px;height: 16px;left: 0; top: 50% ; transform: translateY(-50%);background-repeat: no-repeat;z-index: 1;} .page-category #search_filters_wrapper #search_filters .facet .collapse::-webkit-scrollbar-track , #categories_block_left .block_content ul::-webkit-scrollbar-track {background-color: #F0F0F0; border-radius: 30px;} .page-category #search_filters_wrapper #search_filters .facet .collapse::-webkit-scrollbar , #categories_block_left .block_content ul::-webkit-scrollbar{width: 4px;background-color: #F0F0F0; border-radius: 30px;} .page-category #search_filters_wrapper #search_filters .facet .collapse::-webkit-scrollbar-thumb , #categories_block_left .block_content ul::-webkit-scrollbar-thumb{background-color: #ACACAC; border-radius: 30px;} .page-category #search_filters_wrapper #search_filters .custom-checkbox input[type=checkbox]+span { border: 2px solid #696969; vertical-align: unset; width: 16px; height: 16px; margin-right: 0;} .page-category #search_filters_wrapper #search_filters .facet .facet-label a {font-size: var(--font-xs); line-height: var(--lineheight-xs);color: #4A4A4A;font-weight: 500; margin-left: 0; margin-top: 0; width: 100%; display: block;} .page-category #search_filters_wrapper #search_filters .facet-label { display: flex; align-items: center; gap: 16px; position: relative;} .page-category #search_filters_wrapper #search_filters .facet .facet-label .custom-checkbox { line-height: 16px;top: 0;} .page-category #search_filters_wrapper #search_filters .custom-checkbox input[type=checkbox] { width: 16px; height: 16px; margin-top: 0;} .page-category #search_filters_wrapper #search_filters .custom-checkbox input[type=checkbox]+span .checkbox-checked { width: 16px; height: 16px; font-size: 16px; color: var(--white);} .page-category #search_filters_wrapper #search_filters .custom-checkbox input[type=checkbox]:checked+span { background-color: #00A8FF; border-color: #00A8FF;} .page-category #search_filters_wrapper #search_filters .clear-all-wrapper { margin-bottom: 16px;} .page-category #search_filters_wrapper #search_filters .clear-all-wrapper .btn{display: flex; align-items: center;gap: 4px;flex-direction: row-reverse; padding: 8px; font-size:12px; line-height: 18px; margin: 0;} .page-category #search_filters_wrapper #search_filters .clear-all-wrapper .material-icons { font-size: 12px; margin-right: 0;} .product-miniature .highlighted-informations a { display: block;} .product-miniature .thumbnail-container .product-thumbnail img { width: 100%;} .product-miniature .thumbnail-container { border: 1px solid var(--light-grey); padding: 20px; border-radius: 20px; margin-bottom: 0; display: flex;flex-direction: column; height: 100%;} .product-miniature .product-description { padding: 0; min-height: unset;} .product-miniature .product-title { margin: 0; font-size: var(--font-xs); line-height: var(--lineheight-xs); font-weight: 700; } .product-miniature .product-title a { font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; -webkit-box-orient: vertical;} .product-miniature p { border-top: 1px solid var(--light-grey); margin-top: 20px;margin-bottom: 0; padding-top: 20px; text-align: center; font-weight: 500; color: var(--black);} .product-miniature .thumbnail-top { margin-bottom: 20px;} .product-miniature .thumbnail-container:focus .highlighted-informations, .product-miniature .thumbnail-container:hover .highlighted-informations { top: 50% !important; transform: translateY(-50%); } .product-miniature .thumbnail-container .highlighted-informations{background-color: transparent; padding: 0; transform: translateY(100%); display: flex; align-items: center; justify-content: center; transition: 1s;} .product-miniature .thumbnail-container:focus .product-description::after, .product-miniature .thumbnail-container:hover .product-description::after { display: none;} #js-product-list-header, #js-product-list-header .block-category h1 { color: var(--primary); font-size: var(--font-l); line-height: var(--lineheight-l);} #js-product-list-header .block-category { margin-bottom: 0; min-height: unset; padding: 0;} #js-product-list .products { display: flex;row-gap: 30px; flex-wrap: wrap;} #js-product-list .products::after { display: none;} /* #js-product-list .products .product { width: 100%;} .page-category #js-product-list .products { grid-template-columns: repeat(3,1fr);} */ .product-miniature, .product-miniature .product { height: 100%; width: 100%; display: block;} .products-selection { display: flex; align-items: center;} .products-selection .total-products { padding-top: 0;} .products-selection .total-products p{ font-weight: 600;} body .products-selection .sort-by-row .sort-by ,body .sort-by-row .products-sort-order .select-title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; padding: 8px;} .products-sort-order .select-title { border-color: var(--light-grey); border-radius: 5px;} .active_filters { background-color: transparent; padding: 0;} .active_filters ul { display: flex; flex-wrap: wrap;} .active_filters .active-filter-title { color: var(--secondary);} .active_filters .filter-block { background-color: var(--primary); color: var(--white); font-size: 14px; line-height: 20px; border-radius: 30px;padding: 6px 8px; display: flex; align-items: center; width: fit-content ;} .active_filters .filter-block .close { color: var(--white); font-size: 13px; margin-top: 0; } .products-sort-order .dropdown-menu { width: calc(100% - 30px); background-color: var(--white); border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 1;} .products-sort-order .select-list { color: var(--black);} .products-sort-order .select-list:hover {background-color: var(--primary); color: var(--white); } .pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 30px; font-size: var(--font-xs); gap: 10px;} .pagination .col-md-6 { padding-left: 0;} .pagination-summary-text { font-size: var(--font-xs); line-height: var(--lineheight-xs); color: var(--black); font-weight: 600;} .pagination .page-list {background-color: var(--white); padding: 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px;} .pagination .page-list::after , .products-selection .sort-by-row::after { display: none;} .pagination .page-list li a{ background-color: var(--white); padding:8px ; border: 1px solid #F3F3F3; border-radius: 4px;} .pagination .page-list .current a, .pagination .page-list li:hover a{ background-color: var(--primary-light); color: var(--white);} .pagination .page-list li a , .pagination .current a , .pagination .spacer{ color: var(--black); font-size: 14px; line-height: 14px; vertical-align: middle;} .pagination .page-list li a[rel="prev"] , .pagination .page-list li a[rel="next"]{ font-size: 0; line-height: 0; display: block; padding: 3px;background-color: var(--primary);} .pagination .page-list li a[rel="next"]:hover,.pagination .page-list li a[rel="prev"]:hover { background-color: var(--primary-light);} .pagination .page-list li a[rel="next"] i { color: var(--white);} .pagination .next { float: unset;} .pagination>div:first-child { line-height: var(--lineheight-xs);} .products-selection .sort-by-row { justify-content: space-between;} #products .up { margin-bottom: 0;} #products .up .btn-secondary, #products .up .btn-tertiary { color: var(--white);} .page-category .container #left-column { position: sticky; top: 140px;} .page-category #js-product-list-footer .category_info ul { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px;} .page-category #js-product-list-footer .category_info ul li { position: relative; padding-left: 30px;} .page-category #js-product-list-footer .category_info ul li::before { content: ""; position: absolute; left: 0; top: 4px; background-image: url("../images/tick-blue.svg"); background-repeat: no-repeat; background-size: contain; height: 24px; max-width: 24px; width: 100%;} @media only screen and (max-width: 1024px) { .product-miniature .thumbnail-container { padding: 15px;} /*.product-miniature .product-description{padding: 0 15px 15px;}*/ .product-miniature .highlighted-informations a { padding: 10px 16px; font-size: 14px; line-height: 20px;} /* #js-product-list .products { grid-template-columns: repeat(3,1fr);} */ } @media only screen and (max-width: 991px) { .products-selection .total-products , .products-selection .total-products + .col-lg-7 { width: 100%;} #js-product-list .products .product, .page-category #js-product-list .products .product{ width: 50%;} } @media only screen and (max-width: 767px) { .products-selection .showing { display: none;} .filter-button .btn { padding: 0 !important;border: none; background-color: transparent;color: var(--black);} .products-sort-order .select-list { padding: 8px 10px; font-size: 14px; line-height: 20px;} #category #left-column #search_filters_wrapper { margin : 0} .page-category #search_filters_wrapper #search_filters .facet .facet-title::after { display: none;} #category #left-column #search_filters { border-top: 0;} #category #left-column #search_filters .facet:last-child { border-bottom: 0;} #category #left-column #search_filters .facet .h6 ,#category #left-column #search_filters .facet .navbar-toggler { padding: 0;} #category #left-column #search_filters .facet .navbar-toggler { width: 26px; height: 26px; display: block;} #category #search_filter_toggler { text-align: right; position: relative; padding-right: 26px !important;} #category #search_filter_toggler::after {content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-image: url("../images/sliders-solid.svg");background-repeat: no-repeat; background-size: contain; width: 20px; height: 20px;} #category #left-column #search_filter_controls button { padding: 8px 16px; font-size: 14px; line-height: 20px;} .btn-primary .material-icons, .btn-secondary .material-icons, .btn-tertiary .material-icons { margin-right: 4px;} #search_filter_controls .material-icons { font-size: var(--font-xs);} .page-category .container #left-column { position: unset;} .page-category #search_filters_wrapper #search_filters .facet .collapse, #categories_block_left .block_content ul { max-height: 150px;} .page-category #js-product-list-footer { margin-top: 30px;} .product-miniature .thumbnail-container { padding: 10px; } } @media only screen and (max-width: 475px) { #js-product-list .products .product, .page-category #js-product-list .products{padding: 0 15px;} #js-product-list .products .product, .page-category #js-product-list .products .product { width: calc(50% - 7.5px); padding: 0;} #category #search_filter_toggler { font-size: 14px; line-height: 20px;} } @media only screen and (max-width: 425px) { .pagination { flex-direction: column;} #products .up .btn-secondary, #products .up .btn-tertiary { font-size: 0; line-height: 0; padding: 10px;} } /* top reated products */ .featured-products { padding-bottom: var(--div-space); display: flex; align-items: center; justify-content: center; flex-direction: column;} .featured-products .all-product-link {padding: 20px 30px;color: var(--black); font-weight:700;text-transform: uppercase; border: 1px solid var(--secondary);border-radius: 30px; font-size: var(--font-xs); line-height: 22px; float: unset !important; margin-bottom: 0; margin-top: 56px;} .featured-products .all-product-link i { display: none;} .featured-products .all-product-link:hover { background-color: var(--secondary); color: var(--white);} .featured-products .products { row-gap: 30px;} .featured-products .products::after { display: none;} /* Product detail page */ #product #content { max-width: 100%;} .product-cover { border-radius: 20px; overflow: hidden; border: 1px solid var(--primary); border-radius: 20px; padding: 20px;} .product-cover picture{ display: block;} .js-product-container + .ph-recommend-products{ padding-top: var(--div-space);} .ph-recommend-products.featured-products { margin-top: 0;} .category_title { text-transform: uppercase; margin-bottom: 50px;} .title-with-img-wrap{display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between;gap: 10px; flex-wrap: wrap; margin-bottom: 10px;} .title-with-img-wrap h1 { font-size: var(--font-l); line-height: var(--lineheight-l); color: var(--primary); font-weight: 700; text-transform: capitalize; margin-bottom: 0;} .title-with-img-wrap .product-manufacturer a { display: block;} .title-with-img-wrap .manufacturer-logo { max-height: 51px; object-fit: contain;} .product-code { margin-bottom: 24px;} .product-code p{ font-size: var(--font-s); line-height: var(--lineheight-s); color: #2E2E2E; letter-spacing: 0.6px; font-weight: 600;} .product-code p span ,.product-information .product-description p , .tabs .tab-pane p { color: #797979;} .product-information .product-description { margin-bottom: 60px;} .product-information .product-description p ,.tabs .tab-pane p{ font-weight: 500; letter-spacing: 0.6px;} .product-detail-wrap .product-information .btn-primary .material-icons{display: none; margin: 0;} .product-detail-wrap , .product-img-wrap { position: sticky; top: 100px;} .page-product .social-sharing{ display: none;} .product-images>li.thumb-container .thumb.selected, .product-images>li.thumb-container .thumb:hover { border-color: var(--secondary);} .ph-recommend-products button.slick-arrow { background-color: var(--primary-light); border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.2); left: 0;} .ph-recommend-products button.slick-arrow.slick-next { right: 0;} .ph-recommend-products button.slick-arrow::before { background-size: contain; background-position: center;background-repeat: no-repeat; width: 20px; height: 20px; border: none; transform: rotate(0) translate(-50% , -50%);} .ph-recommend-products .slick-next:before {background-image: url("../images/chevron-right-solid.svg");} .ph-recommend-products .slick-prev:before { background-image: url("../images/chevron-left-solid.svg");} .page-product .js-product-container + .tabs { padding: var(--div-space) 0; } .page-product .featured-products { padding-bottom: 0;} .tabs .nav-tabs .nav-link.active { color: var(--primary); border: none;} .tabs .nav-tabs .nav-link { font-size: var(--font-l); line-height: var(--lineheight-l); color: var(--primary-light); font-weight: 700; padding: 0;} .tabs .nav-tabs { border: none; margin-bottom: 40px;} .page-product .tabs { margin-top: 0;} .tabs .tab-pane.active { display: block;} .tabs .tab-pane { padding-top: 0; border: 1px solid var(--primary-light); border-radius: 20px; padding: 24px;} .fancybox-wrap { width: 50% !important; top: 50% !important; left: 50% !important; transform: translate(-50% , -50%);} .fancybox-wrap .fancybox-inner { width: 100% !important; height: 100% !important;} .fancybox-wrap .fancybox-inner #send_AAP_form { max-width: 100%; margin-bottom: 0;} .fancybox-skin { background-color: var(--primary-light); padding: 8px !important;} .send_AAP_form_content { padding: 0;} .send_AAP_form_content .form_container .form-group:last-of-type { margin-bottom: 0;} .send_AAP_form_content .form-control-label { padding-top: 0; font-size: var(--font-xs); line-height: var(--lineheight-xs); font-weight: 700;color: var(--black);} .send_AAP_form_content .form-control { background-color: transparent; color: var(--black); border-color: var(--primary-light);font-size: var(--font-xs); line-height: var(--lineheight-xs);} .send_AAP_form_content .form-control:focus { outline: none; border: 1px solid var(--secondary);} .send_AAP_form_content_button { padding: 0;border: none; margin-top: 30px;} #send_AAP_form .send_AAP_form_content_button .submit { float: unset;} #send_AAP_form textarea { height: 150px;} .fancybox-wrap .fancybox-inner #send_AAP_form .card-block { padding: 20px; display: flex; flex-direction: column;} .fancybox-wrap .fancybox-inner #send_AAP_form .card-block .alert { font-size: var(--font-xs); line-height: var(--lineheight-xs); font-weight: 700; padding: 12px; border: none;} @media only screen and (max-width: 991px) { .product-information .product-description { margin-bottom: 30px;} .tabs .nav-tabs { margin-bottom: 20px;} .tabs .tab-pane { padding: 15px;} .fancybox-wrap { width: 80% !important;} } @media only screen and (max-width: 767px) { .product-detail-wrap , .product-img-wrap {position: unset;} .product-img-wrap { margin-bottom: 30px;} .tabs .nav-tabs .nav-link { font-size: var(--font-m); line-height: var(--lineheight-m);} .fancybox-wrap .fancybox-inner #send_AAP_form { background-color: var(--white);} .fancybox-wrap { width: 90% !important;} .fancybox-skin .fancybox-close { top: -14px; right: -14px;} .fancybox-wrap .fancybox-inner #send_AAP_form .card-block { padding: 10px;} .send_AAP_form_content .form-control { padding: 8px;} } @media only screen and (max-width: 475px) { .send_AAP_form_content .form-control { font-size:14px; line-height: 20px;} .send_AAP_form_content_button { margin-top: 20px;} } /*Inner pages */ .page-content.page-cms { padding: 0; margin-bottom: 0;} .pagenotfound .js-content-wrapper .page-header .h2, .page-pagenotfound .js-content-wrapper .page-header .h2{text-align: center;} /* Serach page */ .page-search #js-product-list .page-not-found{ margin-bottom: 0; padding: 0; text-align: center; max-width: 800px;} #pagenotfound .page-not-found h4, #products .page-not-found h4{ font-size: var(--font-l); line-height: var(--lineheight-l); color: var(--black); text-align: center;} .page-not-found p { text-align: center;} #pagenotfound #main .page-content, #products #main .page-content { margin-bottom: 0; padding: 0;} #pagenotfound .page-not-found, #products .page-not-found { margin: 0 auto;} .page-search #js-product-list .page-not-found p { font-weight: 700; color: var(--primary); margin-bottom: 0;} .featured-products .products .product , .page-search #js-product-list .products .product { width: 25%;} @media only screen and (max-width: 991px) { .featured-products .products .product , .page-search #js-product-list .products .product { width: 33.33%;} } @media only screen and (max-width: 767px) { .featured-products .products .product , .page-search #js-product-list .products .product { width: 50%;} } @media only screen and (max-width: 475px) { /* .featured-products .products .product , .page-search #js-product-list .products .product { width: 100%;;} */ #js-product-list .products { gap: 15px;} } /*News section */ .icon-box-with-title-wrap + .ets_block_latest { padding: var(--div-space) 0 0 0;} .block_header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 40px;} .block_header .block-title { max-width: 567px;} .block_header .block-title p { font-size: var(--font-m); line-height: var(--lineheight-m); font-weight: 600;} /* Contact Page */ .contact-us-page { display: flex; gap: 30px;} .page-contact .page-content { padding: 0; margin-bottom: 0;} .contact-form-wrapper .contact-form { padding: 20px; background-color: var(--white); border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);} .map-wrap { width: 50%;} .map-wrap iframe { width: 100%;height: 100%; border-radius: 20px; overflow: hidden;} .contact-form-wrapper { width: calc(100% - 50% - 30px);} .contact-form-wrapper form .form-fields { display: flex;flex-wrap: wrap; column-gap: 30px; row-gap: 15px; width: 100%;} .contact-form-wrapper form .form-group.row { margin: 0; display: flex; flex-direction: column;} .contact-form-wrapper .form-footer { background-color: transparent; padding-top: 0 !important;} .contact-form-wrapper form .contact-name , .contact-form-wrapper form .contact-phone { width: calc(50% - 30px /2);} .contact-form-wrapper form .contact-email ,.contact-form-wrapper form .contact-msg { width: 100%;} .contact-form-wrapper form .form-control { background-color: transparent; border: 1px solid var(--light-grey); border-radius: 20px; color: var(--black);} .contact-form-wrapper form .form-control-label {text-align: left; padding: 0; color: var(--black); font-size: var(--font-xs); line-height: var(--lineheight-xs); font-weight: 700; width: 100%;} .contact-form-wrapper form .form-control::placeholder { color: var(--black); font-size: var(--font-xs); line-height: var(--lineheight-xs);} .contact-form-wrapper form .form-control:focus, .contact-form-wrapper form .form-control:focus-visible { outline: none; border: 1px solid var(--secondary);} .contact-form-wrapper form .col-md-9 { width: 100%; padding: 0;} .alert-danger { padding: 10px; font-size: var(--font-xs); line-height: var(--lineheight-xs);} .page-contact .contact-info-wrapper { padding-top: var(--div-space);} .page-contact .contact-info-wrapper ul{ display: flex;gap: 30px; flex-wrap: wrap; justify-content: center;} .page-contact .contact-info-wrapper ul li { background-color: var(--white); padding: 20px; border-radius: 20px; display: flex; flex-direction: column; align-items: center;gap: 30px;box-shadow: 0 4px 10px rgba(0,0,0,0.2); width: calc(33.33% - 60px / 3);} .page-contact .contact-info-wrapper ul li img { filter: brightness(0); width: 40px; height: 40px;} .page-contact .contact-info-wrapper ul li p { text-align: center;} .page-contact .contact-info-wrapper ul li a { font-size: 18px; line-height: 28px; text-align: center; word-break: break-word;} .page-contact .contact-info-wrapper ul li a:hover { color: var(--primary);} @media only screen and (max-width: 1024px) { .contact-form-wrapper form .form-fields { column-gap: 15px;} .contact-form-wrapper form .contact-name, .contact-form-wrapper form .contact-phone { width: calc(50% - 15px /2);} .contact-us-page { gap: 15px;} .contact-form-wrapper { width: calc(100% - 50% - 15px);} .page-contact .contact-info-wrapper ul { gap: 15px;} .page-contact .contact-info-wrapper ul li { gap: 15px; width: calc(33.33% - 30px /3);} .page-contact .contact-info-wrapper ul li a { font-size: var(--font-xs); line-height: var(--lineheight-xs);} .page-contact .contact-info-wrapper ul li img { width: 30px;height: 30px;} } @media only screen and (max-width: 991px) { .contact-form-wrapper form .form-fields { flex-direction: column;} .contact-form-wrapper form .contact-name , .contact-form-wrapper form .contact-phone { width: 100%;} } @media only screen and (max-width: 767px) { .map-wrap , .contact-form-wrapper { width: 100%;} .contact-us-page { flex-direction: column-reverse;} .map-wrap iframe { aspect-ratio: 16/10;} .page-contact .contact-info-wrapper ul { grid-template-columns: repeat(2,1fr);} .page-contact .contact-info-wrapper ul li { padding: 15px; width: calc(50% - 15px /2);} } @media only screen and (max-width: 425px) { .page-contact .contact-info-wrapper ul li { width: 100%;} } /* Brand Page */ #manufacturer #main ul { display: grid; grid-template-columns: repeat(5,1fr); gap: 30px;} #manufacturer #main ul .brand { background-color: var(--white); box-shadow: 0 4px 10px rgba(0,0,0,0.2); border-radius: 20px; border: 1px solid var(--light-grey); margin: 0; width: 100%; padding: 10px 20px; display: flex; flex-direction: column;} #manufacturer #main ul .brand-img { max-width: 200px; width: 100%; margin: 0 auto;} #manufacturer #main ul .brand-img a { display: block;} .brand-infos p { border-top: 1px solid var(--light-grey); padding-top: 10px;} .brand-infos p a { color: var(--black); font-size: 18px; line-height: 28px; display: inline-block; font-weight: 700; text-transform: uppercase;} .brand-infos p a:hover { color: var(--primary);} @media only screen and (max-width: 1280px) { #manufacturer #main ul { grid-template-columns: repeat(4,1fr);} } @media only screen and (max-width: 1024px) { #manufacturer #main ul { column-gap: 15px; row-gap: 30px;} } @media only screen and (max-width: 991px) { #manufacturer #main ul { grid-template-columns: repeat(3,1fr);} } @media only screen and (max-width: 767px) { #manufacturer #main ul { grid-template-columns: repeat(2,1fr);} } @media only screen and (max-width: 475px) { #manufacturer #main ul { grid-template-columns: repeat(1,1fr); gap:15px} } /* Brand section with tabs */ .section-heading { max-width: 555px; margin: 0 auto; text-align: center; margin-bottom: 44px;} .brand-section h2{ text-align: center; text-transform: uppercase;} .section-heading p { font-size: var(--font-m); line-height: var(--lineheight-m); font-weight: 600;} .brand-list .tabs {margin-top: 0; padding: 0; display: flex;justify-content: center; margin-bottom: 40px; gap: 50px; overflow-y: auto;} .tabs .tab-button {background-color: transparent; padding: 0 14px 20px 14px; border: none;font-size: var(--font-m); line-height: var(--lineheight-m);text-transform: uppercase;font-weight: 600; color: var(--black); cursor: pointer; position: relative;} .tabs .tab-button::after { content: ""; position: absolute; background-color: var(--secondary); height: 2px; width: 100%;transition: all 0.5s ease-in-out; transform: scale(0);left: 0; bottom: 0;} .tabs .tab-button.active::after, .tabs .tab-button:hover::after, .tabs .tab-button:focus::after { transform: scale(1); transition: all 0.5s ease-in-out;} .tabs .tab-button:focus { outline: none;} .brand-list .tab-content { display: none;} .brand-list .tab-content.active {display: block;} .sub-brand-list .slick-list { margin: 0 -15px;} .sub-brand-list .slick-track .sub-brand { margin: 0 7.5px;} .sub-brand-list .slick-track .sub-brand a{background-color: var(--white); border-radius: 10px;display: flex; align-items: center;justify-content: center;padding: 10px;max-height: 100px; height: 100%;} .sub-brand-list .slick-track .sub-brand img {max-height: 80px; max-width: 100%; border-radius: 5px;} @media only screen and (max-width: 991px) { .brand-list .tabs { gap: 30px;} .tabs .tab-button { font-size: var(--font-s); line-height: var(--lineheight-s); padding: 0 10px 15px 10px;} } @media only screen and (max-width: 767px) { .tabs .tab-button { font-size: var(--font-xs); line-height: var(--lineheight-xs);} .sub-brand-list .slick-track .sub-brand { margin: 0 8px;} .sub-brand-list .slick-list { margin: 0 -8px;} .brand-list .tabs { margin-bottom: 26px;} .section-heading { margin-bottom: 24px;} } @media only screen and (max-width: 425px) { .brand-list .tabs { display: inline-flex; align-items: center; flex-direction: column; gap: 10px; width: 100%;} } /*Blogs*/ .ets-blog-wrapper.ets-blog-wrapper-blog-list{ margin-bottom: 0;} .ets-page-home .ets-blog-list { display: grid; grid-template-columns: repeat(3,1fr);gap: 30px} .ets-page-home .ets-blog-list::after { display: none;} .ets-blog-list li { padding: 0; margin: 0;} .ets-blog-list .post-wrapper , .ets-blog-related-posts-list-li-wrap { display: flex; flex-direction: column;background: var(--white);box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);height: 100%;border-radius: 20px;overflow: hidden; border: 1px solid #C2C2C2;} .ets_blog_layout_large_list .ets-blog-list:not(.blog-main-page) li .ets_item_img, .ets_blog_layout_list .ets-blog-list li .ets_item_img { width: 100%;} .ets_item_img img { aspect-ratio: 16/9; object-fit: cover; object-postion: center;} .ets_blog_layout_large_list .ets-blog-list:not(.blog-main-page) li .ets-blog-wrapper-content, .ets_blog_layout_list .ets-blog-list li .ets_item_img + .ets-blog-wrapper-content , .related-blog-desc-wrap ,.post-wrapper .ets-blog-wrapper-content , .ets-blog-latest-post-content{ width: 100%; padding: 20px; float: unset;} .ets_title_block { font-size: var(--font-s); line-height: var(--lineheight-s); color: var(--black);margin-top: 0;padding-top: 0;} body .ets_title_block:hover { color: var(--primary);} .ets-blog-list .post-wrapper .blog_description p {font-size: var(--font-xs); line-height: var(--lineheight-xs); display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; overflow: hidden;} .read_more { border-bottom: 0; font-style: normal; font-size: var(--font-xs); line-height: var(--lineheight-xs); color: var(--secondary); font-weight: 700; position: relative; padding-right: 20px; transition: all 0.5s ease;} .read_more::after { content: ""; position: absolute;background-image: url("../images/arrow-right-solid-orange.svg"); background-repeat: no-repeat;background-size: contain; right: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 100%; background-position: center; transition: all 0.5s ease;} .read_more:hover , .ets_blog_ltr_mode a.read_more:hover, .ets-blog-wrapper-detail a.read_more:hover, .ets-blog-like-span:hover, .blog-main-page a:hover, .ets_button_backtolist:hover, .ets-block-comment-report:hover { color: var(--secondary);} .read_more:hover::after {transform: translate(8px , -50%); transition: all 0.5s ease;} .post-tag { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #C2C2C2;margin-bottom: 20px; padding-bottom: 20px;} .ets-blog-latest-post-content .post-tag img { width: 24px; height: 24px;} .ets-blog-latest-post-content .post-tag p { font-weight: 500;} .category_tag { font-weight: 600;} /* Single blog */ #ets_blog_page .js-content-wrapper .left-column { padding: 0;} #ets_blog_page .ets-page-home .ets-blog-list { padding: 0 15px; display: flex; flex-wrap: wrap; justify-content: center;} .ets_blog_layout_grid .ets-blog-list li { width: calc(33.33% - 60px /3); padding: 0;} .ets-blog-wrapper .ets_title_block { margin-top: 0;} .ets-blog-wrapper-detail { padding: 0; margin: 0;} .ets-blog-wrapper-comment , .extra_tag_cat { display: none;} .ets-blog-wrapper-detail .ets_blog_img_wrapper { margin-bottom: 30px;} .ets-blog-wrapper-detail .ets_blog_img_wrapper img { border-radius: 20px;} .ets-blog-latest-toolbar .author-block{ display: none;} .post-details { padding-bottom: 50px;} .post-details .ets-blog-latest-toolbar { font-size: var(--font-xs); line-height: var(--lineheight-xs); float: none; display:block; margin-bottom: 0;} .post-details .ets-blog-latest-toolbar .post-date { display: flex; align-items: center; gap: 10px; float: none; margin: 0;} .post-details .ets-blog-latest-toolbar .post-date span { font-size: var(--font-xs); line-height: var(--lineheight-xs); color: var(--black);} .post-date .be-label { width: 30px;} .blog-extra {margin-bottom: 24px;} .post-date .be-label::before { font-size: 24px; line-height: 24px; color: var(--black);padding-right: 0;} .blog_description p , .blog_description { font-size: var(--font-xs); line-height: var(--lineheight-xs); color: var(--black);} .blog_description p a, .blog_description a { color: var(--primary);} .blog_description p a:hover, .blog_description a:hover { color: var(--secondary);} .ets-blog-related-posts { border-color: var(--primary-light); padding-top: 50px;} .post-details .blog_description { margin-bottom: 0;} /* .ets-blog-related-posts .title_blog { text-align: center;} */ @media only screen and (max-width: 1024px) { .ets-page-home .ets-blog-list { gap: 15px} .ets_blog_layout_grid .ets-blog-list li { width: calc(33.33% - 30px / 3);} .ets_blog_layout_large_list .ets-blog-list:not(.blog-main-page) li .ets-blog-wrapper-content, .ets_blog_layout_list .ets-blog-list li .ets_item_img + .ets-blog-wrapper-content ,.related-blog-desc-wrap ,.post-wrapper .ets-blog-wrapper-content { padding: 20px;} } @media only screen and ( max-width: 991px) { .ets_blog_layout_large_list .ets-blog-list:not(.blog-main-page) li .ets-blog-wrapper-content, .ets_blog_layout_list .ets-blog-list li .ets_item_img + .ets-blog-wrapper-content , .related-blog-desc-wrap ,.post-wrapper .ets-blog-wrapper-content{ padding: 15px;} } @media only screen and (max-width: 767px) { .ets-page-home .ets-blog-list { grid-template-columns: repeat(2,1fr);} .ets_blog_layout_grid .ets-blog-list li { width: calc(50% - 15px / 2);} } @media only screen and (max-width: 575px) { .ets-page-home .ets-blog-list { grid-template-columns: repeat(1,1fr);} .ets_blog_layout_grid .ets-blog-list li { width: 100%;} } .page-content.page-cms{text-align: inherit;} /* Homepage update css */ .page-index #wrapper > .container > .row{margin: 0;} .page-index #wrapper{padding-bottom: 0;} .page-index #wrapper > .container{width: 100%; padding: 0;} .page-index #wrapper > .container #content-wrapper{padding: 0;} .page-index .footer-cta-section, .page-index .brand-section{background: #F1F1F1;} .page-index #main .page-home > *:not(.ets_block_latest), .page-index #main .page-home > .ets_block_latest .block_header, .page-index #main .page-home > .ets_block_latest .news-sider-wrapper, .page-index #main .page-home > .ets_block_latest .brand-section-tabs{margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; width: 1400px; max-width: 100%;} .page-index #main .page-home > .ets_block_latest .brand-section-tabs{padding-top: var(--div-space); padding-bottom: var(--div-space);} .page-index #main .page-home > .ets_block_latest .brand-section-tabs .slick-dots{float: none;} .page-index .page_home{margin-bottom: 0;} .page-index .brand-list .tabs{background: none;} /* .page-index .brand-section{margin-top: var(--div-space);} */ .ets_block_slider { padding: var(--div-space) 0 0;} .news-sider-wrapper { padding-bottom: var(--div-space); position: relative;} /* Header Update CSS */ @media(max-width: 1199px){ #header .header-nav{max-height: inherit;} #header .header-nav .mobile-menu{display: flex !important;} #header .header-top > .container{display: none !important;} #header .header-top > #mobile_top_menu_wrapper { display: none !important;} #header.is-open .header-top > #mobile_top_menu_wrapper{display: block !important; position: absolute; width: 100%; margin: 0; padding: 0;} #header.is-open .header-top > #mobile_top_menu_wrapper:after{background: rgba(0, 0, 0, 0.5); width: 100%; height: calc(100vh - 132px); position: fixed; content: ''; left: 0; bottom: 0; z-index: -1;} .dropdown-item .float-xs-right.hidden-md-up{display: flex !important;} section#wrapper{display: block !important;} } /* Sitemap Page CSS */ .sitemap h2{margin: 0; height: auto; background: var(--primary); border-radius: 8px 8px 0 0; padding: 15px; line-height: 1; color: var(--white); border: none;} .row.sitemap{row-gap: 20px; display: flex; flex-direction: column;} .row.sitemap > div{width: 100%; border: var(--primary) 1px solid; border-radius: 10px; padding: 0 0 10px;} .row.sitemap > div li ul.nested{display: flex; flex-wrap: wrap; margin: 0;} .row.sitemap > div li ul.nested li{width: 25%; margin: 0;} .row.sitemap > div li a#category-page-2 + ul.nested > li{width: 100%;} .row.sitemap > div li a#category-page-2 + ul.nested > li li{width: 25%;} .row.sitemap > div li ul.nested li a{padding: 5px 15px; display: block;} .row.sitemap > div li ul.nested li ul.nested li{width: 100%;} .row.sitemap > div ul.nested li:has(#category-page-124), .row.sitemap > div ul.nested li:has(#category-page-10){display: none;} .sitemap h2 + ul{display: flex; flex-wrap: wrap; margin: 0;} .sitemap h2 + ul > li{width: 25%; margin: 0;} .sitemap h2 + ul > li a{padding: 5px 15px; display: block;} .sitemap h2 + ul > li a::before{content: '\f0da'; font-family: FontAwesome;} .sitemap h2 + ul li:has(.nested){order: 1; width: 100%;} .sitemap h2 + ul li:has(.nested) > a{font-weight: 600; text-transform: uppercase; padding: 20px 15px 5px !important; border-bottom: var(--primary) 1px solid; margin-bottom: 10px;} .sitemap h2 + ul li:has(.nested) > a::before{display: none;} .js-product-images-modal{background: rgba(0,0,0,0.5);} .js-product-images-modal .modal-dialog{max-width: 768px;} #product-modal .modal-content .modal-body{margin: 0; background: var(--white); border-radius: 10px;} #left-column #categories_filter{background-color: var(--primary); padding: 10px 15px; text-transform: uppercase; color: var(--white); height: 100%; border-radius: 5px; font-weight: 600; font-size: var(--font-xs); line-height: 20px; width: fit-content; border: none; cursor: pointer; display: none; outline: none;} .ets_block_slider .owl-controls, .ets_blog_related_posts_type_carousel .owl-controls, .ets_related_products_type_carousel .owl-controls{position: static; margin: 15px 0 0;} .ets_block_slider .owl-controls .owl-dots, .ets_blog_related_posts_type_carousel .owl-controls .owl-dots, .ets_related_products_type_carousel .owl-controls .owl-dots{display: flex; gap: 5px; justify-content: center;} .ets_block_slider .owl-controls .owl-dots .owl-dot span, .ets_blog_related_posts_type_carousel .owl-controls .owl-dots .owl-dot span, .ets_related_products_type_carousel .owl-controls .owl-dots .owl-dot span{font-size: 0; line-height: 0; width: 7px; height: 7px; border: none; background-color: var(--black); padding: 0; border-radius: 50%; display: block;} .ets_block_slider .owl-controls .owl-dots .owl-dot.active span, .ets_blog_related_posts_type_carousel .owl-controls .owl-dots .owl-dot.active span, .ets_related_products_type_carousel .owl-controls .owl-dots .owl-dot.active span{width: 52px; background: var(--secondary); border-radius: 30px;} @media(max-width: 991px){ .row.sitemap > div li ul.nested li, .sitemap h2 + ul > li, .row.sitemap > div li a#category-page-2 + ul.nested > li li{width: 33.33%;} } @media(max-width: 767px){ #left-column #categories_filter{display: block; margin-bottom: 10px;} #left-column #categories_block_left{display: none;} } @media(max-width: 640px){ .row.sitemap > div li ul.nested li, .sitemap h2 + ul > li, .row.sitemap > div li a#category-page-2 + ul.nested > li li{width: 50%;} } @media(min-width: 768px) and (max-width: 1024px){ .footer-other{flex-direction: column; row-gap: 20px;} .footer-other > div{width: 100%;} .links .foo-menu{grid-template-columns: repeat(2, 1fr);} .footer-container{padding-bottom: 50px;} } @media(min-width: 1280px) and (max-width: 1390px){ #category-dropdown{width: 230px;} } #scroll-to-top{position: fixed; right: 15px; bottom: 15px; z-index: 1; width: 45px; height: 45px; background: var(--primary); border: var(--white) 1px solid; border-radius: 5px; padding: 10px; cursor: pointer;} #scroll-to-top svg path{fill: var(--white);} .footer-logo-wrap{gap: 15px;} .footer-logo-wrap .brand-logo .brand-2-col{display: inline-flex; gap: 5px;max-width: 106px;} .footer-logo-wrap .brand-logo .brand-2-col img, .footer-logo-wrap .brand-logo .brand-2-col a{width:calc(50% - 2.5px) ;} .footer-logo-wrap .brand-logo .brand-1-col{max-width: 106px;} @media (max-width:768px) { .footer-logo-wrap .brand-logo { display: flex; justify-content: center; align-items: center; } } .footer-first-block-logo{display: flex; gap: 15px; width: 300px; padding: 0 15px;} .footer-first-block-logo img{height: 100px;} .js-footer .block_newsletter{width: calc(100% - 330px) !important; padding-bottom: 0; border: none;} .new-updated-footer{display: flex; flex-wrap: wrap; gap: 30px; border-bottom: 1px solid #3D3D3D; padding-bottom: 30px;} .js-footer .block_newsletter #block-newsletter-label{width: 100%;} .js-footer .block_newsletter #block-newsletter-label + div{width: 100%;} .new-updated-footer .block-social{display: none;} @media(max-width: 767px){ .new-updated-footer{flex-direction: column;} .js-footer .block_newsletter{width: 100% !important;} .block_newsletter form .row .col-xs-12:first-of-type .btn-primary:first-of-type{margin-left: 0 !important;} } .sub-brand-list .slick-track .sub-brand.Kingman .cat-img{background: #000;} .sub-brand-list .slick-track .sub-brand.Wokrait .cat-img{background: #1E1E21;} .sub-brand-list .slick-track .sub-brand.Spring .cat-img{background: #356CBE;} .sub-brand-list .slick-track .sub-brand.Build .cat-img{background: #2C328B;} .sub-brand-list .slick-track .sub-brand.d.light .cat-img{background: #F24A25;} body .icon-box-with-title-img + .brand-section { width: 100% !important; padding: var(--div-space) 0 !important; margin-top: var(--div-space);} .icon-box-with-title-img + .brand-section .brand-section-tabs { max-width: 1400px; margin: 0 auto;padding: 0 15px; }