@charset "UTF-8"; /* Base styles */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ @import url("https://fonts.googleapis.com/css2?family=Lato&family=Poppins:wght@400;500;600;700;900&display=swap"); *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; -webkit-line-break: after-white-space; -webkit-user-select: auto; overflow-wrap: break-word; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* clears the ‘X’ from Internet Explorer */ input[type=search]::-ms-clear { display: none; width: 0; height: 0; } input[type=search]::-ms-reveal { display: none; width: 0; height: 0; } /* clears the ‘X’ from Chrome */ input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { display: none; } html { overflow-x: hidden; scroll-behavior: smooth; font-size: 62.5%; } body { position: relative; margin: 0; padding: 0; color: #000; font-size: 1.6rem; font-family: "Poppins", sans-serif; } a, button { cursor: pointer; } .container { margin: 0 auto; padding: 0.5em 1em; width: 100%; max-width: 1400px; } @media only screen and (min-width: 1023px) { .container { padding: 0.5em 2em; } } .section-title { margin-bottom: 2em; font-weight: 700; font-size: 2rem; text-transform: uppercase; } @media only screen and (min-width: 767px) { .section-title { font-size: 2.4rem; } } .section-title-margin { margin-bottom: 0.2em; } .section-title-center { text-align: center; } .section-subtitle { margin-bottom: 2em; color: #009ee1; font-weight: 700; } .section-btn { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; display: block; margin: 2em auto 0; max-width: 300px; } .section-btn:hover { background-color: #000; } /* Components */ .nav { position: fixed; top: 0; z-index: 2000; width: 100%; } @media only screen and (min-width: 767px) { .nav { position: unset; } } .nav__info { display: flex; justify-content: center; align-items: center; background-color: #000; padding: 0.5em; width: 100%; } .nav__info svg { fill: #ffffff !important; width: 20px; height: 20px; } .nav__info button { display: flex; justify-content: center; align-items: center; margin-left: auto; } .nav__info.hide { display: none; } .nav__content { display: flex; justify-content: center; align-items: center; gap: 0.5em; margin-left: auto; } .nav__content p { color: #ffffff; font-size: 1.4rem; } .nav__desktop { display: none; } @media only screen and (min-width: 767px) { .nav__desktop { display: block; } } .nav__top { background-color: #1e1f1f; padding: 0.3em 0.6em; width: 100%; } .nav__top-boxes { display: flex; justify-content: space-between; align-items: center; } .nav__top-left { display: flex; align-items: center; gap: 1em; } .nav__top-left p { color: #ffffff; font-size: 1.2rem; } .nav__top-left p a { transition: all 0.3s; } .nav__top-left p a:hover { color: #009ee1; } .nav__middle { background-color: #f6f6f6; padding: 1em; } .nav__middle-boxes { display: flex; flex-wrap: wrap; align-items: center; } .nav__middle-left { display: inline-block; margin-right: 3em; } .nav__middle-left img { width: 230px; } .nav__middle-middle { margin-right: auto; } .nav__middle-middle ul { display: flex; align-items: center; gap: 1em; } .nav__middle-middle ul li a { font-size: 1.4rem; text-transform: uppercase; transition: all 0.3s; } .nav__middle-middle ul li a:hover { color: #009ee1; } .nav__middle-right { display: none; } @media only screen and (min-width: 767px) { .nav__middle-right { display: block; border: 1px solid #009ee1; } } .nav__navigation ul { display: flex; align-items: center; gap: 1em; } .nav__navigation ul li { display: flex; align-items: center; gap: 0.5em; } .nav__navigation ul li a { color: #ffffff; font-size: 1.2rem; text-transform: uppercase; transition: all 0.3s; } .nav__navigation ul li a:hover { color: #009ee1; } .nav__navigation ul li svg { fill: #009ee1 !important; width: 20px; height: 20px; } .nav p { display: flex; align-items: center; gap: 1em; } .nav p svg { fill: #009ee1; width: 20px; height: 20px; } .nav__bottom { margin: 1em auto; border-radius: 8px; background-color: #009ee1; padding: 1em; max-width: 1340px; } .nav__bottom-boxes { display: flex; justify-content: space-around; align-items: center; gap: 1em; } .nav__bottom-box { display: flex; flex-direction: column; align-items: center; gap: 0.5em; } .nav__bottom-box img { width: 30px; height: 30px; } .nav__bottom-box p { color: #ffffff; font-size: 1.4rem; } .nav__mobile { border-bottom: 2px solid #009ee1; background-color: #1e1f1f; padding: 1em 0em; width: 100%; } @media only screen and (min-width: 767px) { .nav__mobile { display: none; } } .nav__mobile-logo { display: inline-block; } .nav__mobile .nav__wrapper { display: flex; position: fixed; top: 0; left: 0; flex-direction: column; transform: translateX(-110%); z-index: 300; transition: all 0.3s ease-in-out; background-color: #1e1f1f; width: 85vw; height: 100vh; } .nav__mobile .nav__overlay { position: fixed; top: 0; left: 0; visibility: hidden; opacity: 0; z-index: 200; transition: all 0.3s ease-in-out; background-color: rgba(0, 0, 0, 0.3); width: 100vw; height: 100vh; } .nav__mobile .nav__close { display: flex; position: absolute; top: 50%; right: -40px; justify-content: center; align-items: center; z-index: 350; border-radius: 50%; background-color: #ffffff; padding: 0.3em; } .nav__mobile .nav__overlay.active { visibility: visible; opacity: 1; } .nav__mobile .nav__wrapper.active { transform: translateX(0); } .nav__mobile .nav__menu, .nav__mobile .nav__categories, .nav__mobile .nav__account { display: none; background-color: #009ee1; width: 100%; overflow-y: scroll; } .nav__mobile .nav__menu ul, .nav__mobile .nav__categories ul, .nav__mobile .nav__account ul { display: flex; flex-direction: column; width: 100%; height: 100%; } .nav__mobile .nav__menu ul li, .nav__mobile .nav__categories ul li, .nav__mobile .nav__account ul li { display: block; position: relative; transition: 0.3s; width: 100%; } .nav__mobile .nav__menu ul li::after, .nav__mobile .nav__categories ul li::after, .nav__mobile .nav__account ul li::after { display: block; position: absolute; top: 0; left: 0; background-color: #057db1; width: 100%; height: 1px; content: ""; } .nav__mobile .nav__menu ul li a, .nav__mobile .nav__categories ul li a, .nav__mobile .nav__account ul li a { display: block; position: relative; padding: 0.5em 1em; color: #ffffff; font-size: 1.4rem; text-transform: uppercase; } .nav__mobile .nav__menu ul li a:hover, .nav__mobile .nav__categories ul li a:hover, .nav__mobile .nav__account ul li a:hover { font-weight: 700; } .nav__mobile .nav__menu ul li a[aria-current=page], .nav__mobile .nav__categories ul li a[aria-current=page], .nav__mobile .nav__account ul li a[aria-current=page] { background-color: #057db1; font-weight: 700; } .nav__mobile .nav__menu ul li .nav__arrow, .nav__mobile .nav__categories ul li .nav__arrow, .nav__mobile .nav__account ul li .nav__arrow { display: flex; position: absolute; top: 0; right: 0; align-items: center; z-index: 500; cursor: pointer; padding: 0.5em 1em; } .nav__mobile .nav__menu ul li .nav__arrow svg, .nav__mobile .nav__categories ul li .nav__arrow svg, .nav__mobile .nav__account ul li .nav__arrow svg { transition: all 0.3s ease-in-out; } .nav__mobile .nav__menu ul li .nav__arrow.active svg, .nav__mobile .nav__categories ul li .nav__arrow.active svg, .nav__mobile .nav__account ul li .nav__arrow.active svg { transform: rotateX(180deg); } .nav__mobile .nav__menu ul li ul.sub-menu, .nav__mobile .nav__categories ul li ul.sub-menu, .nav__mobile .nav__account ul li ul.sub-menu { visibility: hidden; opacity: 0; transition: all 0.3s ease-in-out; max-height: 0; overflow: hidden; } .nav__mobile .nav__menu ul li ul.sub-menu li.sub-menu-depth-1, .nav__mobile .nav__categories ul li ul.sub-menu li.sub-menu-depth-1, .nav__mobile .nav__account ul li ul.sub-menu li.sub-menu-depth-1 { background-color: rgba(5, 125, 177, 0.5); } .nav__mobile .nav__menu ul li ul.sub-menu li.sub-menu-depth-1 a, .nav__mobile .nav__categories ul li ul.sub-menu li.sub-menu-depth-1 a, .nav__mobile .nav__account ul li ul.sub-menu li.sub-menu-depth-1 a { padding-left: 1.5em; } .nav__mobile .nav__menu ul li ul.sub-menu li.sub-menu-depth-2, .nav__mobile .nav__categories ul li ul.sub-menu li.sub-menu-depth-2, .nav__mobile .nav__account ul li ul.sub-menu li.sub-menu-depth-2 { background-color: rgba(5, 125, 177, 0.75); } .nav__mobile .nav__menu ul li ul.sub-menu li.sub-menu-depth-2 a, .nav__mobile .nav__categories ul li ul.sub-menu li.sub-menu-depth-2 a, .nav__mobile .nav__account ul li ul.sub-menu li.sub-menu-depth-2 a { padding-left: 2em; } .nav__mobile .nav__menu ul li ul.sub-menu li.sub-menu-depth-3, .nav__mobile .nav__categories ul li ul.sub-menu li.sub-menu-depth-3, .nav__mobile .nav__account ul li ul.sub-menu li.sub-menu-depth-3 { background-color: #057db1; } .nav__mobile .nav__menu ul li ul.sub-menu li.sub-menu-depth-3 a, .nav__mobile .nav__categories ul li ul.sub-menu li.sub-menu-depth-3 a, .nav__mobile .nav__account ul li ul.sub-menu li.sub-menu-depth-3 a { padding-left: 2.5em; } .nav__mobile .nav__menu ul li ul.sub-menu.active, .nav__mobile .nav__categories ul li ul.sub-menu.active, .nav__mobile .nav__account ul li ul.sub-menu.active { visibility: visible; opacity: 1; max-height: 100vh; } .nav__mobile .nav__account ul#menu-panel-uzytkownika li { display: flex; align-items: center; gap: 0.3em; } .nav__mobile .nav__account ul#menu-panel-uzytkownika li svg { fill: #ffffff !important; margin-left: 0.5em; width: 20px; height: 20px; } .nav__mobile .nav__account ul#menu-panel-uzytkownika li a { width: 100%; } .nav__mobile .nav__menu.active, .nav__mobile .nav__categories.active, .nav__mobile .nav__account.active { display: block; } .nav__tabs { display: flex; align-items: center; } .nav__tab { border-right: 1px solid #057db1; padding: 0.8em 1.6em; width: 33.3%; color: #ffffff; font-weight: 700; text-align: center; text-transform: uppercase; } .nav__tab:last-child { border-right: unset; } .nav__tab.active { background-color: #009ee1; color: #ffffff; } .nav__navbar { display: flex; justify-content: space-between; align-items: center; } .nav__navbar-logo { width: 110px; } .nav__controls { display: flex; align-items: center; gap: 1em; } .nav__controls ul.menu li:first-child { display: none; } .nav__btn { padding: 0.3em; } .nav__btn-box { position: relative; width: 20px; height: 20px; } .nav__btn-bars { position: absolute; top: 3px; right: 0; transition: width 0.3s, background-color 0.3s; background-color: #ffffff; width: 100%; height: 1px; content: ""; } .nav__btn-bars::after, .nav__btn-bars::before { position: absolute; right: 0; transition: width 0.3s, background-color 0.3s; background-color: #ffffff; height: 1px; content: ""; } .nav__btn-bars::after { top: 7px; width: 70%; } .nav__btn-bars::before { top: 14px; width: 85%; } .nav__btn.active .nav__btn-bars, .nav__btn.active .nav__btn-bars::after, .nav__btn.active .nav__btn-bars::before { background-color: #009ee1; width: 100%; } .cart-item-count .cart-link { position: relative; } @media only screen and (min-width: 767px) { .cart-item-count .cart-link span { position: absolute; top: -3px; right: 5px; right: -20px; font-weight: 700; font-size: 1.1rem; } } .header { margin-top: 9em; } @media only screen and (min-width: 767px) { .header { margin-top: 1em; } } .header__boxes { display: flex; flex-direction: column; gap: 2em; } @media only screen and (min-width: 1023px) { .header__boxes { display: flex; flex-direction: row; gap: 2em; } } .header__categories, .header__promo { box-shadow: 0 0 10px #f6f6f6; border-radius: 8px; background-color: #f6f6f6; padding: 1em 2em; } .header__categories, .header__promo { display: flex; flex-direction: column; justify-content: space-between; gap: 1em; width: 30%; } .header__content { position: relative; align-items: center; box-shadow: 0 0 10px #f6f6f6; border-radius: 8px; width: 100%; min-height: 340px; overflow: hidden; } @media only screen and (min-width: 1023px) { .header__content { width: 40%; } } .header__texts { display: flex; position: relative; flex-direction: column; justify-content: center; align-items: center; gap: 0.5em; z-index: 20; border-radius: 8px; background-color: rgba(0, 0, 0, 0.6); padding: 1em; } .header__title { color: #ffffff; font-weight: 700; font-size: 2.4rem; } .header__description { color: #ffffff; font-style: italic; font-size: 1.8rem; } .header__wrapper::before { position: absolute; top: 0; left: 0; z-index: 10; background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; content: ""; } .header__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .header__categories { order: 2; width: 100%; } @media only screen and (min-width: 1023px) { .header__categories { display: flex; order: unset; width: 30%; } } .header__promo { order: 3; width: 100%; } @media only screen and (min-width: 1023px) { .header__promo { order: unset; width: 30%; } } .header__menu ul { display: flex; flex-direction: column; gap: 0.2em; } .header__menu ul li a { transition: all 0.3s; border-bottom: 1px solid transparent; text-transform: uppercase; } .header__menu ul li a:hover { color: #009ee1; } .header__menu ul li a:hover { border-bottom: 1px solid #057db1; } .header__swiper { position: absolute; width: 100%; height: 100%; } .header__slide { width: 100% !important; height: 100%; } .header__slide a { display: block; } .header__slide-img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .header__next, .header__prev { border-radius: 50%; background-color: rgba(0, 0, 0, 0.5); width: 45px; height: 45px; color: #ffffff; } .header__next::after, .header__prev::after { font-size: 2.1rem; } .header__pagination .swiper-pagination-bullet-active { background-color: #ffffff; } .header__heading { font-weight: 700; } .header__btn { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; } .header__btn:hover { background-color: #000; } .header__btn-cart { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; background-color: #009ee1; } .header__btn-cart:hover { background-color: #000; } .header__btn-cart:hover { background-color: #057db1; } .header__discounts { display: flex; flex-direction: column; gap: 0.5em; } .header__product a { display: flex; align-items: center; gap: 1em; border-radius: 8px; width: 100%; height: 100%; } .header__product a img { position: absolute; top: 0; left: 0; width: 100%; max-width: unset; height: 100%; object-fit: cover; } .header__product a .header__product-infos { display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 20; width: 100%; } .header__product-promo a { display: flex; align-items: center; gap: 1em; } .header__product-promo a img { position: unset; border: 1px solid #009ee1; border-radius: 8px; background-color: #ffffff; padding: 0.5em; width: 70px; max-width: unset; height: auto; object-fit: cover; } .header__product-promo a .header__product-infos { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5em; } .header__product-promo a .header__product-infos h2 { color: #009ee1; font-weight: 700; font-size: 1.5rem; transition: all 0.3s; } .header__product-promo a .header__product-infos h2:hover { color: #057db1; } .header__product-promo a .header__product-infos span { font-weight: 700; font-size: 1.3rem; } .header__product-price { display: flex; align-items: center; gap: 1.5em; } .header__product-price del { margin-right: -0.8em; color: #373737; font-size: 1.3rem; text-decoration: line-through; } .header__product-price ins { color: #009ee1; font-size: 1.5rem; } .header__product-unit { position: relative; color: #373737; font-size: 1.3rem; } .header__product-unit::before { position: absolute; top: 50%; left: -12px; transform: translateY(-50%); content: "/"; font-size: 1.2rem; } .header__search { order: 1; } .header__search form.woo_search, .header__search input#keyword { background-color: #373737 !important; color: #ffffff !important; } .header__search form.woo_search span.loading.woo_bar_el svg, .header__search form.woo_search span.loading.woo_bar_el svg g, .header__search input#keyword span.loading.woo_bar_el svg, .header__search input#keyword span.loading.woo_bar_el svg g { fill: #ffffff !important; } .header__search .show_all { background-color: #373737 !important; } @media only screen and (min-width: 567px) { .header__search { display: none; } } .woocommerce .woocommerce-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin-block: 2em !important; font-size: 1rem !important; } @media only screen and (min-width: 767px) { .woocommerce .woocommerce-breadcrumb { font-size: 1.4rem !important; } } .woocommerce .woocommerce-breadcrumb::after, .woocommerce .woocommerce-breadcrumb::before { content: unset !important; } .woocommerce .woocommerce-breadcrumb li { -webkit-clip-path: polygon(calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) calc(100% - 0px), 0% 100%, 10px 50%, 0% 0%); clip-path: polygon(calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) calc(100% - 0px), 0% 100%, 10px 50%, 0% 0%); background-color: #f6f6f6; padding: 0.3em 1em; text-transform: uppercase; } .woocommerce .woocommerce-breadcrumb li:last-of-type { background-color: #373737; color: #ffffff; } .woocommerce .woocommerce-breadcrumb li a { transition: all 0.3s; } .woocommerce .woocommerce-breadcrumb li a:hover { color: #009ee1; } .category { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .category { padding: 3em 0; } } .category .menu-category-slider-menu-container { padding-bottom: 1em; } .category__swiper { margin: -1em; padding: 1em; } .category__slide { transition: all 0.1s ease-out; margin-top: 10px; margin-bottom: 10px; border-radius: 8px; padding: 1em 1em; } .category__slide:hover { box-shadow: 0 0 20px rgba(30, 31, 31, 0.1); } .category__link { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.1em; font-weight: 700; font-size: 1.35rem; text-align: center; } .category__pagination { bottom: 0 !important; } .category__pagination .swiper-pagination-bullet-active { background-color: #1e1f1f; } .contact { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .contact { padding: 3em 0; } } .contact__boxes { display: flex; flex-direction: column; gap: 2em; } @media only screen and (min-width: 1023px) { .contact__boxes { display: grid; grid-template-rows: 1fr; grid-template-columns: 0.6fr 1.2fr; gap: 0; box-shadow: 0 0 20px #cccccc; border-radius: 8px; } } .contact__info, .contact__form { border-radius: 8px; padding: 1em 2em; } .contact__info { display: flex; position: relative; flex-direction: column; gap: 1em; z-index: 10; background-color: #009ee1; overflow: hidden; color: #ffffff; } @media only screen and (min-width: 767px) { .contact__info { border-top-right-radius: unset; border-bottom-right-radius: unset; } } .contact__title { border-bottom: 2px solid #ffffff; padding-bottom: 0.5em; font-weight: 600; font-size: 2rem; text-align: center; text-transform: uppercase; } .contact__text { line-height: 180%; } .contact__text p { margin-bottom: 1em; } .contact__text a { border-bottom: 1px solid #ffffff; padding-bottom: 0.1em; font-weight: 600; } .contact__text a:hover { border-bottom: 1px solid #057db1; } .contact__text ul, .contact__text ol { padding-left: 1.5em; list-style: none; } .contact__text ul li, .contact__text ol li { position: relative; margin-bottom: 0.5em; font-size: 1.4rem; } .contact__text ul li::before, .contact__text ol li::before { position: absolute; top: 9px; left: -20px; border-radius: 8px; background-color: #ffffff; padding: 0.1em; width: 10px; height: 10px; content: ""; } .contact__img { position: absolute; transform: rotateZ(-16deg); opacity: 0.1; z-index: -10; width: 430px; max-width: unset; } .contact__form { background-color: #f6f6f6; } @media only screen and (min-width: 767px) { .contact__form { border: 2px solid #009ee1; border-top-left-radius: unset; border-bottom-left-radius: unset; } } .contact__form form p input, .contact__form form p textarea, .contact__form form p select { margin-block: 1em; margin-bottom: 1em; border: 1px solid #ccc; border-radius: 4px; padding: 0.5em 1em; width: 100%; font-size: 1.4rem; } .contact__form form p input:focus, .contact__form form p textarea:focus, .contact__form form p select:focus { border-color: #057db1; } .contact__form form p input.contact__btn { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; cursor: pointer; } .contact__form form p input.contact__btn:hover { background-color: #000; } .contact__form form p textarea { height: 100%; max-height: 125px; resize: vertical; } .contact__form form .wpcf7-not-valid-tip { padding-left: 0.5em; color: #ff0000; font-style: italic; font-size: 1.4rem; } .contact__form form .wpcf7-list-item label { display: flex; align-items: center; gap: 0.5em; } .contact__form form .wpcf7-list-item label input.contact__acceptance { margin-right: 0.5em; border-radius: 50%; background-color: #ccc; padding: 5px; width: 10px; height: 10px; } .contact__form form .wpcf7-list-item label input:checked { background-color: #2ab62a; } .contact__form form .wpcf7-list-item label input:checked + span { font-weight: 600; } .contact__form form .wpcf7-list-item label span { font-style: italic; font-size: 1.2rem; } .wpcf7-response-output { margin: 0 !important; border: none !important; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; font-size: 1.4rem; text-align: center; } form.invalid .wpcf7-response-output { background-color: #ff0000; } form.sent .wpcf7-response-output { background-color: #2ab62a; } .products { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .products { padding: 3em 0; } } .products__boxes { display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(1, 1fr); border: 1px solid #f6f6f6; } @media only screen and (min-width: 567px) { .products__boxes { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 767px) { .products__boxes { grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 1023px) { .products__boxes { grid-template-columns: repeat(4, 1fr); } } .products__box { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5em; outline: 1px solid #f6f6f6; border-bottom: 1px solid #f6f6f6; } .products__box-top { position: relative; align-self: center; margin-top: 1em; } .products__box-top span { position: absolute !important; top: -16px !important; right: -22px !important; left: unset !important; border-radius: unset !important; background-color: #057db1 !important; padding: 0.3em 0.6em !important; width: unset !important; height: unset !important; min-height: unset !important; font-size: 1.2rem !important; line-height: unset !important; } .products__box img { padding: 1em; width: 180px; height: 180px; object-fit: contain; } .products__box h2 { font-weight: 700; font-size: 1.4rem; } .products__box-infos { display: flex; position: relative; flex-direction: column; justify-content: flex-end; gap: 0.5em; padding: 1em; height: 100%; } .products__box-infos::after { display: block; position: absolute; top: 0; left: 0; background-color: #f6f6f6; width: 100%; height: 1px; content: ""; } .products__price { display: flex; align-items: center; gap: 1em; color: #009ee1; font-weight: 700; } .products__price span.price { color: #009ee1; } .products__price span.price del { margin-right: 0.5em; color: #373737; font-size: 1.3rem; text-decoration: line-through; } .products__price span.price ins { font-size: 1.5rem; } .products__price-latest > span { margin-right: 5px; } .products__unit { position: relative; color: #373737; font-size: 1.1rem; } @media only screen and (min-width: 767px) { .products__unit { text-wrap-mode: nowrap; } } .products__unit::before { position: absolute; top: 50%; left: -12px; transform: translateY(-50%); content: "/"; font-size: 1.2rem; } .products__btn-loop { display: flex; flex-direction: column; gap: 0.5em; } .products__btn-latest { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; background-color: #009ee1; align-self: stretch; } .products__btn-latest:hover { background-color: #000; } .products__btn-latest:hover { background-color: #057db1; } .products__btn-ajax { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; } .products__btn-ajax:hover { background-color: #000; } .products__btn a.button { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; background-color: #009ee1; display: block; align-self: stretch; padding: 0.8em 1em !important; width: 100%; font-weight: 400; } .products__btn a.button:hover { background-color: #000; } .products__btn a.button:hover { background-color: #057db1; } .products__btn a.button:hover { color: #ffffff; } .products__content { display: flex; flex-direction: column; gap: 2em; } @media only screen and (min-width: 1023px) { .products__content { display: grid; grid-template-columns: 0.8fr 2fr; gap: 4em; } } .products__right { display: flex; flex-direction: column; gap: 2em; } .products__sorting { display: flex; flex-direction: column; justify-content: space-between; gap: 1em; } @media only screen and (min-width: 767px) { .products__sorting { flex-direction: row; align-items: center; } } .products__sorting-label { margin-right: 0.5em; font-weight: 600; } .products__sorting-select { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; cursor: pointer; background-color: #f6f6f6; color: #000; } .products__sorting-select:hover { background-color: #000; } .products__sorting-select:hover { background-color: #f6f6f6; } .products__sorting p.woocommerce-result-count { margin: 0; font-weight: 600; } .products__sidebar .wp-block-woocommerce-product-categories { margin-bottom: 1em; border: 1px solid #f6f6f6; border-radius: 8px; padding: 1em; } .products__pagination .woocommerce-pagination { margin-top: 2em; text-align: right !important; } .products__pagination .woocommerce-pagination ul { display: flex !important; justify-content: center; align-items: flex-end; gap: 0.5em; border: unset !important; } .products__pagination .woocommerce-pagination ul::before, .products__pagination .woocommerce-pagination ul::after { display: none !important; content: unset !important; } @media only screen and (min-width: 1023px) { .products__pagination .woocommerce-pagination ul { justify-content: flex-end; } } .products__pagination .woocommerce-pagination li { border-right: unset !important; border-radius: 8px; } .products__pagination .woocommerce-pagination li .page-numbers.current { background-color: #1e1f1f !important; color: #ffffff; } .products__pagination .woocommerce-pagination li .page-numbers:hover { background-color: #f6f6f6; color: #1e1f1f; } .price-filter h3 { font-weight: 600; } .price-range { margin-block: 1em; } .price-range .slider-container { display: flex; position: relative; justify-content: space-between; } .price-range .slider-container #priceSlider { position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; z-index: 2; transition: background 0.3s ease; outline: none; background-color: #f6f6f6; width: 100%; height: 5px; pointer-events: auto; } .price-range .slider-container #priceSlider::before { position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: -1; background-color: #373737; width: calc(var(--value) * 1%); height: 6px; content: ""; } .price-range .slider-container #priceSlider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; cursor: pointer; border: 2px solid #373737; border-radius: 50%; background: #1e1f1f; width: 15px; /* Szerokość uchwytu */ height: 15px; /* Wysokość uchwytu */ } input[type=range] { width: 100%; } .price-values { display: flex; position: relative; justify-content: center; align-items: center; margin-bottom: 1em; border: 1px solid #f6f6f6; border-radius: 8px; padding: 0.5em; overflow: hidden; } .price-values .change-price { position: absolute; top: 0; background-color: #f6f6f6; padding: 0.3em; height: 100%; color: #000; } .price-values #priceDecrease { left: 0; } .price-values #priceIncrease { right: 0; } input[type=number] { margin: 0 5px; text-align: center; } .displayed-values { display: none; } #filterButton { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; width: 100%; } #filterButton:hover { background-color: #000; } .wc-block-product-categories-list--depth-0 { display: flex; flex-direction: column; gap: 0.3em; } .wc-block-product-categories-list--depth-0::after, .wc-block-product-categories-list--depth-0::before { display: none !important; } .wc-block-product-categories-list--depth-1, .wc-block-product-categories-list--depth-2, .wc-block-product-categories-list--depth-3, .wc-block-product-categories-list--depth-4 { display: none; position: relative; margin: 0 !important; padding-left: 0.8em !important; } .wc-block-product-categories-list--depth-1::after, .wc-block-product-categories-list--depth-1::before, .wc-block-product-categories-list--depth-2::after, .wc-block-product-categories-list--depth-2::before, .wc-block-product-categories-list--depth-3::after, .wc-block-product-categories-list--depth-3::before, .wc-block-product-categories-list--depth-4::after, .wc-block-product-categories-list--depth-4::before { display: none !important; } .wc-block-product-categories-list--depth-1::before, .wc-block-product-categories-list--depth-2::before, .wc-block-product-categories-list--depth-3::before, .wc-block-product-categories-list--depth-4::before { display: unset !important; position: absolute; top: 8px; left: 0; background-color: #ccc; width: 1px; height: calc(100% - 16px); content: ""; } .submenu-open { display: flex; flex-direction: column; gap: 0.3em; } .wc-block-product-categories-list-item a { display: inline-flex; justify-content: flex-start; align-items: center; gap: 0.5em; margin-bottom: 0.3em; text-transform: uppercase; transition: all 0.3s; } .wc-block-product-categories-list-item a:hover { color: #009ee1; } /* Styl przycisku */ .categories__btn { display: inline-flex; align-items: center; cursor: pointer; border: none; background: none; } .categories__btn.active .arrow-icon-category { transform: rotateX(180deg); } .categories__btn.active .arrow-icon-category path { fill: #009ee1; } .arrow-icon-category { transition: all 0.3s ease-in-out; width: 16px; height: 16px; } .arrow-icon-category path { fill: #1e1f1f; } .wc-block-product-categories-list-item.current-cat > ul, .wc-block-product-categories-list-item.current-cat-parent > ul { display: flex; flex-direction: column; gap: 0.3em; } .current-cat > a { color: #009ee1; font-weight: 600; } .current-cat-parent > a { font-weight: 600; } .current-cat-parent > a .categories__btn .arrow-icon-category, .current-cat > a .categories__btn .arrow-icon-category { transform: rotateX(180deg); } .current-cat-parent > a .categories__btn .arrow-icon-category path, .current-cat > a .categories__btn .arrow-icon-category path { fill: #009ee1; } .product { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .product { padding: 3em 0; } } .product__content { display: flex; flex-direction: column; gap: 2em; margin-top: 4em; margin-bottom: 2em; } @media only screen and (min-width: 767px) { .product__content { display: grid; grid-template-rows: 1fr; grid-template-columns: 1.5fr 1.2fr; } } .product__left { display: flex; flex-direction: column; align-items: center; gap: 2em; } @media only screen and (min-width: 767px) { .product__left { align-items: flex-start; } } .product__img { align-self: center; } .product__img img { width: auto; max-width: 300px; } .product__thumbnails { display: grid; grid-template-rows: repeat(1, 1fr); grid-template-columns: repeat(4, 1fr); align-self: center; } @media only screen and (min-width: 767px) { .product__thumbnails { grid-template-columns: repeat(6, 1fr); } } .product__thumbnail { display: flex; justify-content: center; align-items: center; cursor: pointer; border: 1px solid #f6f6f6; padding: 0.5em; width: 90px; } .product__thumbnail img { width: 100%; height: 100%; object-fit: cover; } .product__thumbnail.active { border: 1px solid #057db1; } .product__details { display: flex; flex-direction: column; gap: 2em; } .product__top { display: flex; position: relative; flex-direction: column; gap: 0.5em; } .product__top::after { position: relative; bottom: 0; left: 0; align-self: center; background-color: #f6f6f6; width: 100%; height: 1px; content: ""; } .product__short { border-radius: 8px; background-color: #f6f6f6; padding: 0.5em; } .product__title { font-weight: 600; font-size: 2.4rem; } .product__price { display: flex; align-items: center; gap: 2em; } .product__price bdi { color: #009ee1; font-weight: 600; font-size: 2.8rem; } .product__unit { position: relative; color: #373737; font-weight: 600; font-size: 1.8rem; } .product__unit::before { position: absolute; top: 50%; left: -15px; transform: translateY(-50%); content: "/"; font-size: 1.2rem; } .product__calculator { display: flex; position: relative; flex-direction: column; gap: 0.5em; border-radius: 8px; background-color: #f6f6f6; padding: 0.5em; } .product__calculator::after { position: absolute; bottom: -15px; left: 0; align-self: center; background-color: #f6f6f6; width: 100%; height: 1px; content: ""; } .product__calculator-title { color: #000; font-weight: 600; text-align: center; } .product__calculator-label, .product__calculator-info { text-align: center; } .product__calculator-top, .product__calculator-bottom { display: flex; flex-direction: column; gap: 0.5em; border-radius: 8px; background-color: #ffffff; padding: 0.5em; } .product__calculator-middle { display: flex; flex-direction: column; gap: 0.5em; } .product__calculator-row { display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(2, 1fr); } .product__calculator-btn { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; margin-block: 0.5em; } .product__calculator-btn:hover { background-color: #000; } .product__calculator-bottom { flex-direction: row; justify-content: center; } .product__calculator-input { margin: 0 !important; } .product__calculator #total-price { font-weight: 600; } .product__bottom { display: flex; position: relative; flex-direction: column; gap: 1em; } .product__bottom::after { position: absolute; bottom: -15px; left: 0; align-self: center; background-color: #f6f6f6; width: 100%; height: 1px; content: ""; } .product__btn { display: flex; justify-content: space-between; align-items: center; } .product__btn p.stock.in-stock { color: #2ab62a; font-weight: 600; font-size: 1.4rem; } .product__btn p.stock.out-of-stock { color: #ff0000; font-weight: 600; } .product__btn form.cart { display: flex; gap: 0.5em; } .product__btn form.cart .quantity { display: flex; border-radius: 8px; background-color: #f6f6f6; } .product__btn form.cart button { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; background-color: #009ee1; background-color: #009ee1 !important; width: 100%; font-weight: 400; } .product__btn form.cart button:hover { background-color: #000; } .product__btn form.cart button:hover { background-color: #057db1; } .product__btn form.cart button:hover { background-color: #057db1 !important; } .product__btn .variations_form { flex-direction: column; gap: 1.5em; width: 100%; } .product__btn .variations_form table.variations tr { display: flex; flex-direction: column; gap: 1em; margin-bottom: 1em; } .product__btn .variations_form table.variations tr th { align-self: flex-end; } .product__btn .variations_form table.variations tr th label { font-weight: 600; font-size: 2rem; letter-spacing: 1px; } .product__btn .variations_form table.variations tr td.value { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: space-between; align-items: center; } .product__btn .variations_form table.variations tr td.value select, .product__btn .variations_form table.variations tr td.value a { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; } .product__btn .variations_form table.variations tr td.value select:hover, .product__btn .variations_form table.variations tr td.value a:hover { background-color: #000; } .product__btn .variations_form table.variations tr td.value a { background-color: #ff0000; font-size: 1.4rem; } .product__btn .variations_form table.variations tr td.value a:hover { background-color: #ff0000; } .product__btn .variations_form table.variations tr td.value select option { text-align: center; } .product__btn .variations_form .variations_button { display: flex; justify-content: space-between; gap: 1em; } .product__btn .variations_form .variations_button button { align-self: flex-end; width: 170.94px; } .product__btn .variations_form .single_variation_wrap { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 1em; } .product__meta { display: flex; flex-wrap: wrap; gap: 0.5em; font-size: 1.3rem; } .product__meta .sku { font-weight: 600; } .product__meta a { font-weight: 600; } .product__benefits { display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(4, 1fr); gap: 0.5em; border-radius: 8px; background-color: #f6f6f6; padding: 0.5em; } .product__benefit { display: flex; flex-direction: column; align-items: center; gap: 0.1em; } .product__benefit-text { font-size: 1.1rem; text-align: center; } .product__tabs { display: flex; flex-direction: column; margin-bottom: 2em; } .product__tabs-btns { display: flex; gap: 0em; overflow-x: scroll; } @media only screen and (min-width: 767px) { .product__tabs-btns { overflow-x: unset; } } .product__tabs-content { display: none; border: 1px solid #009ee1; padding: 1em; } .product__tabs-content #respond { display: flex; flex-direction: column; gap: 1em; padding: 1em !important; } .product__tabs-content #respond h3 { font-weight: 600; font-size: 2rem; } .product__tabs-content #respond #commentform { display: flex; flex-direction: column; gap: 0.5em; } .product__tabs-content #respond #commentform p a { text-decoration: underline; } .product__tabs-content #respond #commentform p.comment-form-comment { display: flex; flex-direction: column; gap: 0.5em; margin-block: 0.5em; } .product__tabs-content #respond #commentform p.comment-form-comment label { font-size: 1.6rem; } .product__tabs-content #respond #commentform p.comment-form-comment textarea { border-radius: 8px; background-color: #f6f6f6; padding: 1em; } .product__tabs-content #respond #commentform p.form-submit input { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; padding: 1em 2em; width: 100%; } .product__tabs-content #respond #commentform p.form-submit input:hover { background-color: #000; } .product__tab { background-color: #057db1; padding: 0.5em 1em; color: #ffffff; } .product__tab-description, .product__tab-additional { line-height: 180%; } .product__tab-description strong, .product__tab-additional strong { font-weight: 700; } .product__tab-description p, .product__tab-additional p { margin-bottom: 1em; } .product__tab-description h3, .product__tab-additional h3 { margin-block: 1em; font-weight: 700; } .product__tab-description ul, .product__tab-additional ul { padding-left: 2em; } .product__tab-description ul li, .product__tab-additional ul li { position: relative; margin-bottom: 1em; } .product__tab-description ul li::before, .product__tab-additional ul li::before { position: absolute; top: 9px; left: -20px; border-radius: 8px; background-color: #009ee1; padding: 0.1em; width: 10px; height: 10px; content: ""; } .product__tab-specs, .product__tab-reviews { display: flex; flex-direction: column; gap: 1em; } .product__tab-item { display: flex; align-items: center; gap: 0.3em; } .product__tab-icon { width: 20px; height: 20px; } .product__tab-reviews { margin-bottom: 2em; } .product__comment { border-radius: 8px; background-color: #f6f6f6; padding: 1em; } .product__comment-top { display: flex; flex-direction: column; gap: 0.3em; } @media only screen and (min-width: 767px) { .product__comment-top { flex-direction: row; align-items: center; gap: 1em; } } .product__comment-content { display: flex; flex-direction: column; gap: 0.3em; } .product__comment-meta { font-size: 1.3rem; } @media only screen and (min-width: 767px) { .product__comment-meta { font-size: 1.5rem; } } .product__comment-meta strong { font-weight: 600; } .product__comment-text { font-size: 1.4rem; line-height: 180%; } @media only screen and (min-width: 767px) { .product__comment-text { font-size: 1.6rem; } } .product__tab.active { background-color: #009ee1; font-weight: 600; } .product__stars { position: relative; -webkit-mask: url("/wp-content/uploads/2024/11/star.svg") left top; mask: url("/wp-content/uploads/2024/11/star.svg") left top; -webkit-mask-size: 16px; mask-size: 16px; transition: all 0.3s ease-out; margin: 0; background-color: #1e1f1f; width: 80px !important; height: 16px !important; overflow: hidden; } .product__stars::before { content: unset !important; } .product__star { position: absolute; top: 0; left: 0; -webkit-mask: url("/wp-content/uploads/2024/11/star.svg") left top; mask: url("/wp-content/uploads/2024/11/star.svg") left top; -webkit-mask-size: 16px; mask-size: 16px; transition: all 0.3s ease-out; height: 16px; overflow: hidden; text-indent: -9000em; } .product__star:nth-child(1) { width: 20%; } .product__star:nth-child(2) { width: 40%; } .product__star:nth-child(3) { width: 60%; } .product__star:nth-child(4) { width: 80%; } .product__star:nth-child(5) { width: 100%; } .product__star-filled { background-color: #009ee1; } .product__related { display: flex; flex-direction: column; gap: 1em; } .product__related .products__btn { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; background-color: #009ee1; } .product__related .products__btn:hover { background-color: #000; } .product__related .products__btn:hover { background-color: #057db1; } .product__related .products__price > span { margin-right: 5px; } .pros { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .pros { padding: 3em 0; } } .pros__boxes { display: grid; gap: 2em; } @media only screen and (min-width: 767px) { .pros__boxes { display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(5, 1fr); gap: 1em; } } .pros .section__title { margin-bottom: 1em; padding: 0 0em 0 0.5em; font-weight: 700; font-size: 2.4rem; text-align: center; text-transform: uppercase; } @media only screen and (min-width: 767px) { .pros .section__title { font-size: 3.2rem; } } .pros__box { display: flex; flex-direction: column; align-items: center; gap: 1em; transition: all 0.3s; border: 1px solid #ccc; border-radius: 8px; background-color: #f6f6f6; padding: 2em 1em; } .pros__box-title { font-weight: 600; font-size: 2rem; letter-spacing: 1px; text-transform: uppercase; } @media only screen and (min-width: 767px) { .pros__box:hover { box-shadow: 0 0 15px #ccc; } } .pros__box-icon { width: 80px; } @media only screen and (min-width: 767px) { .pros__box-icon { width: 115px; } } .pros__box-text { text-align: center; } .pros__box-text p { font-size: 1.5rem; line-height: 180%; } .latest__posts { display: grid; gap: 1.5em; } @media only screen and (min-width: 767px) { .latest__posts { grid-template-rows: 1fr; grid-template-columns: 2fr 1fr; align-items: flex-start; } } .latest__left-item, .latest__right-item { display: flex; position: relative; flex-direction: column; } .latest__left-item a, .latest__right-item a { display: flex; flex-direction: column; align-items: stretch; border-radius: 8px; overflow: hidden; } .latest__left-item:hover .latest__img::after, .latest__right-item:hover .latest__img::after { background-color: rgba(0, 0, 0, 0); } .latest__left-item:hover .latest__img img, .latest__right-item:hover .latest__img img { transform: scale(1.05); } .latest__right { display: flex; flex-direction: column; gap: 1.5em; } .latest__img { position: relative; align-self: stretch; overflow: hidden; } .latest__img::after { position: absolute; top: 0; left: 0; transition: all 0.3s; background-color: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; content: ""; } .latest__img-left img, .latest__img-right img { display: block; transition: all 0.3s; width: 100%; object-fit: cover; } .latest__img-left img { height: 475px; } .latest__date { display: flex; position: absolute; transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; right: 10px; flex-direction: row; align-items: center; align-self: flex-start; gap: 0.3em; text-align: center; } .latest__date:hover { background-color: #000; } .latest__date-left { font-size: 1.5rem; } .latest__date-right { font-size: 1.3rem; } .latest__content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.2em; background-color: #1e1f1f; width: 100%; } .latest__content h3 { color: #ffffff; font-weight: 700; } .latest__content p { color: #f6f6f6; font-size: 1.4rem; } .latest__content-left { padding: 1em; } .latest__content-right { padding: 0.8em 1em; } .latest__categories, .latest__tags { display: flex; position: absolute; left: 10px; align-items: center; gap: 0.5em; z-index: 20; padding-left: 0.3em; } .latest__categories a, .latest__tags a { font-weight: 700; font-size: 1.3rem; transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; background-color: #009ee1; padding: 0.3em 0.6em; } .latest__categories a:hover, .latest__tags a:hover { background-color: #000; } .latest__categories a:hover, .latest__tags a:hover { background-color: #057db1; } .latest__categories, .latest__date { top: 15px; } .latest__tags a { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; background-color: #f6f6f6; padding: 0.3em 0.6em; color: #000; font-size: 1.2rem; } .latest__tags a:hover { background-color: #000; } .latest__tags a:hover { background-color: #f6f6f6; } .latest__tags-left { bottom: 120px; } .latest__tags-right { bottom: 90px; } .latest__btn { position: relative; color: #f6f6f6; } .latest__btn::after { position: absolute; bottom: 0px; left: 0; transition: all 0.3s; background-color: #ffffff; width: 0; height: 1px; content: ""; } .latest__btn:hover::after { width: 100%; } .partners { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .partners { padding: 3em 0; } } .partners__boxes { display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(2, 1fr); align-items: center; } @media only screen and (min-width: 567px) { .partners__boxes { grid-template-columns: repeat(5, 1fr); } } @media only screen and (min-width: 767px) { .partners__boxes { grid-template-columns: repeat(7, 1fr); } } .partners__box { display: flex; justify-content: center; outline: 1px solid #f6f6f6; } .partners__box:hover img { filter: grayscale(0); } .partners__box img { filter: grayscale(1); transition: all 0.3s; padding: 1em; width: 120px; height: 120px; object-fit: contain; } @media only screen and (min-width: 567px) { .partners__box img { width: 140px; height: 140px; } } .posts { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .posts { padding: 3em 0; } } .posts__posts { display: grid; gap: 1.5em; } @media only screen and (min-width: 567px) { .posts__posts { grid-template-columns: repeat(2, 1fr); align-items: flex-start; gap: 2em; } } @media only screen and (min-width: 767px) { .posts__posts { grid-template-columns: repeat(3, 1fr); gap: 3em; } } @media only screen and (min-width: 1023px) { .posts__posts { grid-template-columns: repeat(4, 1fr); } } .posts__post { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; } .posts__bottom { background-color: #f6f6f6; padding: 1em 1em; } .posts__top img { display: block; width: 100%; } .posts__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3em; margin-bottom: 0.5em; } .posts__tags, .posts__categories { display: flex; justify-content: space-between; align-items: center; gap: 0.3em; font-size: 1.1rem; text-align: center; } .posts__categories { border-radius: 8px; background-color: #1e1f1f; padding: 0.3em 0.6em; color: #ffffff; } .posts__tags a { color: #000; text-decoration: underline; } .posts__title { margin-block: 0.5em; color: #009ee1; font-weight: 600; } .posts__date { font-style: italic; font-size: 1.4rem; } .posts .nav-links { display: flex; justify-content: center; align-items: flex-end; gap: 0.5em; border: unset; padding: 1em 0; } @media only screen and (min-width: 767px) { .posts .nav-links { justify-content: flex-end; } } .posts .nav-links .page-numbers { display: block; margin: 0; border-radius: 8px; padding: 0; padding: 0.5em; min-width: 1em; font-weight: 400; font-size: 1em; line-height: 1; text-decoration: none; } .posts .nav-links .page-numbers:hover { background-color: #f6f6f6; } .posts .nav-links .page-numbers.current { background-color: #1e1f1f; color: #ffffff; } .post { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .post { padding: 3em 0; } } .post__boxes { display: flex; flex-direction: column; gap: 2em; } @media only screen and (min-width: 1023px) { .post__boxes { display: grid; grid-template-rows: 1fr; grid-template-columns: 3fr 1fr; gap: 4em; } } .post__left { display: flex; flex-direction: column; gap: 2em; } .post__related { display: flex; flex-direction: column; gap: 2em; } .post__related h2 { font-weight: 600; font-size: 2rem; text-align: center; text-transform: uppercase; } .post__related-items { display: flex; flex-direction: column; gap: 1em; } .post__related-item { display: flex; align-items: center; gap: 1.5em; border-radius: 8px; background-color: #f6f6f6; overflow: hidden; } .post__related-thumbnail { display: block; width: 90px; height: 90px; object-fit: cover; } .post__related-content { display: flex; flex-direction: column; gap: 0.3em; } .post__related-title { font-weight: 600; } .post__related-title:hover { text-decoration: underline; } .post__related-date { color: #009ee1; font-style: italic; font-size: 1.3rem; } .post__top { display: flex; position: relative; justify-content: center; } .post__top img { display: block; border-top-right-radius: 8px; border-top-left-radius: 8px; width: 95%; max-height: 450px; object-fit: cover; } .post__info { display: flex; position: absolute; bottom: 0; flex-direction: column; box-shadow: 0 0 20px rgba(204, 204, 204, 0.8); border: 1px solid #ccc; border-radius: 8px; background-color: #f6f6f6; padding: 0.5em 1em; width: 100%; } .post__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3em; margin-bottom: 0.5em; } .post__tags, .post__categories { display: flex; justify-content: space-between; align-items: center; gap: 0.3em; font-size: 1.1rem; text-align: center; } @media only screen and (min-width: 767px) { .post__tags, .post__categories { font-size: 1.4rem; } } .post__categories { border-radius: 8px; background-color: #1e1f1f; padding: 0.3em 0.6em; color: #ffffff; } .post__tags a { color: #000; text-decoration: underline; } .post__title { margin-bottom: 0.5em; color: #009ee1; font-weight: 600; } @media only screen and (min-width: 767px) { .post__title { font-size: 1.8rem; } } .post__date { position: absolute; top: 10px; right: 20px; border-radius: 8px; background-color: #057db1; padding: 3px 6px; color: #ffffff; font-style: italic; font-weight: 600; font-size: 1.4rem; } @media only screen and (min-width: 767px) { .post__date { right: 40px; } } .post__content { padding: 0.5em 1em; line-height: 180%; line-height: 180%; } .post__content strong { font-weight: 700; } .post__content img { border-radius: 8px; width: 100%; height: 400px; object-fit: cover; } .post__content p { margin-bottom: 1em; } .post__content h3 { margin-block: 1em; font-weight: 700; } .post__content ul { padding-left: 2em; } .post__content ul li { position: relative; margin-bottom: 1em; } .post__content ul li::before { position: absolute; top: 9px; left: -20px; border-radius: 8px; background-color: #009ee1; padding: 0.1em; width: 10px; height: 10px; content: ""; } .banner__content { position: relative; border-radius: 8px; width: 100%; height: 200px; overflow: hidden; } .banner__content::after { position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; content: ""; } .banner img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .banner__texts { display: flex; position: relative; justify-content: center; align-items: center; z-index: 20; padding: 1em 2em; height: 100%; } .banner__texts h2 { color: #ffffff; font-size: 2.4rem; } .banner__texts p { width: 100%; color: #ffffff; font-size: 1.8rem; line-height: 170%; text-align: center; } @media only screen and (min-width: 767px) { .banner__texts p { font-size: 2rem; } } .banner__texts p a { color: #ffffff; font-weight: 700; transition: all 0.3s; } .banner__texts p a:hover { color: #009ee1; } .banner.full .banner__texts { flex-direction: column; gap: 0.5em; } .footer { padding: 1.5em 0; background-color: #1e1f1f; } @media only screen and (min-width: 1023px) { .footer { padding: 3em 0; } } .footer__top, .footer__middle, .footer__bottom { margin-bottom: 2em; border-bottom: 1px solid #373737; padding-bottom: 2em; } .footer__top { display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(1, 1fr); gap: 1em; } @media only screen and (min-width: 567px) { .footer__top { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 767px) { .footer__top { grid-template-columns: repeat(5, 1fr); } } .footer__box { width: 100%; } .footer__box:last-child { justify-content: center; text-align: center; } @media only screen and (min-width: 767px) { .footer__box:last-child { text-align: unset; } } .footer__box:last-child .footer__box-title { display: block; margin-block: 1em; } @media only screen and (min-width: 767px) { .footer__box:last-child .footer__box-title { margin-top: 0; margin-bottom: 1em; } } .footer__box:nth-child(4) .footer__btn { border-bottom: unset; } .footer__box-title { display: none; margin-bottom: 1em; width: 100%; color: #ffffff; font-weight: 600; text-align: center; text-transform: uppercase; } @media only screen and (min-width: 767px) { .footer__box-title { display: unset; } } .footer__btn { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #373737; padding: 0.5em 1em; width: 100%; color: #ffffff; font-weight: 600; text-transform: uppercase; } .footer__btn svg { transition: all 0.3s ease-in-out; } @media only screen and (min-width: 767px) { .footer__btn { display: none; } } .footer__btn.active svg { transform: rotateX(180deg); } .footer__btn.active + .footer__nav { display: block; } .footer__nav { display: none; margin-top: 1em; padding-left: 1em; } .footer__nav ul li { margin-bottom: 0.5em; color: #f6f6f6; } .footer__nav ul li a { font-size: 1.4rem; } .footer__nav ul li a:hover { text-decoration: underline; } @media only screen and (min-width: 767px) { .footer__nav { display: block; padding-left: 0; } } .footer__socials { display: flex; justify-content: center; align-items: center; gap: 1em; } .footer__socials-item { display: flex; justify-content: center; align-items: center; border: 1px solid #f6f6f6; border-radius: 50%; padding: 0.5em; } .footer__socials-icon { width: 20px; } .footer__middle { display: grid; align-items: center; gap: 0.8em; } @media only screen and (min-width: 567px) { .footer__middle { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 767px) { .footer__middle { grid-template-columns: repeat(6, 1fr); } } .footer__middle p { color: #ffffff; font-size: 1.3rem; text-align: center; } @media only screen and (min-width: 767px) { .footer__middle p { font-size: 1.4rem; } } .footer__middle p span { font-weight: 600; text-transform: uppercase; } .footer__bottom { display: grid; align-items: center; gap: 2em; } @media only screen and (min-width: 567px) { .footer__bottom { grid-template-columns: repeat(2, 1fr); } } .footer__bottom p { color: #ffffff; font-size: 1.3rem; text-align: center; } @media only screen and (min-width: 767px) { .footer__bottom p { font-size: 1.4rem; } } .footer__bottom p span { font-weight: 600; text-transform: uppercase; } .footer__bottom .footer__box { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 2em; } @media only screen and (min-width: 767px) { .footer__bottom .footer__box { align-items: center; } } @media only screen and (min-width: 1280px) { .footer__bottom .footer__box { flex-wrap: nowrap; } } .footer__bottom .footer__box p { font-weight: 600; text-transform: uppercase; } .footer__copy { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.1em; text-align: center; } .footer__text, .footer__project { font-size: 1.3rem; text-transform: uppercase; } @media only screen and (min-width: 767px) { .footer__text, .footer__project { font-size: 1.4rem; } } .footer__text span, .footer__project span { font-weight: 600; } .footer__text { color: #ffffff; } .footer__project { color: #373737; } .footer__project a:hover { color: #009ee1; } .footer__logo { display: block; text-align: center; } .footer__logo img { max-width: 140px; } section.text { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { section.text { padding: 3em 0; } } section.text .text__editor { line-height: 180%; } section.text .text__editor h1 { font-size: 3.4rem; } section.text .text__editor h2 { font-size: 2.8rem; } section.text .text__editor h3 { font-size: 2.4rem; } section.text .text__editor h4 { font-size: 2rem; } section.text .text__editor h5 { font-size: 1.8rem; } section.text .text__editor h6 { font-size: 1.6rem; } section.text .text__editor h1, section.text .text__editor h2, section.text .text__editor h3, section.text .text__editor h4, section.text .text__editor h5, section.text .text__editor h6 { margin-top: 1em; margin-bottom: 1em; font-weight: 600; } section.text .text__editor p { margin-bottom: 1em; font-size: 1.4rem; } section.text .text__editor strong { font-weight: 600; } section.text .text__editor ul, section.text .text__editor ol { padding-left: 2em; list-style: none; } section.text .text__editor ul li, section.text .text__editor ol li { position: relative; margin-bottom: 1em; font-size: 1.4rem; } section.text .text__editor ul li::before, section.text .text__editor ol li::before { position: absolute; top: 9px; left: -20px; border-radius: 8px; background-color: #009ee1; padding: 0.1em; width: 10px; height: 10px; content: ""; } section.text .text__editor a:hover { text-decoration: underline; } .account { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .account { padding: 3em 0; } } .account__boxes { display: grid; gap: 1em; } @media only screen and (min-width: 567px) { .account__boxes { grid-template-rows: 1fr; grid-template-columns: 0.7fr 2fr; } } .account__nav, .account__content { background-color: #f6f6f6; padding: 1em 2em; } .account__nav { align-self: flex-start; } .account__nav li { margin-bottom: 0.5em; } .account__nav li:first-of-type { margin-top: 1em; } .account__nav li:hover a { color: #009ee1; } .account__nav li a { display: block; padding: 0.5em 0em; font-size: 1.4rem; } @media only screen and (min-width: 567px) { .account__nav li a { font-size: 1.6rem; } } .account__nav li a[aria-current=page] { color: #009ee1; font-weight: 600; } .account__title { border-bottom: 1px solid #373737; padding-bottom: 0.5em; font-weight: 600; font-size: 2.2rem; text-align: left; text-transform: uppercase; } .account__content { display: flex; flex-direction: column; gap: 0.5em; } .account__content h2 { margin-bottom: 0.5em; font-size: 2.2rem; } .account__content h2 span { font-weight: 600; } .account__content p mark { color: #009ee1; font-weight: 600; } .account__content .woocommerce-order-details { margin-top: 1em; margin-bottom: 1em; } .account__info { font-size: 1.4rem; line-height: 180%; } @media only screen and (min-width: 567px) { .account__info { font-size: 1.6rem; } } .account__info span { font-weight: 600; } .account__logout { color: #ff0000; font-weight: 600; } .account .woocommerce-columns, .account .u-columns { display: grid; gap: 2em; } .account .woocommerce-columns::before, .account .woocommerce-columns::after, .account .u-columns::before, .account .u-columns::after { display: none; } @media only screen and (min-width: 767px) { .account .woocommerce-columns, .account .u-columns { grid-template-rows: 1fr; grid-template-columns: repeat(2, 1fr); } } .account .woocommerce-columns .woocommerce-column, .account .woocommerce-columns .woocommerce-Address, .account .u-columns .woocommerce-column, .account .u-columns .woocommerce-Address { float: unset; width: 100%; } .account .woocommerce-columns .woocommerce-column .woocommerce-Address-title.title::before, .account .woocommerce-columns .woocommerce-column .woocommerce-Address-title.title::after, .account .woocommerce-columns .woocommerce-Address .woocommerce-Address-title.title::before, .account .woocommerce-columns .woocommerce-Address .woocommerce-Address-title.title::after, .account .u-columns .woocommerce-column .woocommerce-Address-title.title::before, .account .u-columns .woocommerce-column .woocommerce-Address-title.title::after, .account .u-columns .woocommerce-Address .woocommerce-Address-title.title::before, .account .u-columns .woocommerce-Address .woocommerce-Address-title.title::after { display: none; } .account .woocommerce-columns .woocommerce-column .woocommerce-Address-title.title a, .account .woocommerce-columns .woocommerce-Address .woocommerce-Address-title.title a, .account .u-columns .woocommerce-column .woocommerce-Address-title.title a, .account .u-columns .woocommerce-Address .woocommerce-Address-title.title a { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; display: inline-block; float: unset !important; margin-bottom: 1em; font-size: 1.2rem; } .account .woocommerce-columns .woocommerce-column .woocommerce-Address-title.title a:hover, .account .woocommerce-columns .woocommerce-Address .woocommerce-Address-title.title a:hover, .account .u-columns .woocommerce-column .woocommerce-Address-title.title a:hover, .account .u-columns .woocommerce-Address .woocommerce-Address-title.title a:hover { background-color: #000; } .account .woocommerce-orders-table, .account .woocommerce-table--order-details, .account address { border: 1px solid #ccc !important; border-radius: 8px !important; background-color: #ffffff; padding: 1em 1em; } .account .woocommerce-orders-table th, .account .woocommerce-table--order-details th, .account address th { padding: 0.5em !important; } .account .woocommerce-orders-table th a:hover, .account .woocommerce-table--order-details th a:hover, .account address th a:hover { color: #009ee1; } .account .woocommerce-orders-table tbody th, .account .woocommerce-orders-table tbody td, .account .woocommerce-table--order-details tbody th, .account .woocommerce-table--order-details tbody td, .account address tbody th, .account address tbody td { border-top: 1px solid #ccc !important; padding: 0.5em; } .account .woocommerce-orders-table .woocommerce-orders-table__cell-order-total, .account .woocommerce-table--order-details .woocommerce-orders-table__cell-order-total, .account address .woocommerce-orders-table__cell-order-total { font-weight: 600; } .account .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions, .account .woocommerce-table--order-details .woocommerce-orders-table__cell-order-actions, .account address .woocommerce-orders-table__cell-order-actions { display: flex; flex-direction: column; gap: 0.5em; } .account .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a, .account .woocommerce-table--order-details .woocommerce-orders-table__cell-order-actions a, .account address .woocommerce-orders-table__cell-order-actions a { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; } .account .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a:hover, .account .woocommerce-table--order-details .woocommerce-orders-table__cell-order-actions a:hover, .account address .woocommerce-orders-table__cell-order-actions a:hover { background-color: #000; } .account .woocommerce-orders-table .woocommerce-table__product-name.product-name a:hover, .account .woocommerce-table--order-details .woocommerce-table__product-name.product-name a:hover, .account address .woocommerce-table__product-name.product-name a:hover { color: #009ee1; } .account .woocommerce-orders-table .woocommerce-orders-table__header-order-rt-invoice, .account .woocommerce-orders-table .woocommerce-orders-table__cell-order-rt-invoice, .account .woocommerce-table--order-details .woocommerce-orders-table__header-order-rt-invoice, .account .woocommerce-table--order-details .woocommerce-orders-table__cell-order-rt-invoice, .account address .woocommerce-orders-table__header-order-rt-invoice, .account address .woocommerce-orders-table__cell-order-rt-invoice { display: none; } .account .woocommerce-orders-table .woocommerce-orders-table__cell-rt-invoice a, .account .woocommerce-table--order-details .woocommerce-orders-table__cell-rt-invoice a, .account address .woocommerce-orders-table__cell-rt-invoice a { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; } .account .woocommerce-orders-table .woocommerce-orders-table__cell-rt-invoice a:hover, .account .woocommerce-table--order-details .woocommerce-orders-table__cell-rt-invoice a:hover, .account address .woocommerce-orders-table__cell-rt-invoice a:hover { background-color: #000; } .account address { line-height: 180%; } .account address .woocommerce-customer-details--phone, .account address .woocommerce-customer-details--email { color: #009ee1; font-weight: 600; } .woocommerce-error, .woocommerce-info, .woocommerce-message { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1em; border: unset; border-radius: 8px; padding: 0.5em 1em; padding-left: 3em; color: #ffffff; } .woocommerce-error::after, .woocommerce-info::after, .woocommerce-message::after { display: none; } .woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before { top: 50%; left: 13px; transform: translateY(-50%); color: #ffffff; } .woocommerce-error li, .woocommerce-info li, .woocommerce-message li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1em; width: 100%; } .woocommerce-error a.button, .woocommerce-error a.restore-item, .woocommerce-info a.button, .woocommerce-info a.restore-item, .woocommerce-message a.button, .woocommerce-message a.restore-item { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; float: unset !important; width: 100%; font-weight: 400; } .woocommerce-error a.button:hover, .woocommerce-error a.restore-item:hover, .woocommerce-info a.button:hover, .woocommerce-info a.restore-item:hover, .woocommerce-message a.button:hover, .woocommerce-message a.restore-item:hover { background-color: #000; } @media only screen and (min-width: 567px) { .woocommerce-error a.button, .woocommerce-error a.restore-item, .woocommerce-info a.button, .woocommerce-info a.restore-item, .woocommerce-message a.button, .woocommerce-message a.restore-item { width: unset; } } .woocommerce-error { background-color: #ff0000 !important; } .woocommerce-error a.button { background-color: #ffffff; color: #000; } .woocommerce-error a.button:hover { background-color: #f6f6f6; } .woocommerce-info { background-color: #1e1f1f; } .woocommerce-info a.button { background-color: #ffffff; color: #000; } .woocommerce-info a.button:hover { background-color: #000; color: #ffffff; } .woocommerce-message { background-color: #2ab62a; } .woocommerce-message a.button, .woocommerce-message a.restore-item { background-color: #ffffff; color: #000; } .woocommerce-message a.button:hover, .woocommerce-message a.restore-item:hover { background-color: #000; color: #ffffff; } .cart { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .cart { padding: 3em 0; } } .cart__boxes { display: flex; flex-direction: column; gap: 20px; } .cart__form { display: flex; flex-direction: column; } .cart__table { margin-bottom: 20px; border-collapse: collapse; width: 100%; } .cart__table-head { background-color: #373737; } .cart__table-head-row { border-bottom: 1px solid #ccc; } .cart__table-header { border-left: 1px solid #373737; padding: 0.5em 1em; color: #ffffff; text-align: left; } .cart__table-header--thumbnail { width: 0%; } .cart__table-header--name { width: 35%; } .cart__table-header--price, .cart__table-header--quantity, .cart__table-header--subtotal, .cart__table-header--remove { width: 0%; } .cart__table-body .cart__item-thumbnail, .cart__table-body .cart__item-name, .cart__table-body .cart__item-price, .cart__table-body .cart__item-quantity, .cart__table-body .cart__item-subtotal, .cart__table-body .cart__item-remove { vertical-align: middle; border-bottom: 1px solid #373737; padding: 0.3em 0.6em; font-weight: 600; } .cart__table-body .cart__item-thumbnail .variation, .cart__table-body .cart__item-name .variation, .cart__table-body .cart__item-price .variation, .cart__table-body .cart__item-quantity .variation, .cart__table-body .cart__item-subtotal .variation, .cart__table-body .cart__item-remove .variation { display: flex; align-items: center; gap: 0.5em; color: #000; } .cart__table-body .cart__item-remove::before, .cart__table-body .cart__item-remove::after { display: none; } .cart__table-body .cart__item-quantity .quantity .qty { margin: 0; border-radius: 5px; background-color: #f6f6f6; width: unset; } .cart__table-body .cart__item-name { color: #009ee1; } .cart__table-body .cart__item-name:hover { color: #057db1; } .cart__table-body .cart__item-remove-link { display: block; display: flex; justify-content: center; align-items: center; background-color: #ff0000; width: 25px; height: 25px; color: #ffffff; font-size: 2rem; text-decoration: none; } .cart__table-body .cart__item-thumbnail::before, .cart__table-body .cart__item-thumbnail::after { display: none; } .cart__table-body .cart__item-thumbnail img { padding: 0.3em; width: 50px; } .cart__actions { display: flex; justify-content: flex-end; gap: 10px; } .cart__update { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; background-color: #009ee1; } .cart__update:hover { background-color: #000; } .cart__update:hover { background-color: #057db1; } .cart__collaterals { margin-top: 20px; } .cart__collaterals h2 { margin-bottom: 1em; font-weight: 600; font-size: 2.2rem; text-align: center; text-transform: uppercase; } @media only screen and (min-width: 767px) { .cart__collaterals h2 { font-size: 3rem; } } .cart__collaterals table { margin-bottom: 20px !important; border: unset !important; border-collapse: collapse !important; width: 100% !important; } .cart__collaterals table .shipping-calculator-button { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; display: inline-block; margin-bottom: 0.3em; } .cart__collaterals table .shipping-calculator-button:hover { background-color: #000; } .cart__collaterals table p.woocommerce-shipping-destination { margin-block: 0.5em; } .cart__collaterals table .woocommerce-Price-amount.amount { font-weight: 600; } .cart__collaterals table tr td, .cart__collaterals table tr th { border-top: 1px solid #1e1f1f !important; } .cart__collaterals table tr:first-child td, .cart__collaterals table tr:first-child th { border-top: unset !important; } .cart__collaterals a.checkout-button.button.alt.wc-forward { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; margin-bottom: 0; padding: 0.6em 1.2em !important; font-weight: 400; font-size: 2rem; } .cart__collaterals a.checkout-button.button.alt.wc-forward:hover { background-color: #000; } .cart__collaterals button.button { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; font-weight: 400; } .cart__collaterals button.button:hover { background-color: #000; } .cart__collaterals button.button:hover { color: #ffffff; } .checkout { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .checkout { padding: 3em 0; } } .checkout__boxes { display: flex; flex-direction: column; gap: 2em; } @media only screen and (min-width: 767px) { .checkout__boxes { display: grid; grid-template-rows: 1fr; grid-template-columns: 2fr 1.1fr; } } .checkout__details { border: 2px solid #f6f6f6; border-radius: 8px; padding: 1em; } .checkout__summary { border: 2px solid #f6f6f6; border-radius: 8px; padding: 1em; } .checkout__summary .shop_table { border: 2px solid #f6f6f6 !important; border-radius: 8px !important; } .checkout__summary .shop_table th, .checkout__summary .shop_table td { padding: 0.3em 0.6em !important; font-size: 1.4rem; } .checkout__summary .shop_table th { font-weight: 400 !important; } .checkout__summary .shop_table td { font-weight: 600 !important; } .checkout__summary .woocommerce-checkout-payment { background-color: #f6f6f6 !important; } .checkout__summary .woocommerce-checkout-payment ul { display: flex; flex-direction: column; gap: 0.5em; border-bottom: 1px solid #ccc !important; } .checkout__summary .woocommerce-checkout-payment ul::before, .checkout__summary .woocommerce-checkout-payment ul::after { display: none !important; } .checkout__summary .woocommerce-checkout-payment ul li { display: flex; align-items: center; } .checkout__summary .woocommerce-checkout-payment ul li::before, .checkout__summary .woocommerce-checkout-payment ul li::after { display: none !important; } .checkout__summary .woocommerce-checkout-payment ul li input { display: unset !important; margin-right: 1em !important; border-radius: 50%; background-color: #ccc; width: 10px; height: 10px; } .checkout__summary .woocommerce-checkout-payment ul li input:checked { background-color: #2ab62a; } .checkout__summary .woocommerce-checkout-payment ul li input:checked + label { font-weight: 600 !important; } .checkout__summary .woocommerce-checkout-payment ul li label { display: flex; justify-content: space-between; align-items: center; width: 100%; } .checkout__summary .woocommerce-checkout-payment ul li label img { width: 50px; height: auto; object-fit: contain; } .checkout__summary .woocommerce-checkout-payment .payment_box { grid-area: 2/1/3/3; margin: 0.5em 0 !important; background-color: #ccc !important; font-size: 1.4rem !important; line-height: 140% !important; } .checkout__summary .woocommerce-checkout-payment .payment_box::before { border: 1em solid #ccc !important; border-top-color: transparent !important; border-right-color: transparent !important; border-left-color: transparent !important; } .checkout__summary .woocommerce-checkout-payment .payment_box::after { display: none !important; } .checkout__summary .woocommerce-checkout-payment .woocommerce-privacy-policy-text { margin-bottom: 0.5em; font-size: 1.2rem !important; text-align: center; } .checkout__summary .woocommerce-checkout-payment .woocommerce-privacy-policy-text p { line-height: 160% !important; } .checkout__summary .woocommerce-checkout-payment .woocommerce-privacy-policy-text p a { font-weight: 600 !important; } .checkout__summary .woocommerce-checkout-payment .woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox input { display: unset !important; margin-right: 0.5em !important; border-radius: 50%; background-color: #ccc; width: 10px; height: 10px; } .checkout__summary .woocommerce-checkout-payment .woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox input:checked { background-color: #2ab62a; } .checkout__summary .woocommerce-checkout-payment .woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox input:checked + span { font-weight: 600 !important; } .checkout__summary .woocommerce-checkout-payment .woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox span { font-size: 1.2rem !important; } .checkout__summary .woocommerce-checkout-payment .woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox span a { border-bottom: 1px solid #000; } .checkout__summary .woocommerce-checkout-payment button.button.alt { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; background-color: #009ee1; padding: 0.8em 1.6em; } .checkout__summary .woocommerce-checkout-payment button.button.alt:hover { background-color: #000; } .checkout__summary .woocommerce-checkout-payment button.button.alt:hover { background-color: #057db1; } .checkout__billing-options { display: flex; justify-content: flex-start; gap: 2em; margin-bottom: 1em; } .checkout__billing-options label { display: flex; align-items: center; } .checkout__billing-options input { margin-right: 0.5em; border-radius: 50%; background-color: #ccc; width: 10px; height: 10px; } .checkout__billing-options input:checked { background-color: #2ab62a; } .checkout__billing-options input:checked + span { font-weight: 600; } .checkout__billing-name { display: flex; align-items: center; gap: 1em; margin-bottom: 1em; } .checkout__row { width: 50%; } .checkout__row label { font-weight: 600; } .checkout__summary-title { margin-bottom: 1em; font-weight: 600; font-size: 2rem; } .checkout__coupon { margin-block: 1em; } .checkout__coupon-title { margin-bottom: 0.5em; font-weight: 600; font-size: 2rem; } .checkout__coupon-btn:hover { color: #ffffff !important; } .checkout .woocommerce-checkout input[type=text], .checkout .woocommerce-checkout input[type=email], .checkout .woocommerce-checkout input[type=password], .checkout .woocommerce-checkout input[type=tel], .checkout .woocommerce-checkout textarea { margin-block: 1em; border: 1px solid #ccc; border-radius: 4px; padding: 0.5em 1em; width: 100%; font-size: 1.4rem; } .checkout .woocommerce-checkout input:focus, .checkout .woocommerce-checkout textarea:focus { outline: none; border-color: #057db1; } .checkout .checkout__terms-checkbox { display: flex; align-items: center; gap: 10px; margin-top: 20px; background-color: #000; } .checkout .checkout__terms-checkbox input { width: auto; } .checkout .checkout__terms-checkbox label { font-size: 14px; } .checkout .woocommerce-checkout .form-row.woocommerce-invalid input { border-color: #ff0000; } .checkout .woocommerce-checkout .form-row.woocommerce-invalid select { border-color: #ff0000; } .checkout .woocommerce-checkout .form-row.woocommerce-invalid .select2-selection { border-color: #ff0000; } .checkout .woocommerce-billing-fields h3, .checkout .woocommerce-billing-fields label, .checkout .shipping_address h3, .checkout .shipping_address label, .checkout .woocommerce-additional-fields h3, .checkout .woocommerce-additional-fields label { margin-bottom: 1em; font-weight: 600; } .checkout .woocommerce-checkout .button { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; padding: 0.8em 1.6em; width: 100%; text-transform: uppercase; } .checkout .woocommerce-checkout .button:hover { background-color: #000; } .checkout #shipping_country_field, .checkout #billing_country_field { display: none; } .checkout #ship-to-different-address { margin-block: 1em; } .checkout #ship-to-different-address label { display: flex; align-items: center; } .checkout #ship-to-different-address input { margin-right: 0.5em; border-radius: 50%; background-color: #ccc; width: 10px; height: 10px; } .checkout #ship-to-different-address input:checked { background-color: #2ab62a; } .checkout #ship-to-different-address input:checked + span { font-weight: 600; } .checkout .form-row-first, .checkout .form-row-last { width: 49% !important; } .woocommerce-account-fields { margin-inline: 0.2em !important; margin-top: 1em !important; border-radius: 4px; background-color: #373737; padding: 0.5em 1em; color: #ffffff; } .woocommerce-account-fields p { display: flex; position: relative; justify-content: stretch; align-items: center; margin: 0 !important; padding: 0 !important; } .woocommerce-account-fields p::before, .woocommerce-account-fields p::after { display: none; } .woocommerce-account-fields p label { width: 100%; } .woocommerce-account-fields p label input { display: unset !important; margin-right: 0.5em !important; border-radius: 50%; background-color: #ccc; width: 10px; height: 10px; } .woocommerce-account-fields p label input:checked { background-color: #2ab62a; } .woocommerce-account-fields p label input:checked + span { font-weight: 600 !important; } .woocommerce-shipping-methods { display: flex; flex-direction: column; gap: 0.5em; } .woocommerce-shipping-methods li { margin: 0 !important; } .woocommerce-shipping-methods li input { display: unset !important; margin-right: 0.5em !important; border-radius: 50%; background-color: #ccc; width: 10px; height: 10px; } .woocommerce-shipping-methods li input:checked { background-color: #2ab62a; } .login { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .login { padding: 3em 0; } } .login__boxes { display: grid; gap: 2em; } @media only screen and (min-width: 767px) { .login__boxes { grid-template-columns: repeat(2, 1fr); } } .login__box { border: 1px solid #ccc; border-radius: 8px; padding: 1em 2em; } .login__box h2 { margin-bottom: 1em; font-weight: 600; font-size: 1.8rem; } .login__row p { display: flex; position: relative; flex-direction: column; } .login__label { font-weight: 600; } .login__input { margin-block: 1em; border: 1px solid #ccc; border-radius: 4px; padding: 0.5em 1em; width: 100%; font-size: 1.4rem; } .login__input:focus { outline: none; border-color: #057db1; } .login__show { position: absolute; right: 0; border-radius: 4px; background-color: #000; padding: 0.2em 0.4em; color: #ffffff; font-size: 1.4rem; } .login__actions { display: flex; align-items: center; gap: 2em; margin-block: 1em; } .login__actions label { width: 40%; font-weight: 400; font-size: 1.6rem; } .login__btn { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; width: 100%; } .login__btn:hover { background-color: #000; } .login__btn-login { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; background-color: #009ee1; width: 60%; } .login__btn-login:hover { background-color: #000; } .login__btn-login:hover { background-color: #057db1; } .login__btn-lost { margin-top: 1.5em; text-align: center; } .login__btn-lost a { border-bottom: 1px solid #000; font-weight: 600; font-size: 1.2rem; } .login__required { color: #ff0000; } .login .woocommerce-privacy-policy-text { margin-block: 0.5em; } .login .woocommerce-privacy-policy-text p { font-size: 1.2rem; text-align: center; } .login .woocommerce-privacy-policy-text p a { border-bottom: 1px solid #000; font-weight: 600; } .login .woocommerce-form__input { margin-right: 0.5em; border-radius: 50%; background-color: #ccc; width: 10px; height: 10px; } .login .woocommerce-form__input:checked { background-color: #2ab62a; } .login .woocommerce-form__input:checked + span { font-weight: 600; } .lost { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .lost { padding: 3em 0; } } .lost h2 { margin-bottom: 1em; font-weight: 600; font-size: 2rem; } .lost__box, .lost__form { display: flex; flex-direction: column; justify-content: center; align-items: center; } .lost__row { display: flex; flex-direction: column; } .lost__btn { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; } .lost__btn:hover { background-color: #000; } .lost .required { color: #ff0000; } .lost__label { font-weight: 600; } .lost__input { margin-block: 1em; border: 1px solid #ccc; border-radius: 4px; padding: 0.5em 1em; width: 100%; font-size: 1.4rem; } .lost__input:focus { outline: none; border-color: #057db1; } .woocommerce-address-fields label, .woocommerce-EditAccountForm.edit-account label { margin-bottom: 1em; font-weight: 600; } .woocommerce-address-fields input, .woocommerce-EditAccountForm.edit-account input { margin-block: 1em; border: 1px solid #ccc; border-radius: 4px; padding: 0.5em 1em; width: 100%; font-size: 1.4rem; } .woocommerce-address-fields input:focus, .woocommerce-EditAccountForm.edit-account input:focus { border-color: #057db1; } .woocommerce-address-fields p button.button, .woocommerce-EditAccountForm.edit-account p button.button { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; display: block; margin-top: 1em; padding: 1em 2em !important; width: 100%; } .woocommerce-address-fields p button.button:hover, .woocommerce-EditAccountForm.edit-account p button.button:hover { background-color: #000; } .woocommerce-address-fields p button.button:hover, .woocommerce-EditAccountForm.edit-account p button.button:hover { color: #ffffff; } .woocommerce-address-fields span em, .woocommerce-EditAccountForm.edit-account span em { display: inline-block; margin-top: 1em; color: #ff0000; font-style: italic; font-size: 1.3rem; } .woocommerce-address-fields legend, .woocommerce-EditAccountForm.edit-account legend { display: inline-block; padding-block: 0.5em; font-size: 2.2rem; } .left, .right { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .left, .right { padding: 3em 0; } } .left .section__boxes, .right .section__boxes { display: flex; flex-wrap: wrap; gap: 2em; } @media only screen and (min-width: 767px) { .left .section__boxes, .right .section__boxes { flex-wrap: nowrap; } } .left .section__info, .right .section__info { display: flex; flex-direction: column; gap: 1em; width: 100%; } @media only screen and (min-width: 767px) { .left .section__info, .right .section__info { width: 60%; } } .left .section__img, .right .section__img { width: 100%; } @media only screen and (min-width: 767px) { .left .section__img, .right .section__img { width: 40%; } } .left .section__img img, .right .section__img img { border-radius: 8px; width: 100%; } .left .section__title, .right .section__title { padding: 0 0em 0 0.5em; font-weight: 700; font-size: 2.4rem; text-transform: uppercase; } @media only screen and (min-width: 767px) { .left .section__title, .right .section__title { font-size: 3.2rem; } } .left .section__title-margin, .right .section__title-margin { margin-bottom: 0.2em; } .left .section__text, .right .section__text { box-shadow: 0 0 15px #ccc; border-radius: 8px; background-color: #009ee1; padding: 1em; color: #ffffff; font-size: 1.7rem; line-height: 180%; } @media only screen and (min-width: 767px) { .left .section__text, .right .section__text { font-size: 2rem; } } .left .section__info { order: 1; } .reviews { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .reviews { padding: 3em 0; } } .reviews .wp-gr .rpi-dot.active { background-color: #009ee1 !important; } .page404 { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .page404 { padding: 3em 0; } } .page404__boxes, .page404__box { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1em; } .page404__box { text-align: center; } .page404__box:last-of-type { flex-direction: row; align-items: center; } .page404__title { color: #ff0000; font-weight: bold; font-size: 6rem; text-align: center; } @media only screen and (min-width: 767px) { .page404__title { font-size: 10rem; } } .page404__text { font-size: 2rem; } .page404__description { color: #373737; font-size: 1.2rem; } .page404__btn { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; } .page404__btn:hover { background-color: #000; } .page404__btn-cta { transition: all 0.3s; border-radius: 8px; background-color: #1e1f1f; padding: 0.5em 1em; color: #ffffff; text-align: center; background-color: #009ee1; } .page404__btn-cta:hover { background-color: #000; } .page404__btn-cta:hover { background-color: #057db1; } .thankyou { padding: 1.5em 0; } @media only screen and (min-width: 1023px) { .thankyou { padding: 3em 0; } } .thankyou__boxes { display: flex; flex-direction: column; gap: 1em; margin: 0 !important; } .thankyou__boxes .woocommerce-order-details { margin: 0 !important; } .thankyou__boxes .woocommerce-order-details h2 { margin-bottom: 1em; font-weight: 600; } .thankyou__boxes .woocommerce-customer-details .addresses { display: flex; flex-direction: column; gap: 1em; } @media only screen and (min-width: 767px) { .thankyou__boxes .woocommerce-customer-details .addresses { flex-direction: row; gap: 2em; } } .thankyou__boxes .woocommerce-customer-details .addresses::before, .thankyou__boxes .woocommerce-customer-details .addresses::after { display: none !important; } .thankyou__boxes .woocommerce-customer-details .addresses h2 { margin-bottom: 1em; font-weight: 600; } .thankyou__boxes .woocommerce-customer-details .addresses .col-1, .thankyou__boxes .woocommerce-customer-details .addresses .col-2 { width: 100% !important; } .thankyou__success { margin-bottom: 0.5em; font-size: 2rem; text-align: center; } @media only screen and (min-width: 767px) { .thankyou__success { font-size: 3rem; } } .thankyou__list { display: flex; justify-content: center; align-items: center; align-self: center; margin: 0 !important; margin-bottom: 0.5em !important; font-size: 1rem; } @media only screen and (min-width: 767px) { .thankyou__list { font-size: unset; } } .thankyou__list::before, .thankyou__list::after { display: none !important; } .thankyou__list-item { margin: 0 !important; border-right: 1px dashed #373737 !important; padding: 0.3em 2em !important; text-align: center; } .thankyou__list-item:last-of-type { border-right: 1px dashed #373737 !important; } .thankyou__list-item:first-of-type { border-left: 1px dashed #373737 !important; } .thankyou__list-item strong { font-weight: 600; font-size: 1.4rem; } .category__hero { position: relative; height: 200px; } @media only screen and (min-width: 767px) { .category__hero { height: 350px; } } .category__hero::after { position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; content: ""; } .category__hero-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; color: #ffffff; font-weight: 600; font-size: 3rem; letter-spacing: 1px; text-align: center; text-transform: uppercase; } @media only screen and (min-width: 767px) { .category__hero-title { font-size: 5rem; letter-spacing: 2px; } } .category__hero img.category__hero-img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } form.woo_search { display: flex; flex-wrap: nowrap; background-color: white; padding-left: 1em; } form.woo_search button#mybtn { display: grid; align-items: center; cursor: pointer; border: none; background: none; background-color: #009ee1; padding: 0.5em; } form.woo_search button#mybtn:hover { background-color: #057db1; } form.woo_search button#mybtn svg path { stroke: #ffffff; } form.woo_search input#keyword { border: none; } div#datafetch { z-index: 1000; background: #f6f6f6; width: 100%; overflow: auto; } div#datafetch ul li { background-color: #000; padding: 1em; color: #ffffff; font-size: 1.2rem; text-align: center; } div.woo_search_bar { display: flex; position: relative; flex-direction: column; width: 100%; } @media only screen and (min-width: 1023px) { div.woo_search_bar { min-width: 400px; } } @media only screen and (min-width: 767px) { .search_result { position: absolute; top: 40px; right: 0; } } div.search_result ul a { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 1em; border-bottom: 1px solid #057db1; } div.search_result ul a:first-child { border-top: 1px solid #057db1; } @media only screen and (min-width: 1023px) { div.search_result ul a { justify-content: unset; gap: 0; } } div.search_result ul a img { width: 50px; height: 50px; object-fit: contain; } @media only screen and (min-width: 1023px) { div.search_result ul a img { margin-right: 1em; } } div.search_result ul a li { background-color: unset !important; padding: 0 !important; color: #000 !important; font-weight: 400; font-size: 1.1rem; text-align: unset !important; } div.search_result ul a span.price { color: #000; font-weight: 700; font-size: 1.2rem; } @media only screen and (min-width: 1023px) { div.search_result ul a span.price { margin-right: 1em; margin-left: auto; } } div.search_result ul a p.des { margin: 0; padding: 0; color: #676767; font-weight: normal; font-size: 0.9em; line-height: 1.3em; } div.search_result ul a h5.sku { margin: 0 !important; padding: 0 !important; color: #676767; font-weight: normal; font-size: 0.85em; } div.search_result ul a span.title_r_1 { display: flex; flex-direction: row; gap: 9px; } div.search_result ul a:hover { background-color: rgba(204, 204, 204, 0.3); } .woo_search input#keyword { outline: none; background-color: white; width: 100%; } span.loading { display: grid; align-items: center; padding: 0.5em; } @-webkit-keyframes rotating { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .hds-flight-icon--animation-loading { -webkit-animation: rotating 1s linear infinite; } span.loading { visibility: hidden; } span.price p { margin: 0; padding: 0; } span.price { display: flex; align-items: center; margin-inline-end: 5px; color: #535353; } span.price .sale-price { justify-content: flex-start; } div#datafetch a { text-decoration: none; } ul.woo_bar_el { display: flex; flex-direction: column; } .show_all { background-color: #000; padding: 1em; color: #ffffff; font-size: 1.2rem; text-align: center; } a.cat_a.woo_bar_el { display: block; border: 1px solid #5a5a5a; border-radius: 8px; padding: 4px 15px; color: #5a5a5a; } a.cat_a.woo_bar_el:hover { background-color: #5a5a5a; color: white; } p.search_title { margin: 10px 0px 0px 8px; padding: 0; color: #676767; font-weight: normal; font-size: 0.9em; line-height: normal; } hr.search_title { margin: 2px 8px 0px 8px; background-color: #cccccc; } .season h2 { margin-top: 2em; } .season__box { height: 440px; } .season__slide { display: block; position: relative; border-radius: 8px; width: 100%; height: 100%; overflow: hidden; } .season__slide::after { position: absolute; z-index: 15; transition: all 0.3s; background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; content: ""; } .season__slide:hover::after { background-color: rgba(0, 0, 0, 0.05); } .season__img { position: absolute; width: 100%; height: 100%; object-fit: cover; } .season__title { position: absolute; bottom: 55px; left: 50%; transform: translateX(-50%); z-index: 20; padding: 0.5em 1em; width: 100%; color: #ffffff; font-weight: 600; font-size: 2.3rem; letter-spacing: 1px; text-align: center; text-transform: uppercase; } .season__price { position: absolute; top: -2px; right: -2px; z-index: 21; border-radius: 5px; background-color: #ffffff; padding: 0.3em 0.6em; color: #ff0000; font-weight: 700; font-size: 1.7rem; } .featured h2 { margin-top: 2em; } @media only screen and (min-width: 767px) { .featured__mobile { display: none; } } .featured__box { height: 440px; } .featured__slide { display: block; position: relative; border-radius: 8px; width: 100%; height: 100%; overflow: hidden; } .featured__slide::after { position: absolute; top: 0; left: 0; z-index: 15; transition: all 0.3s; background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; content: ""; } .featured__slide:hover::after { background-color: rgba(0, 0, 0, 0.05); } .featured__img { position: absolute; width: 100%; height: 100%; object-fit: cover; } .featured__title { position: absolute; bottom: 55px; left: 50%; transform: translateX(-50%); z-index: 20; padding: 0.5em 1em; width: 100%; color: #ffffff; font-weight: 600; font-size: 2.3rem; letter-spacing: 1px; text-align: center; text-transform: uppercase; } .featured__desktop { display: none; } @media only screen and (min-width: 767px) { .featured__desktop { display: unset; } } .featured__boxes { grid-column-gap: 0px; grid-row-gap: 0px; display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); gap: 20px; } .featured__box-wrapper { position: relative; border-radius: 8px; height: 200px; overflow: hidden; } .featured__box-wrapper::after { position: absolute; z-index: 15; transition: all 0.3s; background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; content: ""; } .featured__box-wrapper:hover::after { background-color: rgba(0, 0, 0, 0.05); } @media only screen and (min-width: 767px) { .featured__box-wrapper { height: 280px; } } .featured__box-wrapper img { position: absolute; width: 100%; height: 100%; object-fit: cover; } .featured__box-wrapper h3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; padding: 0.5em 1em; width: 100%; color: #ffffff; font-weight: 600; font-size: 2.3rem; letter-spacing: 1px; text-align: center; text-transform: uppercase; } /* Layouts */ /* Pages */