/* font-weight: 200 = Extra-light font-weight: 300 = Light font-weight: 400 = Regular font-weight: 500 = Medium font-weight: 600 = Semi-bold font-weight: 700 = Bold */ /** * Swiper 5.3.8 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://swiperjs.com * * Copyright 2014-2020 Vladimir Kharlampidi * * Released under the MIT License * * Released on: April 24, 2020 */ @font-face { font-family: 'swiper-icons'; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #007aff; } .swiper-container, .pxs-main-slider { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-vertical > .swiper-wrapper, .swiper-container-vertical > .pxs-main-slider__slides, .swiper-container-vertical > .pxs-brands__items, .swiper-container-vertical > .pxs-tiles-carousel__items, .swiper-container-vertical > .pxs-category-brands__items { flex-direction: column; } .swiper-wrapper, .pxs-main-slider__slides, .pxs-brands__items, .pxs-tiles-carousel__items, .pxs-category-brands__items { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-container-android .pxs-main-slider__slide, .swiper-container-android .pxs-brands__item, .swiper-container-android .pxs-tiles-carousel__item, .swiper-container-android .pxs-category-brands__item, .swiper-wrapper, .pxs-main-slider__slides, .pxs-brands__items, .pxs-tiles-carousel__items, .pxs-category-brands__items { transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper, .swiper-container-multirow > .pxs-main-slider__slides, .swiper-container-multirow > .pxs-brands__items, .swiper-container-multirow > .pxs-tiles-carousel__items, .swiper-container-multirow > .pxs-category-brands__items { flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper, .swiper-container-multirow-column > .pxs-main-slider__slides, .swiper-container-multirow-column > .pxs-brands__items, .swiper-container-multirow-column > .pxs-tiles-carousel__items, .swiper-container-multirow-column > .pxs-category-brands__items { flex-wrap: wrap; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper, .swiper-container-free-mode > .pxs-main-slider__slides, .swiper-container-free-mode > .pxs-brands__items, .swiper-container-free-mode > .pxs-tiles-carousel__items, .swiper-container-free-mode > .pxs-category-brands__items { transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide, .pxs-main-slider__slide, .pxs-brands__item, .pxs-tiles-carousel__item, .pxs-category-brands__item { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide, .swiper-container-autoheight .pxs-main-slider__slide, .swiper-container-autoheight .pxs-brands__item, .swiper-container-autoheight .pxs-tiles-carousel__item, .swiper-container-autoheight .pxs-category-brands__item { height: auto; } .swiper-container-autoheight .swiper-wrapper, .swiper-container-autoheight .pxs-main-slider__slides, .swiper-container-autoheight .pxs-brands__items, .swiper-container-autoheight .pxs-tiles-carousel__items, .swiper-container-autoheight .pxs-category-brands__items { align-items: flex-start; transition-property: transform, height; } /* 3D Effects */ .swiper-container-3d { perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .pxs-main-slider__slides, .swiper-container-3d .pxs-brands__items, .swiper-container-3d .pxs-tiles-carousel__items, .swiper-container-3d .pxs-category-brands__items, .swiper-container-3d .swiper-slide, .swiper-container-3d .pxs-main-slider__slide, .swiper-container-3d .pxs-brands__item, .swiper-container-3d .pxs-tiles-carousel__item, .swiper-container-3d .pxs-category-brands__item, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } /* CSS Mode */ .swiper-container-css-mode > .swiper-wrapper, .swiper-container-css-mode > .pxs-main-slider__slides, .swiper-container-css-mode > .pxs-brands__items, .swiper-container-css-mode > .pxs-tiles-carousel__items, .swiper-container-css-mode > .pxs-category-brands__items { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar, .swiper-container-css-mode > .pxs-main-slider__slides::-webkit-scrollbar, .swiper-container-css-mode > .pxs-brands__items::-webkit-scrollbar, .swiper-container-css-mode > .pxs-tiles-carousel__items::-webkit-scrollbar, .swiper-container-css-mode > .pxs-category-brands__items::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide, .swiper-container-css-mode > .pxs-main-slider__slides > .swiper-slide, .swiper-container-css-mode > .pxs-brands__items > .swiper-slide, .swiper-container-css-mode > .pxs-tiles-carousel__items > .swiper-slide, .swiper-container-css-mode > .pxs-category-brands__items > .swiper-slide, .swiper-container-css-mode > .swiper-wrapper > .pxs-main-slider__slide, .swiper-container-css-mode > .pxs-main-slider__slides > .pxs-main-slider__slide, .swiper-container-css-mode > .pxs-brands__items > .pxs-main-slider__slide, .swiper-container-css-mode > .pxs-tiles-carousel__items > .pxs-main-slider__slide, .swiper-container-css-mode > .pxs-category-brands__items > .pxs-main-slider__slide, .swiper-container-css-mode > .swiper-wrapper > .pxs-brands__item, .swiper-container-css-mode > .pxs-main-slider__slides > .pxs-brands__item, .swiper-container-css-mode > .pxs-brands__items > .pxs-brands__item, .swiper-container-css-mode > .pxs-tiles-carousel__items > .pxs-brands__item, .swiper-container-css-mode > .pxs-category-brands__items > .pxs-brands__item, .swiper-container-css-mode > .swiper-wrapper > .pxs-tiles-carousel__item, .swiper-container-css-mode > .pxs-main-slider__slides > .pxs-tiles-carousel__item, .swiper-container-css-mode > .pxs-brands__items > .pxs-tiles-carousel__item, .swiper-container-css-mode > .pxs-tiles-carousel__items > .pxs-tiles-carousel__item, .swiper-container-css-mode > .pxs-category-brands__items > .pxs-tiles-carousel__item, .swiper-container-css-mode > .swiper-wrapper > .pxs-category-brands__item, .swiper-container-css-mode > .pxs-main-slider__slides > .pxs-category-brands__item, .swiper-container-css-mode > .pxs-brands__items > .pxs-category-brands__item, .swiper-container-css-mode > .pxs-tiles-carousel__items > .pxs-category-brands__item, .swiper-container-css-mode > .pxs-category-brands__items > .pxs-category-brands__item { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper, .swiper-container-horizontal.swiper-container-css-mode > .pxs-main-slider__slides, .swiper-container-horizontal.swiper-container-css-mode > .pxs-brands__items, .swiper-container-horizontal.swiper-container-css-mode > .pxs-tiles-carousel__items, .swiper-container-horizontal.swiper-container-css-mode > .pxs-category-brands__items { -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper, .swiper-container-vertical.swiper-container-css-mode > .pxs-main-slider__slides, .swiper-container-vertical.swiper-container-css-mode > .pxs-brands__items, .swiper-container-vertical.swiper-container-css-mode > .pxs-tiles-carousel__items, .swiper-container-vertical.swiper-container-css-mode > .pxs-category-brands__items { -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(-1 * var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: 'next'; } .swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white { --swiper-navigation-color: #ffffff; } .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color: #000000; } .swiper-button-lock { display: none; } :root { /* --swiper-pagination-color: var(--swiper-theme-color); */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Progress */ .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color: #ffffff; } .swiper-pagination-black { --swiper-pagination-color: #000000; } .swiper-pagination-lock { display: none; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } /* Preloader */ :root { /* --swiper-preloader-color: var(--swiper-theme-color); */ } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s infinite linear; animation: swiper-preloader-spin 1s infinite linear; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @-webkit-keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } /* a11y */ .swiper-container .swiper-notification, .pxs-main-slider .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide, .swiper-container-fade.swiper-container-free-mode .pxs-main-slider__slide, .swiper-container-fade.swiper-container-free-mode .pxs-brands__item, .swiper-container-fade.swiper-container-free-mode .pxs-tiles-carousel__item, .swiper-container-fade.swiper-container-free-mode .pxs-category-brands__item { transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide, .swiper-container-fade .pxs-main-slider__slide, .swiper-container-fade .pxs-brands__item, .swiper-container-fade .pxs-tiles-carousel__item, .swiper-container-fade .pxs-category-brands__item { pointer-events: none; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide, .swiper-container-fade .pxs-main-slider__slide .swiper-slide, .swiper-container-fade .pxs-brands__item .swiper-slide, .swiper-container-fade .pxs-tiles-carousel__item .swiper-slide, .swiper-container-fade .pxs-category-brands__item .swiper-slide, .swiper-container-fade .swiper-slide .pxs-main-slider__slide, .swiper-container-fade .pxs-main-slider__slide .pxs-main-slider__slide, .swiper-container-fade .pxs-brands__item .pxs-main-slider__slide, .swiper-container-fade .pxs-tiles-carousel__item .pxs-main-slider__slide, .swiper-container-fade .pxs-category-brands__item .pxs-main-slider__slide, .swiper-container-fade .swiper-slide .pxs-brands__item, .swiper-container-fade .pxs-main-slider__slide .pxs-brands__item, .swiper-container-fade .pxs-brands__item .pxs-brands__item, .swiper-container-fade .pxs-tiles-carousel__item .pxs-brands__item, .swiper-container-fade .pxs-category-brands__item .pxs-brands__item, .swiper-container-fade .swiper-slide .pxs-tiles-carousel__item, .swiper-container-fade .pxs-main-slider__slide .pxs-tiles-carousel__item, .swiper-container-fade .pxs-brands__item .pxs-tiles-carousel__item, .swiper-container-fade .pxs-tiles-carousel__item .pxs-tiles-carousel__item, .swiper-container-fade .pxs-category-brands__item .pxs-tiles-carousel__item, .swiper-container-fade .swiper-slide .pxs-category-brands__item, .swiper-container-fade .pxs-main-slider__slide .pxs-category-brands__item, .swiper-container-fade .pxs-brands__item .pxs-category-brands__item, .swiper-container-fade .pxs-tiles-carousel__item .pxs-category-brands__item, .swiper-container-fade .pxs-category-brands__item .pxs-category-brands__item { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide, .swiper-container-cube .pxs-main-slider__slide, .swiper-container-cube .pxs-brands__item, .swiper-container-cube .pxs-tiles-carousel__item, .swiper-container-cube .pxs-category-brands__item { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide, .swiper-container-cube .pxs-main-slider__slide .swiper-slide, .swiper-container-cube .pxs-brands__item .swiper-slide, .swiper-container-cube .pxs-tiles-carousel__item .swiper-slide, .swiper-container-cube .pxs-category-brands__item .swiper-slide, .swiper-container-cube .swiper-slide .pxs-main-slider__slide, .swiper-container-cube .pxs-main-slider__slide .pxs-main-slider__slide, .swiper-container-cube .pxs-brands__item .pxs-main-slider__slide, .swiper-container-cube .pxs-tiles-carousel__item .pxs-main-slider__slide, .swiper-container-cube .pxs-category-brands__item .pxs-main-slider__slide, .swiper-container-cube .swiper-slide .pxs-brands__item, .swiper-container-cube .pxs-main-slider__slide .pxs-brands__item, .swiper-container-cube .pxs-brands__item .pxs-brands__item, .swiper-container-cube .pxs-tiles-carousel__item .pxs-brands__item, .swiper-container-cube .pxs-category-brands__item .pxs-brands__item, .swiper-container-cube .swiper-slide .pxs-tiles-carousel__item, .swiper-container-cube .pxs-main-slider__slide .pxs-tiles-carousel__item, .swiper-container-cube .pxs-brands__item .pxs-tiles-carousel__item, .swiper-container-cube .pxs-tiles-carousel__item .pxs-tiles-carousel__item, .swiper-container-cube .pxs-category-brands__item .pxs-tiles-carousel__item, .swiper-container-cube .swiper-slide .pxs-category-brands__item, .swiper-container-cube .pxs-main-slider__slide .pxs-category-brands__item, .swiper-container-cube .pxs-brands__item .pxs-category-brands__item, .swiper-container-cube .pxs-tiles-carousel__item .pxs-category-brands__item, .swiper-container-cube .pxs-category-brands__item .pxs-category-brands__item { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide, .swiper-container-cube.swiper-container-rtl .pxs-main-slider__slide, .swiper-container-cube.swiper-container-rtl .pxs-brands__item, .swiper-container-cube.swiper-container-rtl .pxs-tiles-carousel__item, .swiper-container-cube.swiper-container-rtl .pxs-category-brands__item { transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-next + .pxs-main-slider__slide, .swiper-container-cube .swiper-slide-next + .pxs-brands__item, .swiper-container-cube .swiper-slide-next + .pxs-tiles-carousel__item, .swiper-container-cube .swiper-slide-next + .pxs-category-brands__item { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide, .swiper-container-flip .pxs-main-slider__slide, .swiper-container-flip .pxs-brands__item, .swiper-container-flip .pxs-tiles-carousel__item, .swiper-container-flip .pxs-category-brands__item { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide, .swiper-container-flip .pxs-main-slider__slide .swiper-slide, .swiper-container-flip .pxs-brands__item .swiper-slide, .swiper-container-flip .pxs-tiles-carousel__item .swiper-slide, .swiper-container-flip .pxs-category-brands__item .swiper-slide, .swiper-container-flip .swiper-slide .pxs-main-slider__slide, .swiper-container-flip .pxs-main-slider__slide .pxs-main-slider__slide, .swiper-container-flip .pxs-brands__item .pxs-main-slider__slide, .swiper-container-flip .pxs-tiles-carousel__item .pxs-main-slider__slide, .swiper-container-flip .pxs-category-brands__item .pxs-main-slider__slide, .swiper-container-flip .swiper-slide .pxs-brands__item, .swiper-container-flip .pxs-main-slider__slide .pxs-brands__item, .swiper-container-flip .pxs-brands__item .pxs-brands__item, .swiper-container-flip .pxs-tiles-carousel__item .pxs-brands__item, .swiper-container-flip .pxs-category-brands__item .pxs-brands__item, .swiper-container-flip .swiper-slide .pxs-tiles-carousel__item, .swiper-container-flip .pxs-main-slider__slide .pxs-tiles-carousel__item, .swiper-container-flip .pxs-brands__item .pxs-tiles-carousel__item, .swiper-container-flip .pxs-tiles-carousel__item .pxs-tiles-carousel__item, .swiper-container-flip .pxs-category-brands__item .pxs-tiles-carousel__item, .swiper-container-flip .swiper-slide .pxs-category-brands__item, .swiper-container-flip .pxs-main-slider__slide .pxs-category-brands__item, .swiper-container-flip .pxs-brands__item .pxs-category-brands__item, .swiper-container-flip .pxs-tiles-carousel__item .pxs-category-brands__item, .swiper-container-flip .pxs-category-brands__item .pxs-category-brands__item { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media (max-width: 63.99em) { .pxs-hide-until-tablet { display: none !important; } } @media (min-width: 64em) { .pxs-hide-from-laptop { display: none !important; } } /* font-weight: 200 = Extra-light font-weight: 300 = Light font-weight: 400 = Regular font-weight: 500 = Medium font-weight: 600 = Semi-bold font-weight: 700 = Bold */ html { font-size: 62.5%; box-sizing: border-box; } *, *:before, *:after { box-sizing: border-box; } button, input, textarea, select { font-family: inherit; } body { margin: 0; padding: 0; font-family: "Montserrat", sans-serif; font-size: 1.4rem; line-height: 2.5rem; color: #363636; -webkit-font-smoothing: antialiased; } body a { color: #5b899a; transition: all 0.2s; } body a, body a:visited { color: #5b899a; } body a:hover, body a:focus, body a:active { color: #d7be7c; text-decoration: none; background: none; } body h1 { font-weight: 300; font-size: 4.5rem; } body h2 { font-weight: 300; font-size: 3rem; } body input[type='number'] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } body input[type='number']::-webkit-outer-spin-button, body input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } body.no-scroll { position: fixed; width: 100vw; height: 100vh; } .columns .column.main { padding: 0 !important; } .pxs-container { margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; max-width: 192rem; width: 100%; } .pxs-container__inner, .messages { position: relative; margin: 0 auto; max-width: 132rem; width: 100%; } .pxs-container__inner--narrow { max-width: 114rem; } .pxs-container--bg-gray { background-color: #f4f4f4; } .pxs-container--full-width { max-width: 192rem; } .pxs-container--full-width .pxs-container__inner, .pxs-container--full-width .messages { max-width: none; } .pxs-container--no-padding { padding-left: 0; padding-right: 0; } .pxs-container--overflow-hidden { overflow: hidden; } fieldset { border: 0; padding: 0; margin: 0; } .field { position: relative; width: 100%; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; } .field.choice { flex-wrap: nowrap; } .field._required > .label:after, .field.required > .label:after { content: '*'; color: #eb0000; } .field + .field { margin-top: 1.5rem; } .field.date .control { display: flex; align-items: center; } .field .control { position: relative; width: 100%; } .field .label { width: 100%; font-size: 1.2rem; letter-spacing: 0.1em; text-transform: uppercase; color: #222222; } .field .input-text { display: block; width: 100%; max-width: 80rem; padding: 1.5rem; height: auto; width: 100%; font-size: 14px; font-family: "Montserrat", sans-serif; font-weight: 300; border: 1px solid #eaeaea; border-radius: 6px; background-color: #fff; transition: all 0.2s; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .field .input-text:hover:not([disabled]), .field .input-text:focus:not([disabled]) { border: 1px solid #9f9f9f; box-shadow: none; } .field .input-text::-webkit-input-placeholder { opacity: 1; color: #9f9f9f; } .field .input-text::-moz-placeholder { opacity: 1; color: #9f9f9f; } .field .input-text:-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .field .input-text::-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .field .input-text::placeholder { opacity: 1; color: #9f9f9f; } .field .input-text[disabled] { opacity: 0.6; } .field .input-text.mage-error { border: 1px solid #eb0000; } .field input[type=number] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .field select, .field .select { display: block; padding: 1.5rem 3rem 1.5rem 1.5rem; font-size: 14px; font-family: "Montserrat", sans-serif; color: #9f9f9f; border: 1px solid #eaeaea; border-radius: 6px; background-color: #fff; width: 100%; max-width: 80rem; outline: none; -moz-appearance: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat, repeat; background-position: right 0.8rem top 52%, 0 0; background-size: 1.5rem auto; box-shadow: none; transition: all 0.2s; } .field select:hover:not([disabled]), .field select:focus:not([disabled]), .field .select:hover:not([disabled]), .field .select:focus:not([disabled]) { border: 1px solid #9f9f9f; box-shadow: none; } .field select[disabled], .field .select[disabled] { opacity: 0.5; } .field .checkbox { display: inline-block; margin: 0 1rem 0 0; height: 2rem; width: 2rem; cursor: pointer; outline: none; border: 1px solid #eaeaea; background-color: #fff; border-radius: 50%; transition: all 0.2s; background-position: 50% 50%; background-size: 1rem 1rem; background-repeat: no-repeat; background-color: #fff; -moz-appearance: none; appearance: none; -webkit-appearance: none; box-shadow: none; flex: 0 0 auto; border-radius: 6px; background-size: 1rem 1rem; margin-right: 1.5rem; flex: 0 0 auto; } .field .checkbox:hover, .field .checkbox:focus { border-color: #9f9f9f; box-shadow: none; } .field .checkbox:checked { border: 1px solid #5b899a; background-image: url("data:image/svg+xml;utf8, "); } .field .checkbox:checked, .field .checkbox:checked:hover, .field .checkbox:checked:focus { border: 1px solid #5b899a; } .field .checkbox[disabled] { opacity: 0.5; } .field .checkbox:checked { background-image: url("data:image/svg+xml;utf8, "); } .field .checkbox + .label { font-size: 1.4rem; letter-spacing: normal; text-transform: none; font-weight: 300; color: #363636; } .field .radio { display: inline-block; margin: 0 1rem 0 0; height: 2rem; width: 2rem; cursor: pointer; outline: none; border: 1px solid #eaeaea; background-color: #fff; border-radius: 50%; transition: all 0.2s; background-position: 50% 50%; background-size: 1rem 1rem; background-repeat: no-repeat; background-color: #fff; -moz-appearance: none; appearance: none; -webkit-appearance: none; box-shadow: none; flex: 0 0 auto; } .field .radio:hover, .field .radio:focus { border-color: #9f9f9f; box-shadow: none; } .field .radio:checked { border: 1px solid #5b899a; background-image: url("data:image/svg+xml;utf8, "); } .field .radio:checked, .field .radio:checked:hover, .field .radio:checked:focus { border: 1px solid #5b899a; } .field .radio[disabled] { opacity: 0.5; } .field .radio + label { font-size: 1.4rem; letter-spacing: normal; text-transform: none; font-weight: 300; color: #363636; } .field textarea { display: block; width: 100%; max-width: 80rem; padding: 1.5rem; height: auto; width: 100%; font-size: 14px; font-family: "Montserrat", sans-serif; font-weight: 300; border: 1px solid #eaeaea; border-radius: 6px; background-color: #fff; transition: all 0.2s; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; resize: vertical; box-shadow: none; } .field textarea:hover:not([disabled]), .field textarea:focus:not([disabled]) { border: 1px solid #9f9f9f; box-shadow: none; } .field textarea::-webkit-input-placeholder { opacity: 1; color: #9f9f9f; } .field textarea::-moz-placeholder { opacity: 1; color: #9f9f9f; } .field textarea:-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .field textarea::-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .field textarea::placeholder { opacity: 1; color: #9f9f9f; } .field textarea[disabled] { opacity: 0.6; } .field div.mage-error[generated], .field div.field-error { margin-top: 2px; position: relative; background-color: #eb0000; color: #fff; padding: 3px 8px; border-radius: 3px; } .field div.mage-error[generated]:after, .field div.field-error:after { position: absolute; content: ''; left: 11px; top: -6px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 6px solid #eb0000; } /* font-weight: 200 = Extra-light font-weight: 300 = Light font-weight: 400 = Regular font-weight: 500 = Medium font-weight: 600 = Semi-bold font-weight: 700 = Bold */ .pxs-button { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #5b899a; color: #fff; } @media (max-width: 63.99em) { .pxs-button { font-size: 10px; } } .pxs-button * { fill: #fff; } .pxs-button, .pxs-button:visited { background-color: #5b899a; color: #fff; } .pxs-button:hover, .pxs-button:focus, .pxs-button:active { transition: all 0.2s; background-color: #25434e; color: #fff; } .pxs-button[disabled] { opacity: 0.65; cursor: auto; } /* font-weight: 200 = Extra-light font-weight: 300 = Light font-weight: 400 = Regular font-weight: 500 = Medium font-weight: 600 = Semi-bold font-weight: 700 = Bold */ .pxs-header-bar { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 11px; font-weight: 300; color: #646464; } @media (min-width: 30em) { .pxs-header-bar { font-size: 12px; } } .pxs-header-bar a, .pxs-header-bar a:visited { color: #646464; } .pxs-header-bar a:hover, .pxs-header-bar a:focus, .pxs-header-bar a:active { text-decoration: none; color: #d7be7c; } .pxs-header-bar ul { margin: 0; padding: 0; list-style: none; display: flex; } @media (min-width: 64em) { .pxs-header-bar ul:first-child li { margin-right: 2rem; } } @media (max-width: 63.99em) { .pxs-header-bar ul:first-child li:nth-child(n+2) { display: none; } } @media (min-width: 64em) { .pxs-header-bar ul:last-child li { margin-left: 2rem; } } @media (max-width: 63.99em) { .pxs-header-bar ul:last-child li:not(:last-child) { display: none; } } .pxs-header-bar ul li { margin: 0; } @media (max-width: 63.99em) { .pxs-page-header:before { position: absolute; bottom: -1.5rem; left: -1.5rem; right: -1.5rem; display: block; height: 1rem; content: ''; box-shadow: 0 0.6rem 0.6rem 0 rgba(0, 0, 0, 0.05); } } .pxs-page-header__content { display: flex; align-items: center; justify-content: space-between; height: 6.3rem; } @media (min-width: 64em) { .pxs-page-header__content { height: 9rem; } } .pxs-page-header__burger { flex: 0 0 auto; order: -9; padding-left: 0.5rem; } @media (min-width: 64em) { .pxs-page-header__burger { display: none; } } .pxs-page-header__logo { padding: 1.2rem 0; order: 2; height: 100%; } @media (max-width: 63.99em) { .pxs-page-header__logo { text-align: center; } } .pxs-page-header__nav { order: 3; } @media (min-width: 64em) { .pxs-page-header__nav { flex: 0 1 20%; } } @media (min-width: 64em) { .pxs-page-header__search-placeholder { flex: 0 1 20%; } } @media (max-width: 63.99em) { .pxs-page-header__search-placeholder { display: none; } } @media (max-width: 47.99em) { .pxs-page-header__search { margin-bottom: 1.5rem; } } @media (min-width: 64em) { .pxs-page-header__search { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } } .pxs-logo { height: 100%; } .pxs-logo img { height: 100%; } .pxs-burger { display: flex; align-items: center; padding: 0; height: 100%; background: none; } .pxs-burger, .pxs-burger:active, .pxs-burger:focus, .pxs-burger:hover { border: 0; box-shadow: none; } .pxs-burger__inner { position: relative; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .pxs-burger__inner, .pxs-burger__inner::before, .pxs-burger__inner::after { display: block; width: 2.4rem; height: 0.2rem; content: ''; background: #5b899a; border-radius: 0.2rem; } .pxs-burger__inner::before, .pxs-burger__inner::after { position: absolute; } .pxs-burger__inner::before { top: -0.7rem; transition: opacity 0.125s 0.275s ease; } .pxs-burger__inner::after { bottom: -0.7rem; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .pxs-burger__label { position: absolute; left: 0; right: 0; top: 1.2rem; font-size: 6px; text-align: center; text-transform: uppercase; letter-spacing: 0.17rem; color: #9f9f9f; } .pxs-burger--active .pxs-burger-inner { transform: translate3d(0, 4px, 0) rotate(135deg); transition-delay: 75ms; } .pxs-burger--active .pxs-burger-inner::before { transition-delay: 0ms; opacity: 0; } .pxs-burger--active .pxs-burger-inner::after { transform: translate3d(0, -8px, 0) rotate(-270deg); transition-delay: 75ms; } .pxs-header-nav { margin: 0; padding: 0; list-style: none; display: flex; justify-content: flex-end; } .pxs-header-nav__item { margin: 0; } @media (min-width: 64em) { .pxs-header-nav__item { padding: 0 0 0 2.4rem; } } @media (max-width: 63.99em) { .pxs-header-nav__item--account, .pxs-header-nav__item--wishlist { display: none; } } .pxs-header-nav__link { position: relative; display: flex; flex-direction: column; align-items: center; } .pxs-header-nav__link, .pxs-header-nav__link:visited { color: #9f9f9f; } .pxs-header-nav__link:hover, .pxs-header-nav__link:focus, .pxs-header-nav__link:active { text-decoration: none; } .pxs-header-nav__icon svg { display: block; height: 2.4rem; fill: #5b899a; } @media (min-width: 64em) { .pxs-header-nav__icon svg { height: 2.1rem; } } .pxs-header-nav__label { padding-top: 0.5rem; line-height: 1.2rem; font-size: 1.2rem; font-weight: 300; } @media (max-width: 63.99em) { .pxs-header-nav__label { display: none; } } .pxs-header-nav__qty { position: absolute; right: -0.8rem; top: -0.7rem; display: block; min-width: 1.7rem; height: 1.7rem; line-height: 1.3rem; font-size: 9px; text-align: center; color: #fff; border: 2px solid #fff; background: #d7be7c; border-radius: 1.7rem; } .pxs-header-nav__qty--empty { display: none; } .pxs-header-search { position: relative; display: flex; } .pxs-header-search__icon { position: absolute; left: 1.3rem; top: 50%; transform: translateY(-50%); } .pxs-header-search__icon svg { display: block; width: 1.4rem; height: 1.4rem; } .pxs-header-search__input { display: block; width: 100%; max-width: 80rem; padding: 1.5rem; height: auto; width: 100%; font-size: 14px; font-family: "Montserrat", sans-serif; font-weight: 300; border: 1px solid #eaeaea; border-radius: 6px; background-color: #fff; transition: all 0.2s; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0.4rem 1.5rem 0.4rem 4rem; min-width: 22rem; max-width: none; font-size: 1.2rem; border-radius: 2rem; } .pxs-header-search__input:hover:not([disabled]), .pxs-header-search__input:focus:not([disabled]) { border: 1px solid #9f9f9f; box-shadow: none; } .pxs-header-search__input::-webkit-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-header-search__input::-moz-placeholder { opacity: 1; color: #9f9f9f; } .pxs-header-search__input:-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-header-search__input::-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-header-search__input::placeholder { opacity: 1; color: #9f9f9f; } .pxs-header-search__input[disabled] { opacity: 0.6; } .pxs-header-search__input::-webkit-input-placeholder { color: #646464; } .pxs-header-search__input::-moz-placeholder { color: #646464; } .pxs-header-search__input:-ms-input-placeholder { color: #646464; } .pxs-header-search__input::-ms-input-placeholder { color: #646464; } .pxs-header-search__input::placeholder { color: #646464; } .pxs-header-search button { display: none; } .pxs-minicart .ui-dialog { position: absolute; top: calc(100% - 2rem); right: 0; z-index: 99999; } .pxs-minicart .block-minicart { width: 30rem; background: #fff; box-shadow: 0px 0px 1.5rem -0.5rem #919191; } @media (min-width: 48em) { .pxs-minicart .block-minicart { width: 40rem; } } .pxs-minicart .block-minicart input { display: block; width: 100%; max-width: 80rem; padding: 1.5rem; height: auto; width: 100%; font-size: 14px; font-family: "Montserrat", sans-serif; font-weight: 300; border: 1px solid #eaeaea; border-radius: 6px; background-color: #fff; transition: all 0.2s; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; max-width: 4.5rem; max-height: 3.5rem; text-align: center; } .pxs-minicart .block-minicart input:hover:not([disabled]), .pxs-minicart .block-minicart input:focus:not([disabled]) { border: 1px solid #9f9f9f; box-shadow: none; } .pxs-minicart .block-minicart input::-webkit-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-minicart .block-minicart input::-moz-placeholder { opacity: 1; color: #9f9f9f; } .pxs-minicart .block-minicart input:-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-minicart .block-minicart input::-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-minicart .block-minicart input::placeholder { opacity: 1; color: #9f9f9f; } .pxs-minicart .block-minicart input[disabled] { opacity: 0.6; } .pxs-minicart .block-minicart .minicart-items { margin: 0; padding: 0; list-style: none; } .pxs-minicart .block-minicart .subtitle { display: none; } .pxs-minicart .block-minicart .product-item { border-top: 1px solid #eaeaea; } .pxs-minicart .block-minicart .product-item .product { display: flex; align-items: center; justify-content: space-between; padding: 2rem; } .pxs-minicart .block-minicart .product-item .product.actions { padding: 0; } .pxs-minicart .block-minicart .product-item .product.options { padding: 0 0 0.5rem 0; margin-bottom: 0; font-size: 1.2rem; } .pxs-minicart .block-minicart .product-item .product.list { padding: 0; } .pxs-minicart .block-minicart .product-item .product .label, .pxs-minicart .block-minicart .product-item .product .values { margin-bottom: 0; font-weight: 300; } .pxs-minicart .block-minicart .product-item .product .label { margin-right: 0.5rem; color: #9f9f9f; } .pxs-minicart .block-minicart .product-item .product .label::after { content: ":"; } .pxs-minicart .block-minicart .product-item .product .values { width: 100%; } .pxs-minicart .block-minicart .product-image-container { display: inline-block; margin-right: 2rem; max-width: 100%; } .pxs-minicart .block-minicart .product-item-inner { display: flex; align-items: center; justify-content: space-between; } .pxs-minicart .block-minicart .product-item-details-wrapper { display: flex; justify-content: space-between; margin-bottom: 0.5rem; } .pxs-minicart .block-minicart .product-item-details-wrapper .minicart-price .price { font-weight: 300; } .pxs-minicart .block-minicart .product-item-name { flex-basis: 70%; line-height: 1.8rem; font-weight: 300; } .pxs-minicart .block-minicart .product-item-name a { color: #222222; margin-right: 1rem; } .pxs-minicart .block-minicart .product-item-details { flex: 1 1 auto; } .pxs-minicart .block-minicart .product-item-details .toggle, .pxs-minicart .block-minicart .product-item-details label { display: none; } .pxs-minicart .block-minicart .action.checkout { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #5b899a; color: #fff; width: 100%; cursor: pointer; margin-bottom: 2rem; } @media (max-width: 63.99em) { .pxs-minicart .block-minicart .action.checkout { font-size: 10px; } } .pxs-minicart .block-minicart .action.checkout * { fill: #fff; } .pxs-minicart .block-minicart .action.checkout, .pxs-minicart .block-minicart .action.checkout:visited { background-color: #5b899a; color: #fff; } .pxs-minicart .block-minicart .action.checkout:hover, .pxs-minicart .block-minicart .action.checkout:focus, .pxs-minicart .block-minicart .action.checkout:active { transition: all 0.2s; background-color: #25434e; color: #fff; } .pxs-minicart .block-minicart .action.checkout[disabled] { opacity: 0.65; cursor: auto; } .pxs-minicart .block-minicart .action.checkout span { display: inline-block; padding-right: 3rem; } .pxs-minicart .block-minicart .action.checkout svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } .pxs-minicart .block-minicart .action.viewcart { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; border: 1px solid #5b899a; width: 100%; } @media (max-width: 63.99em) { .pxs-minicart .block-minicart .action.viewcart { font-size: 10px; } } .pxs-minicart .block-minicart .action.viewcart * { fill: #5b899a; } .pxs-minicart .block-minicart .action.viewcart, .pxs-minicart .block-minicart .action.viewcart:visited { background-color: #fff; color: #222222; border: 1px solid #5b899a; } .pxs-minicart .block-minicart .action.viewcart:hover, .pxs-minicart .block-minicart .action.viewcart:focus, .pxs-minicart .block-minicart .action.viewcart:active { transition: all 0.2s; background-color: #5b899a; color: #fff; } .pxs-minicart .block-minicart .action.viewcart:hover *, .pxs-minicart .block-minicart .action.viewcart:focus *, .pxs-minicart .block-minicart .action.viewcart:active * { fill: #fff; } .pxs-minicart .block-minicart .action.viewcart[disabled] { opacity: 0.65; cursor: auto; } .pxs-minicart .block-minicart .action.viewcart span { display: inline-block; padding-right: 3rem; } .pxs-minicart .block-minicart .action.viewcart svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } .pxs-minicart .block-minicart .action.close { border: none; box-shadow: none; background: none; cursor: pointer; padding: 0; height: 1.5rem; } .pxs-minicart .block-minicart .action.close svg { width: 1.5rem; height: 1.5rem; fill: #5b899a; } .pxs-minicart .block-minicart .action.edit { display: none; } .pxs-minicart .block-minicart .action.delete svg { width: 2rem; height: 2rem; } .pxs-minicart .block-minicart .empty { display: block; padding: 2rem; } .pxs-minicart .block-minicart .block-title { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; font-size: 1.8rem; } .pxs-minicart .block-minicart .block-title .text { font-weight: 300; } .pxs-minicart .block-minicart .details-qty { display: flex; align-items: center; } .pxs-minicart .block-minicart .update-cart-item { border: none; background: none; cursor: pointer; } .pxs-minicart .block-minicart .update-cart-item svg { width: 2rem; height: 2rem; fill: #5b899a; } .pxs-minicart__actions { display: flex; justify-content: space-between; align-items: center; } .pxs-minicart__bottom { padding: 2rem; background: #f4f4f4; } .pxs-minicart__bottom .subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .pxs-minicart__bottom .subtotal .price { font-size: 2.4rem; font-weight: 300; } .pxs-main-slider { position: relative; margin-bottom: 4rem; } @media (min-width: 64em) { .pxs-main-slider { margin-bottom: 6.5rem; } } @media (max-width: 63.99em) { .pxs-main-slider { background-color: #f4f4f4; } } .pxs-main-slider__slides { margin: 0; padding: 0; list-style: none; } .pxs-main-slider__slide { margin: 0; padding: 0; } .pxs-main-slider__picture { width: 100%; } .pxs-main-slider__image { display: block; width: 100%; } @media (max-width: 63.99em) { .pxs-main-slider__content { padding: 2rem 3rem 5rem; text-align: center; background-color: #f4f4f4; } } @media (min-width: 64em) { .pxs-main-slider__content { position: absolute; left: 6.4rem; top: 50%; max-width: 53rem; transform: translateY(-50%); } } .pxs-main-slider__subheadline { font-size: 1rem; text-transform: uppercase; color: #d7be7c; letter-spacing: 0.2em; } @media (min-width: 64em) { .pxs-main-slider__subheadline { font-size: 1.2rem; line-height: 1.5rem; color: #fff; } } .pxs-main-slider__headline { font-size: 3.4rem; line-height: 3.4rem; font-weight: 300; text-transform: uppercase; color: #222222; } @media (min-width: 64em) { .pxs-main-slider__headline { margin-bottom: 2.5rem; font-size: 6.4rem; line-height: 7.6rem; color: #fff; } } .pxs-main-slider__cta { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; } @media (max-width: 63.99em) { .pxs-main-slider__cta { font-size: 10px; } } .pxs-main-slider__cta * { fill: #5b899a; } .pxs-main-slider__cta, .pxs-main-slider__cta:visited { background-color: #fff; color: #222222; } .pxs-main-slider__cta:hover, .pxs-main-slider__cta:focus, .pxs-main-slider__cta:active { transition: all 0.2s; background-color: #eaeaea; color: #222222; } .pxs-main-slider__cta[disabled] { opacity: 0.65; cursor: auto; } .pxs-main-slider__cta-span { display: inline-block; padding-right: 3rem; } .pxs-main-slider__cta svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } @media (max-width: 63.99em) { .pxs-main-slider__cta { display: none; } } .pxs-main-slider__pagination-mobile { position: absolute; left: calc(50% - 10rem); bottom: 2.2rem; width: 20rem; background-color: #fff; z-index: 5; } .pxs-main-slider__pagination-mobile-span { display: block; height: 0.2rem; background-color: #d7be7c; transform-origin: left top; } .pxs-main-slider__pagination-desktop { position: absolute; left: 6.4rem; right: 6.4rem; bottom: 3.5rem; z-index: 5; display: flex; } .pxs-main-slider__bullet { margin-right: 2.5rem; font-size: 1.2rem; letter-spacing: 0.1em; color: #fff; } .pxs-main-slider__bullet:not(.pxs-main-slider__bullet--active) .pxs-main-slider__progress { background: #fff; } .pxs-main-slider__progress { position: relative; display: block; width: 23rem; height: 0.2rem; background: rgba(255, 255, 255, 0.3); overflow: hidden; } .pxs-main-slider__progress span { position: absolute; left: 0; top: 0; width: 23rem; height: 0.2rem; background: #fff; transform: translateX(-23rem); } .pxs-main-slider__progress--play span { transition: transform 5s linear; transform: translateX(0); } .pxs-main-slider__navigation { position: absolute; right: 6.4rem; bottom: 0; z-index: 5; display: flex; background-color: #fff; } @media (max-width: 63.99em) { .pxs-main-slider__navigation { display: none; } } .pxs-main-slider__next, .pxs-main-slider__prev { display: flex; align-items: center; padding: 1.9rem 1.5rem; cursor: pointer; } .pxs-main-slider__next svg, .pxs-main-slider__prev svg { width: 1.8rem; fill: #5b899a; } .pxs-main-slider__next:hover svg, .pxs-main-slider__prev:hover svg { fill: #d7be7c; } .pxs-main-slider__prev { transform: rotate(-180deg); } .pxs-main-slider__play { display: flex; align-items: center; } .pxs-main-slider__play-icon { width: 0; height: 1.2rem; background: transparent; border: 0; border-color: transparent transparent transparent #5b899a; transition: 100ms all ease; border-style: solid; border-width: 0.6rem 0 0.6rem 1.2rem; } .pxs-main-slider__play-icon--pause { width: 0.8rem; border-color: #5b899a; border-width: 0 0.2rem 0 0.2rem; cursor: pointer; } .pxs-main-slider__play-icon--pause:hover { border-color: #d7be7c; } .pxs-footer { padding-top: 2rem; padding-bottom: 2rem; } @media (min-width: 48em) { .pxs-footer { padding-top: 7rem; padding-bottom: 7rem; } } .pxs-footer__link-color { color: #5b899a; transition: all 0.2s; } .pxs-footer__link-color, .pxs-footer__link-color:visited { color: #5b899a; } .pxs-footer__link-color:hover, .pxs-footer__link-color:focus, .pxs-footer__link-color:active { color: #d7be7c; text-decoration: none; background: none; } .pxs-footer__content { color: #363636; } @media (min-width: 48em) { .pxs-footer__content { display: grid; grid-column-gap: 1rem; grid-row-gap: 7rem; grid-template-columns: 1fr 1fr 1fr 1fr; } } @media (min-width: 64em) { .pxs-footer__content { grid-template-columns: repeat(3, calc(16.5% - 32px)) calc(21% - 32px) calc(29% - 32px); grid-column-gap: 4rem; grid-row-gap: 0; } } @media (max-width: 47.99em) { .pxs-footer__block { padding: 1.5rem 3rem; } } .pxs-footer__block + .pxs-footer__block { border-top: 1px solid #c5c5c5; } @media (min-width: 48em) { .pxs-footer__block + .pxs-footer__block { border-top: none; } } .pxs-footer__block address { line-height: 2rem; } .pxs-footer__block-title { position: relative; font-size: 12px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; } @media (min-width: 48em) { .pxs-footer__block-title { margin-bottom: 1.5rem; font-size: 1.4rem; line-height: 1.8rem; } } @media (max-width: 47.99em) { .pxs-footer__block-title:hover { cursor: pointer; } } .pxs-footer__block-title::before, .pxs-footer__block-title::after { position: absolute; content: ''; background-color: #363636; transition: all 0.2s; } .pxs-footer__block-title::before { left: -3rem; top: 50%; width: 0.7rem; height: 0.1rem; } @media (min-width: 48em) { .pxs-footer__block-title::before { display: none; } } .pxs-footer__block-title::after { left: calc(-3rem + 3px); top: calc(50% - 3px); width: 0.1rem; height: 0.7rem; } @media (min-width: 48em) { .pxs-footer__block-title::after { display: none; } } @media (max-width: 47.99em) { .pxs-footer__block-title--active { margin-bottom: 1rem; } } .pxs-footer__block-title--active::before { opacity: 0; } .pxs-footer__block-title--active::after { transform: rotate(90deg); } .pxs-footer__block-content { font-weight: 300; } @media (max-width: 47.99em) { .pxs-footer__block-content { display: none; transform: all 0.2s; } } .pxs-footer__block-content--active { display: block; } .pxs-footer__block-list { margin: 0; padding: 0; list-style: none; } .pxs-footer__block-list li { margin: 5px 0; } .pxs-footer__block-list a { color: #363636; text-decoration: none; transition: all 0.2s; } .pxs-footer__block-list a, .pxs-footer__block-list a:visited { color: #363636; } .pxs-footer__block-list a:hover, .pxs-footer__block-list a:focus, .pxs-footer__block-list a:active { color: #d7be7c; } @media (max-width: 47.99em) { .pxs-footer__block--contact { padding: 3rem 0; } } @media (min-width: 48em) and (max-width: 63.99em) { .pxs-footer__block--contact { display: grid; grid-template-columns: 1fr 1fr; grid-column-start: 1; grid-column-end: -1; grid-column-gap: 2rem; justify-items: center; } } .pxs-footer__block--contact-item { display: flex; } .pxs-footer__block--contact-item + .pxs-footer__block--contact-item { margin-top: 2rem; } @media (min-width: 48em) and (max-width: 63.99em) { .pxs-footer__block--contact-item + .pxs-footer__block--contact-item { margin-top: 0; } } .pxs-footer__block--contact-item svg { flex-direction: column; align-self: flex-start; flex: 0 0 auto; width: 2rem; margin-right: 1rem; } .pxs-footer__block--contact-item span { color: #9f9f9f; font-weight: 200; } .pxs-footer__block--contact-title { font-size: 12px; line-height: 16px; text-transform: uppercase; } @media (min-width: 64em) { .pxs-footer__block--contact-title { font-size: 1.4rem; line-height: 1.8rem; } } .pxs-footer__block--contact-phone { margin: 1rem 0 0.3rem; font-size: 24px; font-weight: 200; } .pxs-modal-search { overflow-y: auto; display: none; } .pxs-modal-search--active { position: fixed; left: 0; right: 0; top: 3.5rem; bottom: 0; z-index: 9999; display: block; } .pxs-modal-search__top { position: relative; padding: 0 1.5rem; background-color: #fff; } @media (min-width: 48em) { .pxs-modal-search__top { padding: 0 6.5rem; } } .pxs-modal-search__input { width: 100%; padding: 3.5rem 2rem 3.5rem 5rem; font-size: 2.4rem; font-weight: 300; color: #222222; border-style: solid; border-color: #eaeaea; border-width: 0 0 0.1rem 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; } @media (min-width: 48em) { .pxs-modal-search__input { padding: 3rem 2rem 3.1rem 5rem; } } .pxs-modal-search__input:hover:not([disabled]), .pxs-modal-search__input:focus:not([disabled]) { box-shadow: none; } .pxs-modal-search__input-wrapper { position: relative; } .pxs-modal-search__icon { position: absolute; top: 50%; left: 0; border: none; padding: 0; background: none; transform: translateY(-50%); } .pxs-modal-search__icon svg { width: 2.8rem; height: 2.8rem; } .pxs-modal-search__close { position: absolute; top: 0; right: 0; cursor: pointer; width: 4rem; height: 9rem; } .pxs-modal-search__close svg { position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1.2rem; height: 1.2rem; } .pxs-modal-search .search-autocomplete { min-height: calc(100vh - 12.5rem); /* height of top bar and height of input = 12.5rem */ left: 0; right: 0; width: 100% !important; background-color: #fff; } .pxs-modal-search .smile-elasticsuite-autocomplete-result { padding: 3rem 1.5rem; } @media (min-width: 48em) { .pxs-modal-search .smile-elasticsuite-autocomplete-result { display: flex; justify-content: space-between; padding: 3rem 6.5rem; } } .pxs-modal-search .autocomplete-list--product { display: grid; grid-gap: 3rem; grid-template-columns: 1fr; } @media (min-width: 48em) { .pxs-modal-search .autocomplete-list--product { flex: 1 1 auto; width: calc(80% - 1rem); order: 2; grid-template-columns: 1fr 1fr 1fr 1fr; padding-left: 3rem; border-left: 1px solid #eaeaea; } } .pxs-modal-search .autocomplete-list--term { width: calc(20% - 1rem); padding-right: 2rem; } @media (max-width: 47.99em) { .pxs-modal-search .autocomplete-list--term { display: none; } } .pxs-modal-search .autocomplete-list--term .autocomplete-list-title { margin-bottom: 2rem; } .pxs-modal-search .autocomplete-list--term .amount { position: static; color: #9f9f9f; } .pxs-modal-search .autocomplete-list--category { position: relative; order: 1; min-width: 22.5rem; margin: 0 3rem 0 0; padding: 0 3rem 0 0; } .pxs-modal-search .autocomplete-list--category:after { display: block; content: ''; position: absolute; right: 0; top: 0; bottom: 0; border-right: 1px solid #eaeaea; } .pxs-modal-search .autocomplete-list dd { padding: 0; border: none !important; } .pxs-modal-search .autocomplete-list dd:hover, .pxs-modal-search .autocomplete-list dd.selected { background: none; } .pxs-modal-search .autocomplete-list-title { grid-column-start: 1; grid-column-end: -1; padding: 0; font-size: 1.2rem; text-transform: uppercase; font-weight: 400; letter-spacing: 0.1rem; border: none !important; } .pxs-modal-search .autocomplete-list-title:hover, .pxs-modal-search .autocomplete-list-title.selected { background: none; } .pxs-copyright { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 2rem 0; color: #646464; font-weight: 200; } .pxs-copyright__logo { flex: 1 1 auto; } .pxs-copyright__logo svg { width: 16rem; } @media (min-width: 48em) { .pxs-copyright__logo { order: 1; } } .pxs-copyright__icon { width: 3.5rem; } @media (min-width: 48em) { .pxs-copyright__icon { order: 3; margin-left: 1.5rem; } } .pxs-copyright__text { width: 100%; font-size: 12px; margin: 1.5rem 0; text-align: center; } @media (min-width: 48em) { .pxs-copyright__text { width: auto; order: 2; font-size: 14px; margin: 0; } } .pxs-featured { padding: 3.5rem 0; } @media (min-width: 48em) { .pxs-featured { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; } } @media (min-width: 64em) { .pxs-featured { grid-template-columns: repeat(4, 17.1rem); grid-column-gap: 9.2rem; justify-content: center; } } @media (min-width: 64em) { .pxs-featured { padding: 5rem 0; } } .pxs-featured__item { display: flex; align-items: center; } @media (min-width: 64em) { .pxs-featured__item { flex-wrap: wrap; justify-content: center; } } @media (max-width: 63.99em) { .pxs-featured__item + .pxs-featured__item { margin-top: 2rem; } } .pxs-featured__icon { position: relative; margin-right: 2.5rem; width: 7rem; } @media (min-width: 64em) { .pxs-featured__icon { margin-right: 0; margin-bottom: 1.5rem; } } .pxs-featured__icon svg { max-width: 100%; } @media (min-width: 64em) { .pxs-featured__content { text-align: center; } } .pxs-featured__content-title { font-size: 12px; color: #222222; text-transform: uppercase; } @media (max-width: 47.99em) { .pxs-featured__content-title br { display: none; } } @media (min-width: 64em) { .pxs-featured__content-title { margin-bottom: 1rem; font-size: 14px; line-height: 18px; } } .pxs-featured__content-text { color: #646464; font-weight: 300; line-height: 18px; } .pxs-banner { position: relative; display: block; height: 25rem; width: 100%; } @media (min-width: 64em) { .pxs-banner { height: 57.5rem; } } .pxs-banner__img { -o-object-fit: cover; object-fit: cover; height: 100%; width: 100%; } @media (min-width: 48em) { .pxs-banner__img--mobile { display: none; } } .pxs-banner__img--desktop { display: none; } @media (min-width: 48em) { .pxs-banner__img--desktop { display: block; } } .pxs-banner__content { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 4.5rem; text-align: center; } @media (min-width: 64em) { .pxs-banner__content { padding: 6.5rem 4.5rem 4.5rem; } } .pxs-banner__headline { font-size: 10px; letter-spacing: 0.2rem; color: #f4f4f4; text-transform: uppercase; text-align: center; } @media (min-width: 64em) { .pxs-banner__headline { font-size: 12px; } } .pxs-banner__subheadline { font-weight: 300; font-size: 3.4rem; line-height: 36px; color: #fff; text-transform: uppercase; margin: 0 0 1.5rem; } @media (min-width: 64em) { .pxs-banner__subheadline { font-weight: 300; font-size: 6.4rem; margin-bottom: 2rem; margin-top: 0; line-height: 76px; } } .pxs-banner__button { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; } @media (max-width: 63.99em) { .pxs-banner__button { font-size: 10px; } } .pxs-banner__button * { fill: #5b899a; } .pxs-banner__button, .pxs-banner__button:visited { background-color: #fff; color: #222222; } .pxs-banner__button:hover, .pxs-banner__button:focus, .pxs-banner__button:active { transition: all 0.2s; background-color: #eaeaea; color: #222222; } .pxs-banner__button[disabled] { opacity: 0.65; cursor: auto; } .pxs-banner__button-span { display: inline-block; padding-right: 3rem; } .pxs-banner__button svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; width: 1.8rem; } .pxs-navigation { position: relative; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } @media (max-width: 63.99em) { .pxs-navigation { display: none; } } .pxs-navigation__items { margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; } .pxs-navigation__item { margin: 0; letter-spacing: 0.09em; } .pxs-navigation__item:hover .pxs-navigation__dropdown { display: block; } .pxs-navigation__link { display: block; padding: 1.5rem; font-size: 1.2rem; color: #222222; text-transform: uppercase; transition: all 0.2s; } .pxs-navigation__link, .pxs-navigation__link:visited { color: #222222; } .pxs-navigation__link:hover, .pxs-navigation__link:focus, .pxs-navigation__link:active { color: #d7be7c; text-decoration: none; } .pxs-navigation__link--column, .pxs-navigation__link--subcategory { padding: 0; } .pxs-navigation__link--column { font-size: 1.2rem; } .pxs-navigation__link--subcategory { line-height: 2.8rem; font-size: 1.4rem; font-weight: 300; text-transform: none; letter-spacing: normal; color: #363636; } .pxs-navigation__dropdown { display: none; position: absolute; top: 5.6rem; left: 0; right: 0; width: 100vw; padding: 2.5rem 1.5rem 3.5rem; margin-left: calc((100vw - 100%)/-2); z-index: 1001; background-color: #fff; box-shadow: 0 1rem 0.6rem rgba(0, 0, 0, 0.03); } .pxs-navigation__columns { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 40px; margin: 0 auto; max-width: 132rem; } .pxs-navigation__column { margin: 0; flex: 0 0 auto; width: 25%; } .pxs-navigation__subcategories { margin: 0; padding: 0; list-style: none; margin-top: 1rem; } .pxs-navigation__subcategory { margin: 0; } .pxs-brands { padding: 2.5rem 0; } @media (min-width: 64em) { .pxs-brands { padding: 6rem 0; } } .pxs-brands__wrapper { overflow: hidden; } .pxs-brands__items { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; } .pxs-brands__img { width: 100%; } .pxs-brands__button { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; } @media (max-width: 63.99em) { .pxs-brands__button { font-size: 10px; } } .pxs-brands__button * { fill: #5b899a; } .pxs-brands__button, .pxs-brands__button:visited { background-color: #fff; color: #222222; } .pxs-brands__button:hover, .pxs-brands__button:focus, .pxs-brands__button:active { transition: all 0.2s; background-color: #eaeaea; color: #222222; } .pxs-brands__button[disabled] { opacity: 0.65; cursor: auto; } .pxs-brands__button-wrapper { width: 100%; text-align: center; } .pxs-brands__button-span { display: inline-block; padding-right: 3rem; } .pxs-brands__button svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } .pxs-headline { font-weight: 300; font-size: 20px; text-transform: uppercase; text-align: center; margin: 0 0 2.5rem; } @media (min-width: 48em) { .pxs-headline { font-weight: 300; font-size: 24px; margin: 0 0 5rem; } } .pxs-teaser { color: #fff; background-color: #5b899a; } .pxs-teaser--dark { background-color: #222222; } .pxs-teaser--dark .pxs-teaser__headline { color: #d7be7c; } @media (min-width: 64em) { .pxs-teaser { display: flex; } } .pxs-teaser__item { padding: 3rem 2rem; text-align: center; } @media (min-width: 64em) { .pxs-teaser__item { order: 1; width: 50%; padding: 0 6rem; display: flex; flex-direction: column; justify-content: center; text-align: left; } } .pxs-teaser__headline { color: #25434e; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; } @media (min-width: 64em) { .pxs-teaser__headline { font-size: 12px; } } .pxs-teaser__subheadline { font-weight: 300; font-size: 3.4rem; color: #fff; text-transform: uppercase; line-height: 36px; margin-bottom: 2.5rem; } @media (min-width: 64em) { .pxs-teaser__subheadline { font-size: 52px; line-height: 58px; } } .pxs-teaser__content { margin-bottom: 3.5rem; } .pxs-teaser__text { font-weight: 300; line-height: 2rem; } @media (min-width: 64em) { .pxs-teaser__text { font-size: 16px; line-height: 25px; } } .pxs-teaser__picture { height: 100%; } .pxs-teaser__img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .pxs-teaser__img-wrapper { cursor: pointer; } @media (min-width: 64em) { .pxs-teaser__img-wrapper { order: 2; width: 50%; height: 53rem; } } .pxs-teaser__buttons { display: flex; } @media (max-width: 63.99em) { .pxs-teaser__buttons { justify-content: space-between; } } .pxs-teaser__button { padding: 1.5rem 1rem; position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; } @media (max-width: 63.99em) { .pxs-teaser__button { font-size: 10px; } } .pxs-teaser__button * { fill: #5b899a; } .pxs-teaser__button, .pxs-teaser__button:visited { background-color: #fff; color: #222222; } .pxs-teaser__button:hover, .pxs-teaser__button:focus, .pxs-teaser__button:active { transition: all 0.2s; background-color: #eaeaea; color: #222222; } .pxs-teaser__button[disabled] { opacity: 0.65; cursor: auto; } @media (max-width: 63.99em) { .pxs-teaser__button { width: calc(50% - 10px); } } @media (min-width: 64em) { .pxs-teaser__button + .pxs-teaser__button { margin-left: 2rem; } } @media (max-width: 29.99em) { .pxs-teaser__button-span { font-size: 0.8rem; } } .pxs-teaser__button--icon-left .pxs-teaser__button-span { display: inline-block; padding-left: 3rem; } @media (max-width: 29.99em) { .pxs-teaser__button--icon-left .pxs-teaser__button-span { padding-left: 1.5rem; } } .pxs-teaser__button--icon-left svg { position: absolute; top: 50%; transform: translateY(-50%); left: 1rem; max-width: 3rem; max-height: 3rem; } .pxs-teaser__button--icon-right .pxs-teaser__button-span { display: inline-block; padding-right: 3rem; } .pxs-teaser__button--icon-right svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } .pxs-tiles { padding: 2.5rem 0; } @media (min-width: 48em) { .pxs-tiles { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 3rem; grid-row-gap: 5rem; padding: 7rem 0 6rem; } } .pxs-tiles__item { display: block; text-align: center; font-size: 14px; } @media (max-width: 47.99em) { .pxs-tiles__item + .pxs-tiles__item { margin-top: 4rem; } } .pxs-tiles__item, .pxs-tiles__item:visited { color: #363636; } .pxs-tiles__item:hover, .pxs-tiles__item:focus, .pxs-tiles__item:active { color: inherit; text-decoration: none; } .pxs-tiles__item:hover .pxs-tiles__title, .pxs-tiles__item:focus .pxs-tiles__title, .pxs-tiles__item:active .pxs-tiles__title { color: #d7be7c; } .pxs-tiles__item:hover .pxs-tiles__title svg, .pxs-tiles__item:focus .pxs-tiles__title svg, .pxs-tiles__item:active .pxs-tiles__title svg { fill: #d7be7c; } .pxs-tiles__img { max-height: none; margin-bottom: 0.5rem; } @media (min-width: 48em) { .pxs-tiles__img { margin-bottom: 1rem; } } .pxs-tiles__title { text-transform: uppercase; color: #222222; font-size: 1rem; line-height: 1.8rem; letter-spacing: 0.1em; text-align: center; } @media (min-width: 48em) { .pxs-tiles__title { font-size: 1.2rem; } } .pxs-tiles__title svg { width: 1.3rem; fill: #5b899a; margin-left: 0.5rem; } .pxs-tiles-carousel { position: relative; padding: 0 0 8rem 0; } @media (min-width: 48em) { .pxs-tiles-carousel { padding: 0 0 13rem 0; } } .pxs-tiles-carousel__wrapper { position: relative; } .pxs-tiles-carousel__items { display: flex; align-items: center; } .pxs-tiles-carousel__item, .pxs-tiles-carousel__item:visited { color: #363636; } .pxs-tiles-carousel__item:hover, .pxs-tiles-carousel__item:focus, .pxs-tiles-carousel__item:active { color: inherit; text-decoration: none; } .pxs-tiles-carousel__item:hover .pxs-tiles-carousel__title, .pxs-tiles-carousel__item:focus .pxs-tiles-carousel__title, .pxs-tiles-carousel__item:active .pxs-tiles-carousel__title { color: #d7be7c; } .pxs-tiles-carousel__item:hover .pxs-tiles-carousel__title svg, .pxs-tiles-carousel__item:focus .pxs-tiles-carousel__title svg, .pxs-tiles-carousel__item:active .pxs-tiles-carousel__title svg { fill: #d7be7c; } .pxs-tiles-carousel__img { width: 100%; } @media (min-width: 48em) { .pxs-tiles-carousel__img { margin-bottom: 1rem; } } .pxs-tiles-carousel__title { text-transform: uppercase; color: #222222; font-size: 1rem; line-height: 1.8rem; letter-spacing: 0.1em; text-align: center; } @media (min-width: 48em) { .pxs-tiles-carousel__title { font-size: 1.2rem; } } .pxs-tiles-carousel__title svg { width: 1.3rem; fill: #5b899a; margin-left: 0.5rem; } .pxs-tiles-carousel__progressbar { position: absolute; left: calc(50% - 10rem); bottom: 5rem; width: 20rem; height: 0.2rem; z-index: 5; text-align: center; transition: .3s opacity; background-color: #f4f4f4; } @media (min-width: 48em) { .pxs-tiles-carousel__progressbar { bottom: 8rem; height: 0.4rem; } } .pxs-tiles-carousel__progressbar-span { position: absolute; left: 0; top: 0; width: 100%; height: 0.2rem; background: #d7be7c; transform: scale(0); transform-origin: left top; } @media (min-width: 48em) { .pxs-tiles-carousel__progressbar-span { height: 0.4rem; } } .pxs-tiles-carousel__button--disabled { display: none; } .pxs-tiles-carousel__button-next, .pxs-tiles-carousel__button-prev { position: absolute; top: calc(50% - 20px); transform: translateY(-50%); z-index: 5; cursor: pointer; padding: 2.5rem 1.8rem; background: #fff; } .pxs-tiles-carousel__button-next svg, .pxs-tiles-carousel__button-prev svg { width: 1.8rem; fill: #5b899a; } @media (max-width: 47.99em) { .pxs-tiles-carousel__button-next, .pxs-tiles-carousel__button-prev { display: none; } } .pxs-tiles-carousel__button-next { right: -1rem; } .pxs-tiles-carousel__button-prev { left: -1rem; } .pxs-tiles-carousel__button-prev svg { transform: rotate(180deg); } .pxs-breadcrumbs { display: flex; padding: 1.5rem 0; font-size: 1.2rem; font-weight: 300; color: #646464; } @media (max-width: 63.99em) { .pxs-breadcrumbs { margin-top: 1.5rem; } } .pxs-breadcrumbs__items { margin: 0; padding: 0; list-style: none; display: flex; } .pxs-breadcrumbs__item { margin: 0; } .pxs-breadcrumbs__item a { text-decoration: none; } .pxs-breadcrumbs__item a, .pxs-breadcrumbs__item a:visited { color: #646464; } .pxs-breadcrumbs__item a:hover, .pxs-breadcrumbs__item a:focus, .pxs-breadcrumbs__item a:active { color: #d7be7c; text-decoration: none; } .pxs-breadcrumbs__item a::after { margin: 0 1rem; content: '/'; color: #eaeaea; } .pxs-breadcrumbs__item.home a { display: flex; align-items: center; } .pxs-breadcrumbs__item.home a::before { height: 1.2rem; width: 1.4rem; display: inline-block; content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11.704'%3E%3Cg data-name='Group 169'%3E%3Cg data-name='Group 168'%3E%3Cpath data-name='Path 1237' d='M7 3.035L2.185 6.74v4.964h3.869V8.066H8.11v3.638h3.706V6.74z' fill='%235b899a'/%3E%3C/g%3E%3C/g%3E%3Cg data-name='Group 171'%3E%3Cg data-name='Group 170'%3E%3Cpath data-name='Path 1238' d='M12.017 3.86V1.318H9.989v.978L7 0 0 5.385l.966 1.256L7 1.998l6.034 4.643L14 5.385z' fill='%235b899a'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 1.4rem; background-repeat: no-repeat; } .pxs-breadcrumbs__item.home a span { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .pxs-qty-select { display: flex; padding: 1.2rem 1.5rem; height: auto; max-width: 12rem; font-weight: 300; text-align: center; border: 1px solid #eaeaea; border-radius: 6px; min-width: 9rem; } @media (max-width: 29.99em) { .pxs-qty-select { width: 9rem !important; } } .pxs-qty-select__minus, .pxs-qty-select__plus { font-size: 2.5rem; color: #5b899a; cursor: pointer; } .pxs-qty-select .input-text { border: none; max-width: 7rem; padding: 0; text-align: center; } .pxs-qty-select .input-text:hover:not([disabled]), .pxs-qty-select .input-text:focus:not([disabled]) { border: none; box-shadow: none; } .additional-attributes tbody > tr > th, .additional-attributes tbody > tr td { padding: 0.5rem 1rem !important; font-weight: 300; } .additional-attributes tbody > tr td::before { font-weight: 300 !important; } .additional-attributes tr:nth-child(even) { background-color: #eaeaea; } .pxs-progress-bar { margin: 0; padding: 0; list-style: none; display: flex; justify-content: flex-end; align-items: flex-start; list-style: none; } @media (max-width: 47.99em) { .pxs-progress-bar { justify-content: center; } } .pxs-progress-bar__item { margin: 0; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 14rem; font-size: 1.2rem; cursor: pointer; } .pxs-progress-bar__item::before { position: absolute; top: 0.8rem; content: ''; width: 100%; height: 0.4rem; transform: translateX(50%); background-color: #f4f4f4; } .pxs-progress-bar__item:last-child::before { display: none; } .pxs-progress-bar__item:last-child .pxs-progress-bar__text { color: #9f9f9f; } .pxs-progress-bar__item._active::before { background-color: #f4f4f4; } .pxs-progress-bar__item._complete::before { background-color: #5b899a; } .pxs-progress-bar__item._active .pxs-progress-bar__indicator::before, .pxs-progress-bar__item._complete .pxs-progress-bar__indicator::before { content: ''; position: absolute; width: 1rem; height: 1rem; border-radius: 50%; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 1; background-color: #5b899a; } .pxs-progress-bar__indicator { position: relative; width: 2.2rem; height: 2.2rem; border-radius: 50%; background-color: #f4f4f4; } .pxs-progress-bar__indicator--active::before { position: absolute; width: 1rem; height: 1rem; border-radius: 50%; top: 50%; left: 50%; content: ''; transform: translateX(-50%) translateY(-50%); z-index: 1; background-color: #5b899a; } .pxs-progress-bar__text { margin-top: 0.5rem; line-height: 1.2rem; text-align: center; font-weight: 300; } .pxs-qty-calculator { margin-bottom: 2.5rem; padding: 2.5rem; display: flex; align-items: center; background-color: #f4f4f4; font-size: 1.2rem; text-transform: uppercase; font-weight: 400; color: #363636; } .pxs-qty-calculator__title { margin: 0; flex: 0 0 auto; } .pxs-qty-calculator__input { display: block; width: 100%; max-width: 80rem; padding: 1.5rem; height: auto; width: 100%; font-size: 14px; font-family: "Montserrat", sans-serif; font-weight: 300; border: 1px solid #eaeaea; border-radius: 6px; background-color: #fff; transition: all 0.2s; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; flex: 0 1 auto; margin: 0 15px; max-width: 8rem; } .pxs-qty-calculator__input:hover:not([disabled]), .pxs-qty-calculator__input:focus:not([disabled]) { border: 1px solid #9f9f9f; box-shadow: none; } .pxs-qty-calculator__input::-webkit-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-qty-calculator__input::-moz-placeholder { opacity: 1; color: #9f9f9f; } .pxs-qty-calculator__input:-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-qty-calculator__input::-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-qty-calculator__input::placeholder { opacity: 1; color: #9f9f9f; } .pxs-qty-calculator__input[disabled] { opacity: 0.6; } .pxs-qty-calculator__result { flex: 1 0 auto; margin: 0; } .modal-popup .action-primary, .modal-popup .action.primary, .modal-slide .action-primary, .modal-slide .action.primary, .modal-custom .action-primary, .modal-custom .action.primary { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #5b899a; color: #fff; } @media (max-width: 63.99em) { .modal-popup .action-primary, .modal-popup .action.primary, .modal-slide .action-primary, .modal-slide .action.primary, .modal-custom .action-primary, .modal-custom .action.primary { font-size: 10px; } } .modal-popup .action-primary *, .modal-popup .action.primary *, .modal-slide .action-primary *, .modal-slide .action.primary *, .modal-custom .action-primary *, .modal-custom .action.primary * { fill: #fff; } .modal-popup .action-primary, .modal-popup .action-primary:visited, .modal-popup .action.primary, .modal-popup .action.primary:visited, .modal-slide .action-primary, .modal-slide .action-primary:visited, .modal-slide .action.primary, .modal-slide .action.primary:visited, .modal-custom .action-primary, .modal-custom .action-primary:visited, .modal-custom .action.primary, .modal-custom .action.primary:visited { background-color: #5b899a; color: #fff; } .modal-popup .action-primary:hover, .modal-popup .action-primary:focus, .modal-popup .action-primary:active, .modal-popup .action.primary:hover, .modal-popup .action.primary:focus, .modal-popup .action.primary:active, .modal-slide .action-primary:hover, .modal-slide .action-primary:focus, .modal-slide .action-primary:active, .modal-slide .action.primary:hover, .modal-slide .action.primary:focus, .modal-slide .action.primary:active, .modal-custom .action-primary:hover, .modal-custom .action-primary:focus, .modal-custom .action-primary:active, .modal-custom .action.primary:hover, .modal-custom .action.primary:focus, .modal-custom .action.primary:active { transition: all 0.2s; background-color: #25434e; color: #fff; } .modal-popup .action-primary[disabled], .modal-popup .action.primary[disabled], .modal-slide .action-primary[disabled], .modal-slide .action.primary[disabled], .modal-custom .action-primary[disabled], .modal-custom .action.primary[disabled] { opacity: 0.65; cursor: auto; } .modal-popup .action-secondary, .modal-popup .action.secondary, .modal-slide .action-secondary, .modal-slide .action.secondary, .modal-custom .action-secondary, .modal-custom .action.secondary { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; border: 1px solid #5b899a; } @media (max-width: 63.99em) { .modal-popup .action-secondary, .modal-popup .action.secondary, .modal-slide .action-secondary, .modal-slide .action.secondary, .modal-custom .action-secondary, .modal-custom .action.secondary { font-size: 10px; } } .modal-popup .action-secondary *, .modal-popup .action.secondary *, .modal-slide .action-secondary *, .modal-slide .action.secondary *, .modal-custom .action-secondary *, .modal-custom .action.secondary * { fill: #5b899a; } .modal-popup .action-secondary, .modal-popup .action-secondary:visited, .modal-popup .action.secondary, .modal-popup .action.secondary:visited, .modal-slide .action-secondary, .modal-slide .action-secondary:visited, .modal-slide .action.secondary, .modal-slide .action.secondary:visited, .modal-custom .action-secondary, .modal-custom .action-secondary:visited, .modal-custom .action.secondary, .modal-custom .action.secondary:visited { background-color: #fff; color: #222222; border: 1px solid #5b899a; } .modal-popup .action-secondary:hover, .modal-popup .action-secondary:focus, .modal-popup .action-secondary:active, .modal-popup .action.secondary:hover, .modal-popup .action.secondary:focus, .modal-popup .action.secondary:active, .modal-slide .action-secondary:hover, .modal-slide .action-secondary:focus, .modal-slide .action-secondary:active, .modal-slide .action.secondary:hover, .modal-slide .action.secondary:focus, .modal-slide .action.secondary:active, .modal-custom .action-secondary:hover, .modal-custom .action-secondary:focus, .modal-custom .action-secondary:active, .modal-custom .action.secondary:hover, .modal-custom .action.secondary:focus, .modal-custom .action.secondary:active { transition: all 0.2s; background-color: #5b899a; color: #fff; } .modal-popup .action-secondary:hover *, .modal-popup .action-secondary:focus *, .modal-popup .action-secondary:active *, .modal-popup .action.secondary:hover *, .modal-popup .action.secondary:focus *, .modal-popup .action.secondary:active *, .modal-slide .action-secondary:hover *, .modal-slide .action-secondary:focus *, .modal-slide .action-secondary:active *, .modal-slide .action.secondary:hover *, .modal-slide .action.secondary:focus *, .modal-slide .action.secondary:active *, .modal-custom .action-secondary:hover *, .modal-custom .action-secondary:focus *, .modal-custom .action-secondary:active *, .modal-custom .action.secondary:hover *, .modal-custom .action.secondary:focus *, .modal-custom .action.secondary:active * { fill: #fff; } .modal-popup .action-secondary[disabled], .modal-popup .action.secondary[disabled], .modal-slide .action-secondary[disabled], .modal-slide .action.secondary[disabled], .modal-custom .action-secondary[disabled], .modal-custom .action.secondary[disabled] { opacity: 0.65; cursor: auto; } .modal-popup .modal-footer, .modal-slide .modal-footer, .modal-custom .modal-footer { display: flex; justify-content: space-between; } .pxs-aside-menu { padding: 1rem 2rem; background-color: #fff; } @media (min-width: 64em) { .pxs-aside-menu { display: none; } } .pxs-aside-menu__top { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid #eaeaea; } .pxs-aside-menu__icons { display: flex; align-items: center; } .pxs-aside-menu__icons-item + .pxs-aside-menu__icons-item { margin-left: 2rem; } .pxs-aside-menu__icons-item svg { width: 2.5rem; height: 2.5rem; fill: #5b899a; } .pxs-aside-menu__wrapper { padding: 2rem 0; } .pxs-aside-menu__links { margin: 0; padding: 0; list-style: none; } .pxs-aside-menu__toggle { z-index: 99; } .pxs-aside-menu__toggle svg { width: 2rem; height: 2rem; fill: #5b899a; } .pxs-aside-menu .level-top a { display: block; padding: 0.5rem 0; color: #363636; } .pxs-aside-menu .level-top > a { position: relative; padding-right: 2rem; text-transform: uppercase; } .pxs-aside-menu .level-top > a::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); content: ''; width: 1rem; height: 1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.38' height='35.97'%3E%3Cpath data-name='Forma 1 copy 2' d='M19.66 19.76L4.27 35.23a2.481 2.481 0 0 1-3.54 0 2.523 2.523 0 0 1 0-3.56l13.61-13.69L.73 4.29a2.523 2.523 0 0 1 0-3.56 2.481 2.481 0 0 1 3.54 0L19.66 16.2a2.535 2.535 0 0 1 0 3.56z' fill='%235b899a' fill-rule='evenodd'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: 50% 50%; background-size: 0.5rem 1rem; transition: all 0.2s; } .pxs-aside-menu .level-top a.ui-state-active { text-decoration: none; font-weight: 700; } .pxs-aside-menu .level-top a.ui-state-active::after { transform: rotate(90deg); } .pxs-aside-menu .level-top .submenu { position: static !important; padding-left: 2rem; } .nav-open .pxs-aside-menu { width: 100%; } .message.notice { background: none; color: #363636; font-size: 1.5rem; } .message.notice .title { margin: 1rem 0 0.5rem; font-size: 1.4rem; line-height: 1.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .message.notice .block { margin-bottom: 0; } .message.notice a { color: #5b899a; transition: all 0.2s; } .message.notice a, .message.notice a:visited { color: #5b899a; } .message.notice a:hover, .message.notice a:focus, .message.notice a:active { color: #d7be7c; text-decoration: none; background: none; } .pxs-review { position: relative; } @media (min-width: 48em) { .pxs-review { margin-left: 7rem; padding-left: 3rem; } } .pxs-review__date { font-size: 1.5rem; font-weight: 300; } @media (min-width: 48em) { .pxs-review__date { display: none; } } .pxs-review__date-aside { position: absolute; left: -7rem; top: 0; text-align: center; } @media (max-width: 47.99em) { .pxs-review__date-aside { display: none; } } .pxs-review__day { font-size: 3.6rem; line-height: 4rem; display: block; } .pxs-review__month-year { font-size: 1.2rem; display: block; } .pxs-review__meta { display: flex; } .pxs-review__ratings { display: flex; } .pxs-review__author, .pxs-review__title, .pxs-review__value { font-size: 1.4rem; font-weight: 300; } @media (min-width: 48em) { .pxs-review__author, .pxs-review__title, .pxs-review__value { font-size: 1.5rem; } } .pxs-review__title { font-weight: 700; } .pxs-review__author { margin-right: 1rem; color: #5b899a; } .pxs-review__content { font-size: 1.4rem; line-height: 2rem; } @media (min-width: 48em) { .pxs-review__content { font-size: 1.5rem; line-height: 2rem; } } .pxs-review__rating { display: none; } .pxs-review__value { margin-left: 1rem; } .pxs-reviews__list { margin: 0; padding: 0; list-style: none; position: relative; margin: 0; padding: 0; } .pxs-reviews__list--short .pxs-reviews__list-item:nth-of-type(n+6) { display: none; } .pxs-reviews__list--short:after { position: absolute; left: 0; right: 0; bottom: 0; display: block; height: 20rem; content: ''; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); } .pxs-reviews__list-item + .pxs-reviews__list-item { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #eaeaea; } @media (min-width: 48em) { .pxs-reviews__list-item + .pxs-reviews__list-item { margin-top: 3.5rem; padding-top: 3.5rem; } } .pxs-reviews__form { margin-top: 3rem; padding-top: 3rem; border-radius: 0.6rem; border-top: 1px solid #eaeaea; } .pxs-reviews__form--hide { display: none; } @media (min-width: 48em) { .pxs-reviews__form-columns { display: flex; justify-content: space-between; } } @media (min-width: 48em) { .pxs-reviews__form-left, .pxs-reviews__form-right { width: calc(50% - 1rem); } } .pxs-reviews__form .label { width: 100%; font-size: 1.2rem; letter-spacing: 0.1em; text-transform: uppercase; color: #222222; } .pxs-reviews__form .input-text { display: block; width: 100%; max-width: 80rem; padding: 1.5rem; height: auto; width: 100%; font-size: 14px; font-family: "Montserrat", sans-serif; font-weight: 300; border: 1px solid #eaeaea; border-radius: 6px; background-color: #fff; transition: all 0.2s; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .pxs-reviews__form .input-text:hover:not([disabled]), .pxs-reviews__form .input-text:focus:not([disabled]) { border: 1px solid #9f9f9f; box-shadow: none; } .pxs-reviews__form .input-text::-webkit-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-reviews__form .input-text::-moz-placeholder { opacity: 1; color: #9f9f9f; } .pxs-reviews__form .input-text:-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-reviews__form .input-text::-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-reviews__form .input-text::placeholder { opacity: 1; color: #9f9f9f; } .pxs-reviews__form .input-text[disabled] { opacity: 0.6; } @media (min-width: 48em) { .pxs-reviews__form textarea { height: 14rem; } } .pxs-reviews__form .action.submit { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #5b899a; color: #fff; margin-top: 2rem; } @media (max-width: 63.99em) { .pxs-reviews__form .action.submit { font-size: 10px; } } .pxs-reviews__form .action.submit * { fill: #fff; } .pxs-reviews__form .action.submit, .pxs-reviews__form .action.submit:visited { background-color: #5b899a; color: #fff; } .pxs-reviews__form .action.submit:hover, .pxs-reviews__form .action.submit:focus, .pxs-reviews__form .action.submit:active { transition: all 0.2s; background-color: #25434e; color: #fff; } .pxs-reviews__form .action.submit[disabled] { opacity: 0.65; cursor: auto; } @media (max-width: 47.99em) { .pxs-reviews__form .action.submit { width: 100%; } } .pxs-reviews__legend { margin-bottom: 1.5rem; font-weight: 700; } .pxs-reviews__legend-span { font-weight: 400; } .pxs-reviews__rating { display: flex; margin-bottom: 1rem; } .pxs-reviews__rating-item { position: relative; width: 12rem; } @media (min-width: 48em) { .pxs-reviews__rating-item { width: 15rem; } } .pxs-reviews__rating-vote { margin-left: -0.6rem; height: 2.4rem; } .pxs-reviews__actions { text-align: right; } .pxs-reviews-summary { display: flex; flex-direction: column; align-items: center; margin-bottom: 3rem; } @media (min-width: 48em) { .pxs-reviews-summary { flex-direction: row; justify-content: space-between; align-items: center; } } .pxs-reviews-summary__rating { display: flex; } @media (max-width: 47.99em) { .pxs-reviews-summary__rating { margin-bottom: 2rem; } } .pxs-reviews-summary__avg-value { margin-left: 1rem; } @media (max-width: 47.99em) { .pxs-reviews-summary__action { width: 100%; } } .pxs-reviews-summary__add-review { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; border: 1px solid #5b899a; } @media (max-width: 63.99em) { .pxs-reviews-summary__add-review { font-size: 10px; } } .pxs-reviews-summary__add-review * { fill: #5b899a; } .pxs-reviews-summary__add-review, .pxs-reviews-summary__add-review:visited { background-color: #fff; color: #222222; border: 1px solid #5b899a; } .pxs-reviews-summary__add-review:hover, .pxs-reviews-summary__add-review:focus, .pxs-reviews-summary__add-review:active { transition: all 0.2s; background-color: #5b899a; color: #fff; } .pxs-reviews-summary__add-review:hover *, .pxs-reviews-summary__add-review:focus *, .pxs-reviews-summary__add-review:active * { fill: #fff; } .pxs-reviews-summary__add-review[disabled] { opacity: 0.65; cursor: auto; } @media (max-width: 47.99em) { .pxs-reviews-summary__add-review { width: 100%; } } .pxs-rating { display: inline-block; margin-left: 1rem; } .pxs-rating__stars { white-space: nowrap; margin-right: 0.2rem; } .pxs-rating__stars-grey { height: 2.2rem; z-index: -1; } .pxs-rating__stars-gradient { height: 2.2rem; margin-top: -2.2rem; overflow: hidden; } .pxs-rating__stars-gradient svg { fill: #d7be7c; } .pxs-rating svg { width: 1.2rem; height: 2.2rem; } .pxs-rating svg + .pxs-rating svg { margin-left: -0.2rem; } .pxs-rating--large .pxs-rating__stars-grey { height: 2rem; } .pxs-rating--large .pxs-rating__stars-gradient { height: 2rem; margin-top: -2rem; } .pxs-rating--large svg { width: 2rem; height: 2rem; } .pxs-separator { position: relative; margin: 2rem 0; text-align: center; font-size: 1.2rem; text-transform: uppercase; color: #9f9f9f; } @media (min-width: 48em) { .pxs-separator { margin: 3.5rem 0; } } .pxs-separator-text { background-color: #fff; padding: 0 1rem; } .pxs-separator::after { content: ''; position: absolute; width: 100%; height: 0.1rem; background-color: #c5c5c5; top: calc(50% - 0.1rem); left: 0; z-index: -1; } .pxs-success-page { padding: 4.5rem 0; text-align: center; } .pxs-success-page__wrapper { position: relative; max-width: 86rem; margin: 5.5rem auto 3rem; padding: 8rem 0 6rem; background-color: #f4f4f4; } .pxs-success-page__icon { position: absolute; top: -5rem; left: calc(50% - 5rem); } .pxs-success-page__icon svg { width: 10rem; height: 10rem; } .pxs-success-page__content { margin-bottom: 2rem; } .pxs-success-page__content p { margin-bottom: 0; } .pxs-success-page__bottom-text { margin-bottom: 2rem; } .pxs-success-page__bottom-create { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #5b899a; color: #fff; } @media (max-width: 63.99em) { .pxs-success-page__bottom-create { font-size: 10px; } } .pxs-success-page__bottom-create * { fill: #fff; } .pxs-success-page__bottom-create, .pxs-success-page__bottom-create:visited { background-color: #5b899a; color: #fff; } .pxs-success-page__bottom-create:hover, .pxs-success-page__bottom-create:focus, .pxs-success-page__bottom-create:active { transition: all 0.2s; background-color: #25434e; color: #fff; } .pxs-success-page__bottom-create[disabled] { opacity: 0.65; cursor: auto; } .pxs-success-page__bottom-create span { display: inline-block; padding-right: 3rem; } .pxs-success-page__bottom-create svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } .pxs-success-page .action.primary { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #5b899a; color: #fff; } @media (max-width: 63.99em) { .pxs-success-page .action.primary { font-size: 10px; } } .pxs-success-page .action.primary * { fill: #fff; } .pxs-success-page .action.primary, .pxs-success-page .action.primary:visited { background-color: #5b899a; color: #fff; } .pxs-success-page .action.primary:hover, .pxs-success-page .action.primary:focus, .pxs-success-page .action.primary:active { transition: all 0.2s; background-color: #25434e; color: #fff; } .pxs-success-page .action.primary[disabled] { opacity: 0.65; cursor: auto; } .pxs-success-page .action.continue { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; } @media (max-width: 63.99em) { .pxs-success-page .action.continue { font-size: 10px; } } .pxs-success-page .action.continue * { fill: #5b899a; } .pxs-success-page .action.continue, .pxs-success-page .action.continue:visited { background-color: #fff; color: #222222; } .pxs-success-page .action.continue:hover, .pxs-success-page .action.continue:focus, .pxs-success-page .action.continue:active { transition: all 0.2s; background-color: #eaeaea; color: #222222; } .pxs-success-page .action.continue[disabled] { opacity: 0.65; cursor: auto; } .pxs-success-page .action.continue span { display: inline-block; padding-right: 3rem; } .pxs-success-page .action.continue svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } .pxs-category__columns { display: flex; justify-content: flex-end; } @media (max-width: 79.99em) { .pxs-category__columns { flex-direction: column; } } @media (min-width: 80em) { .pxs-category__columns { flex-wrap: wrap; } } .pxs-category__title { width: 100%; } @media (min-width: 80em) { .pxs-category__title { display: none; } } .pxs-category__sidebar { order: 1; } @media (min-width: 80em) { .pxs-category__sidebar { padding-right: 2.5rem; width: 18%; } } .pxs-category__main { order: 2; } @media (min-width: 80em) { .pxs-category__main { padding-left: 2.5rem; width: 82%; } } @media (min-width: 80em) { .pxs-category__main--search-no-results { padding-left: 0; width: 100%; display: flex; justify-content: center; margin-bottom: 2rem; text-align: center; } } .pxs-grid-layout { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 50%); } @media (min-width: 64em) { .pxs-grid-layout { grid-template-columns: repeat(4, 25%); } } .pxs-product-tile { position: relative; margin-bottom: 0; margin-top: -0.1rem; padding: 2rem; border-bottom: 1px solid #eaeaea; } .pxs-product-tile:hover { box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.15); } .pxs-product-tile__brand { margin-top: 1rem; font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: #222222; } .pxs-product-tile__name { font-size: 1.4rem; line-height: 2rem; font-weight: 300; } .pxs-product-tile__name-link { color: #363636; } .pxs-product-tile__name-link, .pxs-product-tile__name-link:visited { color: #363636; } .pxs-product-tile__name-link:hover, .pxs-product-tile__name-link:focus, .pxs-product-tile__name-link:active { color: #d7be7c; text-decoration: none; } .pxs-product-tile__price .price-box { margin: 0.5rem 0; font-size: 1.4rem; line-height: 2rem; font-weight: 300; } .pxs-product-tile__price .price-box .price { font-weight: 300; } .pxs-product-tile__price .price-box .price-to { display: none; } .pxs-product-tile__price .price-label { display: none; } .pxs-product-tile__price-info { margin-top: -0.5rem; font-size: 1.2rem; font-weight: 300; color: #222222; } .pxs-product-tile__badges { display: flex; flex-direction: column; align-items: flex-start; position: absolute; left: -1.5rem; top: 0; z-index: 2; } .pxs-product-tile__badge { padding: 0.5rem 1rem; border-radius: 1.5rem; text-transform: uppercase; font-size: 0.8rem; line-height: 1.2rem; text-align: center; color: #fff; font-weight: 600; letter-spacing: 1px; background-color: #eb0000; } .pxs-product-tile__badge + .pxs-product-tile__badge { margin-top: 0.5rem; } .pxs-product-tile__badge--sale { padding: 0.5rem 1rem; border-radius: 1.5rem; text-transform: uppercase; font-size: 0.8rem; line-height: 1.2rem; text-align: center; color: #fff; font-weight: 600; letter-spacing: 1px; background-color: #eb0000; } .pxs-product-tile__badge--blue { padding: 0.5rem 1rem; border-radius: 1.5rem; text-transform: uppercase; font-size: 0.8rem; line-height: 1.2rem; text-align: center; color: #fff; font-weight: 600; letter-spacing: 1px; background-color: #3d7486; } .pxs-product-tile__badge--green { padding: 0.5rem 1rem; border-radius: 1.5rem; text-transform: uppercase; font-size: 0.8rem; line-height: 1.2rem; text-align: center; color: #fff; font-weight: 600; letter-spacing: 1px; background-color: #79b99c; } .pxs-product-tile__badge--gray { padding: 0.5rem 1rem; border-radius: 1.5rem; text-transform: uppercase; font-size: 0.8rem; line-height: 1.2rem; text-align: center; color: #fff; font-weight: 600; letter-spacing: 1px; background-color: #222222; } .pxs-product-tile .product-item-photo { position: relative; display: block; } .pxs-product-tile .swatch-attribute-options { display: flex; } .pxs-product-tile .swatch-option + .swatch-option { margin-left: 0.5rem; } .pxs-product-tile .swatch-option { width: 1.5rem; height: 1.5rem; min-width: 1rem; cursor: pointer; } .pxs-product-tile .swatch-input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .pxs-product-tile.ias-spinner { grid-column-start: 1; grid-column-end: -1; display: flex; align-items: center; justify-content: center; -webkit-animation-duration: 1.8s; animation-duration: 1.8s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: placeHolderShimmer; animation-name: placeHolderShimmer; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: #f6f7f8; background: linear-gradient(to right, #fafafa 8%, #f4f4f4 38%, #fafafa 54%); background-size: 100rem 64rem; position: relative; } @-webkit-keyframes placeHolderShimmer { 0% { background-position: -46.8rem 0; } 100% { background-position: 46.8rem 0; } } @keyframes placeHolderShimmer { 0% { background-position: -46.8rem 0; } 100% { background-position: 46.8rem 0; } } .pxs-category-brands { position: relative; padding: 0 0 6rem; } @media (max-width: 79.99em) { .pxs-category-brands { border-bottom: 1px solid #eaeaea; } } @media (min-width: 48em) { .pxs-category-brands { padding: 0 0 10.5rem; } } .pxs-category-brands__wrapper { position: relative; overflow: hidden; } .pxs-category-brands__title { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5rem; } .pxs-category-brands__items { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; } .pxs-category-brands__item { text-align: center; } .pxs-category-brands__img { width: auto; max-height: 9rem; min-height: 5rem; background-size: 90% !important; } @media (min-width: 48em) { .pxs-category-brands__img { background-size: contain !important; } } .pxs-category-brands__progressbar { position: absolute; left: calc(50% - 10rem); bottom: 3rem; width: 20rem; height: 0.4rem; z-index: 5; text-align: center; transition: .3s opacity; background-color: #f4f4f4; } @media (min-width: 48em) { .pxs-category-brands__progressbar { bottom: 4.5rem; } } .pxs-category-brands__progressbar-span { position: absolute; left: 0; top: 0; width: 100%; height: 0.4rem; background: #d7be7c; transform: scale(0); transform-origin: left top; } .pxs-category-description { display: flex; position: relative; } @media (min-width: 64em) { .pxs-category-description { padding-top: 10rem; } } @media (max-width: 63.99em) { .pxs-category-description .category-image { display: none; } } @media (min-width: 64em) { .pxs-category-description .category-image { margin-right: 4rem; } } .pxs-category-description .category-description { width: 100%; font-weight: 300; } .pxs-category-description .category-description h2 { font-size: 2.4rem; line-height: 3rem; text-transform: uppercase; } @media (min-width: 64em) { .pxs-category-description .category-description h2 { position: absolute; left: 0; top: 0; } } .toolbar-top .toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1.5rem; background-color: #f4f4f4; font-weight: 300; } @media (max-width: 63.99em) { .toolbar-top .toolbar { display: none; } } .toolbar-top .toolbar .pages { display: none; } .toolbar-top .toolbar p { margin-bottom: 0; } .toolbar-top .toolbar .toolbar-sorter { display: flex; align-items: center; } .toolbar-top .toolbar .sorter-label { margin-right: 0.5rem; min-width: 5rem; } .toolbar-top .toolbar .toolbar-number { font-weight: 400; } .toolbar-top .toolbar .pxs-sorter-button-wrapper { display: flex; align-items: center; position: relative; height: 100%; width: 100%; color: #5b899a; } .toolbar-top .toolbar .pxs-sorter-button { margin-right: 0.5rem; } .toolbar-top .toolbar .sorter-options { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; z-index: 2; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-right: 1rem; color: #5b899a; line-height: 2.1rem; outline: none; cursor: pointer; appearance: none; border: none; background-color: transparent; box-shadow: none; } .toolbar-top .toolbar .sorter-options:hover:not([disabled]), .toolbar-top .toolbar .sorter-options:focus:not([disabled]) { box-shadow: none; } .toolbar-top .toolbar .sorter-action-wrapper { margin-left: 2rem; } .toolbar-top .toolbar .sorter-action-wrapper .sorter-action { display: flex; align-items: center; text-decoration: none; } .toolbar-top .toolbar .sorter-action-wrapper svg { width: 1.5rem; height: 1.5rem; fill: #5b899a; } .toolbar-top .toolbar .sorter-action-wrapper .sort-asc svg { transform: rotate(180deg); } .toolbar-bottom .toolbar .pages, .toolbar-bottom .toolbar .toolbar-amount, .toolbar-bottom .toolbar .toolbar-sorter { display: none; } .pxs-layered-nav__title { display: flex; background: #f4f4f4; justify-content: space-between; margin-left: -1.5rem; margin-right: -1.5rem; } @media (min-width: 80em) { .pxs-layered-nav__title { display: none; } } .pxs-layered-nav__title-count { padding: 0.8rem 0 0.8rem 1.5rem; } .pxs-layered-nav__title-count span { font-weight: 300; } .pxs-layered-nav__title-label { position: relative; padding: 0.8rem 5.5rem 0.8rem 2.5rem; color: #fff; background-color: #5b899a; } .pxs-layered-nav__title-label::before, .pxs-layered-nav__title-label::after { position: absolute; top: 50%; right: 2rem; display: block; width: 1.1rem; height: 0.1rem; content: ''; background: #fff; transition: all 0.2s; } .pxs-layered-nav__title-label::after { transform: rotate(90deg); } .active .pxs-layered-nav__title-label::after { transform: rotate(0deg); opacity: 0; } @media (min-width: 80em) { .pxs-layered-nav__content { display: block !important; } } .pxs-layered-nav__options:not(:first-child) { border-top: 0.1rem solid #eaeaea; } .pxs-layered-nav__options-title { position: relative; display: block; padding: 1.3rem 0; font-size: 1.2rem; font-weight: 400; color: #222222; text-transform: uppercase; cursor: pointer; } .pxs-layered-nav__options-title::before, .pxs-layered-nav__options-title::after { position: absolute; top: 50%; transform: translateY(-50%); display: block; content: ''; background-color: #5b899a; transition: all 0.2s; } .pxs-layered-nav__options-title::before, .pxs-layered-nav__options-title::after { right: 0; width: 1.1rem; height: 0.1rem; } .pxs-layered-nav__options-title::after { transform: rotate(90deg); } .pxs-layered-nav__options-title[aria-expanded=true]::after { transform: rotate(0deg); opacity: 0; } .pxs-layered-nav__options-content { margin-bottom: 2.5rem; } .pxs-layered-nav__price { font-weight: 300; color: #363636; } .pxs-layered-nav__price-fields { display: flex; justify-content: space-between; margin-bottom: 3rem; } .pxs-layered-nav__price-field { position: relative; border-radius: 5rem; } .pxs-layered-nav__price-currency { position: absolute; right: 0.1rem; top: 0.1rem; bottom: 0.1rem; padding: 0.5rem 1rem; max-height: 3.5rem; font-size: 1.2rem; background-color: #f4f4f4; border-top-right-radius: 5rem; border-bottom-right-radius: 5rem; border: 1px solid #eaeaea; } .pxs-layered-nav__price-label { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .pxs-layered-nav__price-input { display: block; width: 100%; max-width: 80rem; padding: 1.5rem; height: auto; width: 100%; font-size: 14px; font-family: "Montserrat", sans-serif; font-weight: 300; border: 1px solid #eaeaea; border-radius: 6px; background-color: #fff; transition: all 0.2s; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 5rem; font-size: 1.2rem; color: #646464; max-width: 10rem; max-height: 3.5rem; } .pxs-layered-nav__price-input:hover:not([disabled]), .pxs-layered-nav__price-input:focus:not([disabled]) { border: 1px solid #9f9f9f; box-shadow: none; } .pxs-layered-nav__price-input::-webkit-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-layered-nav__price-input::-moz-placeholder { opacity: 1; color: #9f9f9f; } .pxs-layered-nav__price-input:-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-layered-nav__price-input::-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-layered-nav__price-input::placeholder { opacity: 1; color: #9f9f9f; } .pxs-layered-nav__price-input[disabled] { opacity: 0.6; } .pxs-layered-nav__price-toolbar { display: flex; align-items: center; justify-content: space-between; color: #9f9f9f; line-height: 1.6rem; } .pxs-layered-nav .action.primary { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; border: 1px solid #5b899a; padding: 0.5rem 1.5rem; font-size: 1rem; font-weight: 400; } @media (max-width: 63.99em) { .pxs-layered-nav .action.primary { font-size: 10px; } } .pxs-layered-nav .action.primary * { fill: #5b899a; } .pxs-layered-nav .action.primary, .pxs-layered-nav .action.primary:visited { background-color: #fff; color: #222222; border: 1px solid #5b899a; } .pxs-layered-nav .action.primary:hover, .pxs-layered-nav .action.primary:focus, .pxs-layered-nav .action.primary:active { transition: all 0.2s; background-color: #5b899a; color: #fff; } .pxs-layered-nav .action.primary:hover *, .pxs-layered-nav .action.primary:focus *, .pxs-layered-nav .action.primary:active * { fill: #fff; } .pxs-layered-nav .action.primary[disabled] { opacity: 0.65; cursor: auto; } .pxs-layered-nav .action.primary:hover { text-decoration: none; } .pxs-layered-nav .items { margin: 0; padding: 0; list-style: none; } .pxs-layered-nav .item { margin: 0.5rem 0 0; } .pxs-layered-nav .item a { display: flex; align-items: center; font-weight: 300; color: #363636; } .pxs-layered-nav .item a:hover { text-decoration: none; } .pxs-layered-nav .item input[type="checkbox"] { display: inline-block; margin: 0 1rem 0 0; height: 2rem; width: 2rem; cursor: pointer; outline: none; border: 1px solid #eaeaea; background-color: #fff; border-radius: 50%; transition: all 0.2s; background-position: 50% 50%; background-size: 1rem 1rem; background-repeat: no-repeat; background-color: #fff; -moz-appearance: none; appearance: none; -webkit-appearance: none; box-shadow: none; flex: 0 0 auto; margin: 0 1rem 0 0; flex: 0 0 auto; } .pxs-layered-nav .item input[type="checkbox"]:hover, .pxs-layered-nav .item input[type="checkbox"]:focus { border-color: #9f9f9f; box-shadow: none; } .pxs-layered-nav .item input[type="checkbox"]:checked { border: 1px solid #5b899a; background-image: url("data:image/svg+xml;utf8, "); } .pxs-layered-nav .item input[type="checkbox"]:checked, .pxs-layered-nav .item input[type="checkbox"]:checked:hover, .pxs-layered-nav .item input[type="checkbox"]:checked:focus { border: 1px solid #5b899a; } .pxs-layered-nav .item input[type="checkbox"][disabled] { opacity: 0.5; } .pxs-layered-nav .count { color: #9f9f9f; } .pxs-layered-nav .count::before { content: '('; } .pxs-layered-nav .count::after { content: ')'; } .pxs-layered-nav .filter-search { display: block; width: 100%; max-width: 80rem; padding: 1.5rem; height: auto; width: 100%; font-size: 14px; font-family: "Montserrat", sans-serif; font-weight: 300; border: 1px solid #eaeaea; border-radius: 6px; background-color: #fff; transition: all 0.2s; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: none; } .pxs-layered-nav .filter-search:hover:not([disabled]), .pxs-layered-nav .filter-search:focus:not([disabled]) { border: 1px solid #9f9f9f; box-shadow: none; } .pxs-layered-nav .filter-search::-webkit-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-layered-nav .filter-search::-moz-placeholder { opacity: 1; color: #9f9f9f; } .pxs-layered-nav .filter-search:-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-layered-nav .filter-search::-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-layered-nav .filter-search::placeholder { opacity: 1; color: #9f9f9f; } .pxs-layered-nav .filter-search[disabled] { opacity: 0.6; } .pxs-layered-nav .filter-current-subtitle { position: relative; display: block; padding: 1.3rem 0; font-size: 1.2rem; font-weight: 400; color: #222222; text-transform: uppercase; cursor: pointer; } .pxs-layered-nav .filter-current .item { padding: 0.1rem 1.5rem; font-size: 1.2rem; background: #f4f4f4; border: 0.1rem solid #c5c5c5; border-radius: 2rem; transition: all 0.2s; } .pxs-layered-nav .filter-current .item:hover { border-color: #222222; } .pxs-layered-nav .filter-current .filter-label { margin-right: 0.5rem; font-weight: 500; } .pxs-layered-nav .filter-current .action.remove { position: relative; } .pxs-layered-nav .filter-current .action.remove:hover { text-decoration: none; } .pxs-layered-nav .filter-current .action.remove::before, .pxs-layered-nav .filter-current .action.remove::after { position: absolute; right: 0; top: 50%; display: block; width: 0.9rem; height: 0.1rem; content: ''; transform: translateY(-50%); background-color: #222222; } .pxs-layered-nav .filter-current .action.remove::before { transform: rotate(-45deg); } .pxs-layered-nav .filter-current .action.remove::after { transform: rotate(45deg); } .pxs-layered-nav .filter-actions { padding: 1.5rem 0 2.5rem; padding-bottom: 2.5rem; border-bottom: 0.1rem solid #eaeaea; } .pxs-layered-nav .search { margin-bottom: 1.5rem; } .pxs-layered-nav .actions { margin-top: 1.5rem; } .pxs-layered-nav .swatch-attribute-options { display: flex; flex-wrap: wrap; margin: 0 -0.4rem; } .pxs-layered-nav .swatch-option-link-layered:hover { text-decoration: none; } .pxs-layered-nav .swatch-option { margin: 0.4rem; height: 2.5rem; min-width: 2.5rem; font-size: 1.1rem; text-align: center; color: #222222; border: 0.1rem solid #f4f4f4; background: #f4f4f4; border-radius: 0.3rem; } .pxs-layered-nav .swatch-option:not(.disabled):not(.selected):not([disabled]):hover { box-shadow: 0 0 0 0.2rem #5b899a; } .pxs-layered-nav .swatch-option.selected { box-shadow: 0 0 0 0.2rem #5b899a; } .pxs-layered-nav .ui-slider-horizontal { margin: 2rem 0 3rem; height: 0.7rem; background-color: #f4f4f4; } .pxs-layered-nav .ui-slider-range { position: absolute; height: 0.7rem; background-color: #d7be7c; } .pxs-layered-nav .ui-slider-handle { top: -0.9rem; margin-left: 0; height: 2.5rem; width: 2.5rem; border-radius: 50%; box-shadow: 0 0.1rem 0.5rem 0 rgba(0, 0, 0, 0.15); background-color: #fff; } .pxs-layered-nav .ui-slider-handle:last-child { margin-left: -2.5rem; } .swatch-option-tooltip { position: absolute; padding: 0.5rem; line-height: 1.3rem; font-size: 1.1rem; background: #fff; border: 0.1rem solid #eaeaea; border-radius: 0.5rem; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); z-index: 999; } .pxs-load-more { display: flex; flex-direction: column; align-items: center; padding: 4rem 0 1.5rem; text-align: center; border-bottom: 1px solid #eaeaea; } @media (min-width: 48em) { .pxs-load-more { padding: 5.5rem 0 3rem; } } .toolbar-top .pxs-load-more { display: none; } .pxs-load-more__progress { position: relative; margin-bottom: 1rem; width: 20rem; height: 0.4rem; background-color: #f4f4f4; } .pxs-load-more__progress span { position: absolute; left: 0; top: 0; bottom: 0; background: #d7be7c; } .pxs-load-more__button { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; border: 1px solid #5b899a; margin-bottom: 3.5rem; } @media (max-width: 63.99em) { .pxs-load-more__button { font-size: 10px; } } .pxs-load-more__button * { fill: #5b899a; } .pxs-load-more__button, .pxs-load-more__button:visited { background-color: #fff; color: #222222; border: 1px solid #5b899a; } .pxs-load-more__button:hover, .pxs-load-more__button:focus, .pxs-load-more__button:active { transition: all 0.2s; background-color: #5b899a; color: #fff; } .pxs-load-more__button:hover *, .pxs-load-more__button:focus *, .pxs-load-more__button:active * { fill: #fff; } .pxs-load-more__button[disabled] { opacity: 0.65; cursor: auto; } @media (max-width: 47.99em) { .pxs-load-more__button { width: 100%; } } .pxs-load-more__button span { display: inline-block; padding-right: 3rem; } .pxs-load-more__button svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } @media (min-width: 64em) { .pxs-pdp__top { margin-bottom: 6rem; display: flex; justify-content: space-between; } } @media (min-width: 64em) { .pxs-pdp__gallery, .pxs-pdp__aside { width: calc(50% - 4.5rem); } } .pxs-pdp__gallery { position: relative; } .pxs-pdp__badges { display: flex; flex-direction: column; align-items: flex-start; position: absolute; left: -1rem; bottom: -1rem; } .pxs-pdp__badge + .pxs-pdp__badge { margin-top: 0.5rem; } .pxs-pdp__badge--sale { padding: 0.5rem 1rem; border-radius: 1.5rem; text-transform: uppercase; font-size: 0.8rem; line-height: 1.2rem; text-align: center; color: #fff; font-weight: 600; letter-spacing: 1px; background-color: #eb0000; } .pxs-pdp__badge--blue { padding: 0.5rem 1rem; border-radius: 1.5rem; text-transform: uppercase; font-size: 0.8rem; line-height: 1.2rem; text-align: center; color: #fff; font-weight: 600; letter-spacing: 1px; background-color: #3d7486; } .pxs-pdp__badge--green { padding: 0.5rem 1rem; border-radius: 1.5rem; text-transform: uppercase; font-size: 0.8rem; line-height: 1.2rem; text-align: center; color: #fff; font-weight: 600; letter-spacing: 1px; background-color: #79b99c; } @media (min-width: 64em) { .pxs-pdp__aside-top { display: flex; justify-content: space-between; align-items: center; } } .pxs-pdp__aside-top .page-title { padding-right: 4rem; padding-bottom: 0; margin-bottom: 0; font-size: 3.4rem; line-height: 3.8rem; text-align: left; } @media (max-width: 63.99em) { .pxs-pdp__aside-top .page-title { padding-bottom: 2rem; padding-right: 0; } } .pxs-pdp__aside-brand { width: 10.1rem; flex: 0 0 auto; } @media (max-width: 63.99em) { .pxs-pdp__aside-brand { display: none; } } .pxs-pdp__aside-short-desc { padding: 0.5rem 0 1rem; text-transform: uppercase; font-size: 1.2rem; line-height: 1.8rem; } @media (max-width: 63.99em) { .pxs-pdp__aside-short-desc { display: none; } } .pxs-pdp__aside-attributes { margin: 0; padding: 0; list-style: none; margin-bottom: 2rem; border-top: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4; } .pxs-pdp__aside-attributes li { margin-bottom: 0; padding: 0.5rem 1rem; font-weight: 300; } .pxs-pdp__aside-attributes li:nth-child(even) { background-color: #f4f4f4; } .pxs-pdp__aside-adtocart { margin-left: 2rem; min-width: 24rem; } @media (max-width: 47.99em) { .pxs-pdp__aside-adtocart { position: absolute; bottom: 0; left: 0; right: 0; margin-left: 0; } } @media (min-width: 64em) and (max-width: 79.99em) { .pxs-pdp__aside-adtocart { position: absolute; bottom: 0; left: 0; right: 0; margin-left: 0; } } .pxs-pdp__aside .swatch-option { margin: 0 0.5rem 0.5rem; padding: 0.3rem; height: 5.4rem !important; min-width: 5.4rem !important; background-size: 100% !important; border: 2px solid #c5c5c5; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; cursor: pointer; } .pxs-pdp__aside .swatch-option.selected { border-color: #5b899a; } .pxs-pdp__aside .field.configurable { margin: 2rem 0; } .pxs-pdp__aside div.mage-error { margin-top: 2px; position: relative; background-color: #eb0000; color: #fff; padding: 3px 8px; border-radius: 3px; } .pxs-pdp__aside div.mage-error:after { position: absolute; content: ''; left: 11px; top: -6px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 6px solid #eb0000; } .pxs-pdp__aside .options-list { margin: 0 0 2rem; } @media (max-width: 47.99em) { .pxs-pdp__aside .product-info-main { position: relative; padding-bottom: 7rem; } } .pxs-pdp__aside .box-tocart .fieldset { display: flex; justify-content: flex-end; } .pxs-pdp__aside .box-tocart .label { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .pxs-pdp__aside .price-label { display: none !important; } .pxs-pdp__aside .price-box .price { font-size: 3.4rem; font-weight: 300; line-height: 3.4rem; } .pxs-pdp__aside .product-options-wrapper > .fieldset > .field { margin-bottom: 2.5rem; } .pxs-pdp__aside .product-options-bottom { display: flex; justify-content: space-between; align-items: top; } @media (min-width: 64em) and (max-width: 79.99em) { .pxs-pdp__aside .product-options-bottom { position: relative; padding-bottom: 7rem; } } .pxs-pdp__aside .product-options-bottom .product-info-price { display: flex; align-items: baseline; flex-wrap: wrap; } .pxs-pdp__aside .action.primary { flex: 0 0 auto; position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #5b899a; color: #fff; width: 100%; } @media (max-width: 63.99em) { .pxs-pdp__aside .action.primary { font-size: 10px; } } .pxs-pdp__aside .action.primary * { fill: #fff; } .pxs-pdp__aside .action.primary, .pxs-pdp__aside .action.primary:visited { background-color: #5b899a; color: #fff; } .pxs-pdp__aside .action.primary:hover, .pxs-pdp__aside .action.primary:focus, .pxs-pdp__aside .action.primary:active { transition: all 0.2s; background-color: #25434e; color: #fff; } .pxs-pdp__aside .action.primary[disabled] { opacity: 0.65; cursor: auto; } .pxs-pdp__aside .action.primary span { display: inline-block; padding-right: 3rem; } .pxs-pdp__aside .action.primary svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } @media (min-width: 48em) { .pxs-pdp__aside .grouped td { padding: 1rem 0; border-bottom: 1px solid #eaeaea !important; vertical-align: middle; } } @media (max-width: 47.99em) { .pxs-pdp__aside .grouped tr { border-bottom: 1px solid #eaeaea; } } .pxs-pdp__aside .grouped th { padding-left: 0; } .pxs-pdp__aside .grouped th.qty { text-align: right; padding-right: 2rem; } .pxs-pdp__aside .grouped .col.item { width: 90%; } .pxs-pdp__aside .grouped .col.qty { width: 10%; } .pxs-pdp__aside .grouped .col.qty input { width: 6rem; } .pxs-pdp__aside .break { flex-basis: 100%; height: 0; } .pxs-pdp__details { /* code to accordions on mobile and tabs on desktop */ /* code to accordions on mobile and tabs on desktop */ } .pxs-pdp__details-nav { display: none; } @media (min-width: 64em) { .pxs-pdp__details-nav { display: flex; align-items: center; justify-content: center; padding: 2rem 0; } } .pxs-pdp__details-tab { font-size: 1.2rem; text-transform: uppercase; font-weight: 400; letter-spacing: 0.1rem; } @media (min-width: 64em) { .pxs-pdp__details-tab + .pxs-pdp__details-tab { margin-left: 2.5rem; } } .pxs-pdp__details-tab a { color: #222222; } .pxs-pdp__details-tab a, .pxs-pdp__details-tab a:visited { color: #222222; } .pxs-pdp__details-tab a:hover, .pxs-pdp__details-tab a:focus, .pxs-pdp__details-tab a:active { text-decoration: none; color: #d7be7c; } .pxs-pdp__details-tab.active { position: relative; } .pxs-pdp__details-tab.active::after { position: absolute; background: #d7be7c; content: ''; height: 0.2rem; left: -0.2rem; right: -0.2rem; bottom: -2rem; } .pxs-pdp__details-headline { position: relative; padding: 1rem 0; border-bottom: 0.1rem solid #eaeaea; font-size: 1.2rem; text-transform: uppercase; font-weight: 400; letter-spacing: 0.1rem; } @media (min-width: 64em) { .pxs-pdp__details-headline { display: none; } } .pxs-pdp__details-headline::before, .pxs-pdp__details-headline::after { position: absolute; top: 50%; transform: translateY(-50%); display: block; content: ''; background-color: #5b899a; transition: all 0.2s; } .pxs-pdp__details-headline::before, .pxs-pdp__details-headline::after { right: 0; width: 1.1rem; height: 0.1rem; } .pxs-pdp__details-headline::after { transform: rotate(90deg); } .pxs-pdp__details-headline.active::after { transform: rotate(0deg); opacity: 0; } .pxs-pdp__details-title { display: none; } @media (min-width: 64em) { .pxs-pdp__details-title { display: block; padding-bottom: 2rem; font-size: 2.4rem; text-transform: uppercase; border-bottom: 1px solid #eaeaea; } } .pxs-pdp__details-content { padding: 3rem 0; font-weight: 300; max-width: 87rem; margin: 0 auto; } @media (min-width: 64em) { .pxs-pdp__details-content { display: block !important; } } .pxs-pdp__details-content h1, .pxs-pdp__details-content h2, .pxs-pdp__details-content h3 { padding-bottom: 1.5rem; border-bottom: 1px solid #eaeaea; text-transform: uppercase; } .pxs-pdp__details-content h1 { font-size: 2.4rem; } .pxs-pdp__details-content h2 { font-size: 2rem; } .pxs-pdp__details-content h3 { font-size: 1.5rem; } .pxs-pdp__details-content strong { font-weight: 400; } .pxs-pdp__details-content .content.additional tr { padding: 0.5rem 1rem; font-weight: 300; } .pxs-pdp__details-content .content.additional tr:nth-child(even) { background-color: #f4f4f4; } .pxs-pdp__details-content .content.description table th { font-weight: normal; background-color: #f4f4f4; } .pxs-pdp__details-content .content.description table th strong { font-weight: 600; } .pxs-pdp__details-content .content.description table td { border-top: 1px solid #f4f4f4; } .pxs-pdp__details-content p + h1, .pxs-pdp__details-content p + h2, .pxs-pdp__details-content p + h3, .pxs-pdp__details-content ul + h1, .pxs-pdp__details-content ul + h2, .pxs-pdp__details-content ul + h3 { margin-top: 3rem; } .pxs-pdp__details-content p { margin-bottom: 1.5rem; } .pxs-pdp__details-content ul { margin: 0; padding: 0; list-style: none; list-style-type: initial; } .pxs-pdp__details-content ol, .pxs-pdp__details-content ul { margin-left: 2rem; margin-bottom: 1rem; } .pxs-pdp__details-content ol > li, .pxs-pdp__details-content ul > li { margin: 0; } @media (max-width: 63.99em) { .pxs-pdp__details .data.item.content { display: block !important; } } @media (max-width: 63.99em) { .pxs-pdp__gallery { margin-bottom: 2rem; } } .pxs-pdp__gallery .fotorama__dot { width: 1.2rem; height: 1.2rem; background-color: #eaeaea; border: none; } .pxs-pdp__gallery .fotorama__active .fotorama__dot { background-color: #d7be7c; } .pxs-pdp__gallery .skip.gallery-next-area, .pxs-pdp__gallery .skip.gallery-prev-area { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .swatch-attribute { margin-top: 1rem; margin-bottom: 2.5rem; } .swatch-attribute-options { display: flex; flex-wrap: wrap; margin: 0 -0.5rem; } .swatch-attribute-options:focus { box-shadow: none; outline: none; } .swatch-attribute-label { margin-right: 0.5rem; font-weight: 300; } .swatch-attribute-label:after { content: ':'; } .swatch-attribute-selected-option { font-weight: 400; } .swatch-input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; left: -1000px; position: absolute; visibility: hidden; } .swatch-select { display: block; padding: 1.5rem 3rem 1.5rem 1.5rem; font-size: 14px; font-family: "Montserrat", sans-serif; color: #9f9f9f; border: 1px solid #eaeaea; border-radius: 6px; background-color: #fff; width: 100%; max-width: 80rem; outline: none; -moz-appearance: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat, repeat; background-position: right 0.8rem top 52%, 0 0; background-size: 1.5rem auto; box-shadow: none; transition: all 0.2s; margin-left: 0.5rem; margin-right: 0.5rem; } .swatch-select:hover:not([disabled]), .swatch-select:focus:not([disabled]) { border: 1px solid #9f9f9f; box-shadow: none; } .swatch-select[disabled] { opacity: 0.5; } .pxs-cart { padding: 2.5rem 0; } @media (min-width: 64em) { .pxs-cart { padding: 4.5rem 0; } } .pxs-cart .cart-container { display: flex; flex-wrap: wrap; justify-content: space-between; } .pxs-cart .action.clear { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .pxs-cart .action.multicheckout, .pxs-cart .gift-options-cart-item { display: none; } @media (max-width: 63.99em) { .pxs-cart__aside { flex: 1 1 auto; } } @media (min-width: 64em) { .pxs-cart__aside { width: calc(30% - 1rem); } } @media (max-width: 63.99em) { .pxs-cart__main { flex: 1 1 auto; } } @media (min-width: 64em) { .pxs-cart__main { width: calc(70% - 5rem); } } .pxs-cart__main thead { display: none; } .pxs-cart__main .page-title { margin-bottom: 0; padding-bottom: 2.5rem; border-bottom: 1px solid #eaeaea; } @media (min-width: 64em) { .pxs-cart__main .page-title { text-align: left; padding-bottom: 3rem; } } .pxs-cart .pxs-separator { display: none; } @media (min-width: 64em) { .pxs-cart .pxs-separator { display: block; margin: 2.5rem 0 1.5rem; } } @media (min-width: 48em) { .pxs-cart__aside .cart-summary { padding: 3rem; border: 1px solid #eaeaea; } } .pxs-cart__aside .summary.title { display: none; } @media (min-width: 48em) { .pxs-cart__aside .summary.title { display: block; margin-bottom: 2.5rem; font-weight: 300; font-size: 1.8rem; } } .pxs-cart__aside .block.shipping { display: none; } @media (min-width: 48em) { .pxs-cart__aside tr + tr { border-top: 1px solid #eaeaea; } } .pxs-cart__aside th, .pxs-cart__aside td { padding: 1rem 0; } @media (min-width: 48em) { .pxs-cart__aside th, .pxs-cart__aside td { padding: 0.5rem 0; } } .pxs-cart__aside th { font-weight: 300; } .pxs-cart__aside th strong { font-weight: 300; } .pxs-cart__aside td { text-align: right; } .pxs-cart__aside .table-wrapper { margin-bottom: 0; } .pxs-cart__aside .grand.totals { border-top: 1px solid #eaeaea; } .pxs-cart__aside .grand.totals th, .pxs-cart__aside .grand.totals td { padding: 2rem 0; } .pxs-cart__aside .grand.totals td strong { font-weight: 300; font-size: 2.5rem; } .pxs-cart__aside .items { margin: 0; padding: 0; list-style: none; } .pxs-cart__aside .action.primary { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #5b899a; color: #fff; width: 100%; font-size: 1.2rem; } @media (max-width: 63.99em) { .pxs-cart__aside .action.primary { font-size: 10px; } } .pxs-cart__aside .action.primary * { fill: #fff; } .pxs-cart__aside .action.primary, .pxs-cart__aside .action.primary:visited { background-color: #5b899a; color: #fff; } .pxs-cart__aside .action.primary:hover, .pxs-cart__aside .action.primary:focus, .pxs-cart__aside .action.primary:active { transition: all 0.2s; background-color: #25434e; color: #fff; } .pxs-cart__aside .action.primary[disabled] { opacity: 0.65; cursor: auto; } @media (max-width: 47.99em) { .pxs-cart__aside .action.primary { border-radius: unset; } } .pxs-cart__aside .action.primary span { display: inline-block; padding-right: 3rem; font-size: 1.2rem; } .pxs-cart__aside .action.primary svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } @media (min-width: 30em) { .pxs-cart__aside-action-top { display: none; } } @media (max-width: 29.99em) { .pxs-cart__aside-button-wrapper { margin-left: -1.5rem; margin-right: -1.5rem; } } .pxs-cart__aside-continue { width: 100%; position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; font-size: 1.2rem; } @media (max-width: 63.99em) { .pxs-cart__aside-continue { font-size: 10px; } } .pxs-cart__aside-continue * { fill: #5b899a; } .pxs-cart__aside-continue, .pxs-cart__aside-continue:visited { background-color: #fff; color: #222222; } .pxs-cart__aside-continue:hover, .pxs-cart__aside-continue:focus, .pxs-cart__aside-continue:active { transition: all 0.2s; background-color: #eaeaea; color: #222222; } .pxs-cart__aside-continue[disabled] { opacity: 0.65; cursor: auto; } .pxs-cart__aside-continue span { display: inline-block; padding-left: 3rem; font-size: 1.2rem; } .pxs-cart__aside-continue svg { transform: rotate(180deg); position: absolute; top: 50%; transform: translateY(-50%); left: 1rem; max-width: 1.8rem; max-height: 1.8rem; } .pxs-cart__item { padding: 3rem 0; border-bottom: 1px solid #eaeaea; font-size: 1.2rem; } @media (min-width: 48em) { .pxs-cart__item { font-size: 1.4rem; } } @media (max-width: 63.99em) { .pxs-cart__item:last-child { border-bottom: none; } } .pxs-cart__item .field.qty { position: relative; } .pxs-cart__item .action.update { color: #5b899a; transition: all 0.2s; position: absolute; bottom: -2rem; left: 0; right: 0; cursor: pointer; font-size: 1.2rem; text-align: center; background: none; border: none; } .pxs-cart__item .action.update, .pxs-cart__item .action.update:visited { color: #5b899a; } .pxs-cart__item .action.update:hover, .pxs-cart__item .action.update:focus, .pxs-cart__item .action.update:active { color: #d7be7c; text-decoration: none; background: none; } .pxs-cart__item .action-towishlist { display: none; } .pxs-cart__item .action-delete { margin-right: 2rem; } .pxs-cart__item .action-delete svg { width: 1rem; height: 1rem; fill: #5b899a; } @media (min-width: 48em) { .pxs-cart__item .action-delete svg { width: 1.2rem; height: 1.2rem; fill: #c5c5c5; } } .pxs-cart__item .action-edit { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .pxs-cart__item .product-item-name a { display: block; font-size: 1.4rem; line-height: 2rem; font-weight: 300; color: #222222; } @media (min-width: 48em) { .pxs-cart__item .product-item-name a { font-size: 1.8rem; line-height: 2.4rem; } } .pxs-cart__item .product-item-details { display: flex; align-items: center; justify-content: space-between; } .pxs-cart__item .product-item-photo { margin-right: 2rem; } @media (min-width: 48em) { .pxs-cart__item .product-item-photo { margin-right: 5rem; } } .pxs-cart__item .col { vertical-align: middle; } @media (max-width: 47.99em) { .pxs-cart__item .col { display: block; } } @media (max-width: 47.99em) { .pxs-cart__item .col.price, .pxs-cart__item .col.qty, .pxs-cart__item .col.subtotal { display: inline-block; padding-bottom: 3rem; } } .pxs-cart__item .col.subtotal { text-align: right; } .pxs-cart__item .item-options { margin-bottom: 0; } .pxs-cart__item .item-options dt { color: #9f9f9f; font-weight: 300; } .pxs-cart__item .item-options dd { color: #363636; } .pxs-cart__item .item-options dd, .pxs-cart__item .item-options dt { display: inline-block; margin-bottom: 0; line-height: 2rem; } .pxs-cart__item .price { font-size: 1.4rem; font-weight: 400; } .pxs-cart__item-options-wrapper { margin-top: 0.5rem; } .pxs-cart__item-content { flex: 1 1 auto; } @media (max-width: 47.99em) { .pxs-cart__item-content { margin-right: 2rem; } } .pxs-cart__main .actions { display: flex; align-items: center; transition: all 0.2s; float: left; } @media (max-width: 63.99em) { .pxs-cart__main .actions { display: none; } } .pxs-cart__main .actions:hover svg { fill: #d7be7c; } .pxs-cart__main .actions svg { width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; fill: #5b899a; } .pxs-cart__main .actions .continue { font-size: 1.2rem; color: inherit; text-transform: uppercase; } .pxs-cart__main .discount { display: none; cursor: pointer; } @media (min-width: 64em) { .pxs-cart__main .discount { display: block; float: right; font-size: 1.2rem; font-weight: 400; text-transform: uppercase; text-align: right; } } .pxs-cart__main .discount .label { display: none; } .pxs-cart__main .discount .title { display: flex; align-items: center; justify-content: flex-end; } .pxs-cart__main .discount svg { width: 2.5rem; height: 2.5rem; margin-right: 1rem; } .pxs-cart__main .discount .control { margin: 1rem 0; } .pxs-cart__main .discount .action.primary { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; border: 1px solid #5b899a; } @media (max-width: 63.99em) { .pxs-cart__main .discount .action.primary { font-size: 10px; } } .pxs-cart__main .discount .action.primary * { fill: #5b899a; } .pxs-cart__main .discount .action.primary, .pxs-cart__main .discount .action.primary:visited { background-color: #fff; color: #222222; border: 1px solid #5b899a; } .pxs-cart__main .discount .action.primary:hover, .pxs-cart__main .discount .action.primary:focus, .pxs-cart__main .discount .action.primary:active { transition: all 0.2s; background-color: #5b899a; color: #fff; } .pxs-cart__main .discount .action.primary:hover *, .pxs-cart__main .discount .action.primary:focus *, .pxs-cart__main .discount .action.primary:active * { fill: #fff; } .pxs-cart__main .discount .action.primary[disabled] { opacity: 0.65; cursor: auto; } @media (min-width: 64em) { .pxs-checkout .checkout-container { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; } } @media (min-width: 64em) { .pxs-checkout .opc-wrapper { width: calc(55% - 3rem); } } @media (min-width: 64em) { .pxs-checkout .opc-sidebar { width: calc(45% - 1rem); } } .pxs-checkout .opc-sidebar .action-close { display: none; } .pxs-checkout .opc-progress-bar { display: none; } .pxs-checkout .messages { width: 100%; } .pxs-checkout .action.primary { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #5b899a; color: #fff; } @media (max-width: 63.99em) { .pxs-checkout .action.primary { font-size: 10px; } } .pxs-checkout .action.primary * { fill: #fff; } .pxs-checkout .action.primary, .pxs-checkout .action.primary:visited { background-color: #5b899a; color: #fff; } .pxs-checkout .action.primary:hover, .pxs-checkout .action.primary:focus, .pxs-checkout .action.primary:active { transition: all 0.2s; background-color: #25434e; color: #fff; } .pxs-checkout .action.primary[disabled] { opacity: 0.65; cursor: auto; } .pxs-checkout .action-edit, .pxs-checkout .action-update, .pxs-checkout .action-cancel { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; border: 1px solid #5b899a; padding: 1rem 1.5rem; } @media (max-width: 63.99em) { .pxs-checkout .action-edit, .pxs-checkout .action-update, .pxs-checkout .action-cancel { font-size: 10px; } } .pxs-checkout .action-edit *, .pxs-checkout .action-update *, .pxs-checkout .action-cancel * { fill: #5b899a; } .pxs-checkout .action-edit, .pxs-checkout .action-edit:visited, .pxs-checkout .action-update, .pxs-checkout .action-update:visited, .pxs-checkout .action-cancel, .pxs-checkout .action-cancel:visited { background-color: #fff; color: #222222; border: 1px solid #5b899a; } .pxs-checkout .action-edit:hover, .pxs-checkout .action-edit:focus, .pxs-checkout .action-edit:active, .pxs-checkout .action-update:hover, .pxs-checkout .action-update:focus, .pxs-checkout .action-update:active, .pxs-checkout .action-cancel:hover, .pxs-checkout .action-cancel:focus, .pxs-checkout .action-cancel:active { transition: all 0.2s; background-color: #5b899a; color: #fff; } .pxs-checkout .action-edit:hover *, .pxs-checkout .action-edit:focus *, .pxs-checkout .action-edit:active *, .pxs-checkout .action-update:hover *, .pxs-checkout .action-update:focus *, .pxs-checkout .action-update:active *, .pxs-checkout .action-cancel:hover *, .pxs-checkout .action-cancel:focus *, .pxs-checkout .action-cancel:active * { fill: #fff; } .pxs-checkout .action-edit[disabled], .pxs-checkout .action-update[disabled], .pxs-checkout .action-cancel[disabled] { opacity: 0.65; cursor: auto; } .pxs-checkout .discount-code { display: none; padding: 3rem; border: 1px solid #eaeaea; border-top: none; } @media (min-width: 64em) { .pxs-checkout .discount-code { display: block; font-size: 1.2rem; font-weight: 400; text-transform: uppercase; } } .pxs-checkout .discount-code .title { display: flex; align-items: center; } .pxs-checkout .discount-code .control { margin: 1rem 0; } .pxs-checkout .discount-code .action-apply { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; border: 1px solid #5b899a; } @media (max-width: 63.99em) { .pxs-checkout .discount-code .action-apply { font-size: 10px; } } .pxs-checkout .discount-code .action-apply * { fill: #5b899a; } .pxs-checkout .discount-code .action-apply, .pxs-checkout .discount-code .action-apply:visited { background-color: #fff; color: #222222; border: 1px solid #5b899a; } .pxs-checkout .discount-code .action-apply:hover, .pxs-checkout .discount-code .action-apply:focus, .pxs-checkout .discount-code .action-apply:active { transition: all 0.2s; background-color: #5b899a; color: #fff; } .pxs-checkout .discount-code .action-apply:hover *, .pxs-checkout .discount-code .action-apply:focus *, .pxs-checkout .discount-code .action-apply:active * { fill: #fff; } .pxs-checkout .discount-code .action-apply[disabled] { opacity: 0.65; cursor: auto; } .pxs-checkout .table-totals th { padding: 0.5rem 3rem; font-weight: 300; } .pxs-checkout .checkout-payment-method .legend { display: none; } .pxs-checkout .shipping-information, .pxs-checkout .payment-method { border: 1px solid #eaeaea; padding: 3rem; } .pxs-checkout .payment-method .payment-method-title label { text-transform: uppercase; margin-bottom: 2rem; } .pxs-checkout .payment-method .checkout-billing-address input[type='checkbox'] { display: inline-block; margin: 0 1rem 0 0; height: 2rem; width: 2rem; cursor: pointer; outline: none; border: 1px solid #eaeaea; background-color: #fff; border-radius: 50%; transition: all 0.2s; background-position: 50% 50%; background-size: 1rem 1rem; background-repeat: no-repeat; background-color: #fff; -moz-appearance: none; appearance: none; -webkit-appearance: none; box-shadow: none; flex: 0 0 auto; border-radius: 6px; background-size: 1rem 1rem; margin-right: 1.5rem; flex: 0 0 auto; } .pxs-checkout .payment-method .checkout-billing-address input[type='checkbox']:hover, .pxs-checkout .payment-method .checkout-billing-address input[type='checkbox']:focus { border-color: #9f9f9f; box-shadow: none; } .pxs-checkout .payment-method .checkout-billing-address input[type='checkbox']:checked { border: 1px solid #5b899a; background-image: url("data:image/svg+xml;utf8, "); } .pxs-checkout .payment-method .checkout-billing-address input[type='checkbox']:checked, .pxs-checkout .payment-method .checkout-billing-address input[type='checkbox']:checked:hover, .pxs-checkout .payment-method .checkout-billing-address input[type='checkbox']:checked:focus { border: 1px solid #5b899a; } .pxs-checkout .payment-method .checkout-billing-address input[type='checkbox'][disabled] { opacity: 0.5; } .pxs-checkout .payment-method .checkout-billing-address input[type='checkbox']:checked { background-image: url("data:image/svg+xml;utf8, "); } .pxs-checkout .payment-method .checkout-billing-address .actions-toolbar .primary { display: flex; justify-content: space-between; padding-bottom: 2rem; margin-bottom: 2rem; width: 100%; border-bottom: 1px solid #eaeaea; } .pxs-checkout .payment-method .billing-address-details { margin: 2rem 0; } .pxs-checkout .field-tooltip .label { display: none; } .pxs-checkout .shipping-information .ship-to { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid #eaeaea; } .pxs-checkout .shipping-information-title { display: flex; justify-content: space-between; align-items: center; } .pxs-checkout .field-tooltip, .pxs-checkout .note { display: block; margin: 1rem 0; font-size: 1.2rem; line-height: 1.8rem; color: #9f9f9f; } .pxs-checkout__progress-bar { position: absolute; top: 2rem; left: 0; right: 0; } @media (min-width: 48em) { .pxs-checkout__progress-bar { right: 0; top: 0; } } @media (min-width: 64em) { .pxs-checkout__progress-bar { top: -7.5rem; } } .pxs-checkout__columns-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4rem; } @media (max-width: 47.99em) { .pxs-checkout__columns-top { flex-wrap: wrap; justify-content: center; margin-bottom: 2rem; padding-top: 7rem; } } @media (max-width: 47.99em) { .pxs-checkout__columns-top .page-title-wrapper { order: 2; text-align: center; margin: 3rem 0 0; width: 100%; } } .pxs-checkout__columns-top .page-title-wrapper .page-title { margin-bottom: 0; } @media (min-width: 48em) { .checkout-index-index .page-header { text-align: center; margin-bottom: 4rem; border-bottom: 1px solid #eaeaea; } } .pxs-checkout .opc { margin: 0; padding: 0; list-style: none; } .pxs-checkout .label { margin-bottom: 0.5rem; } @media (max-width: 47.99em) { .pxs-checkout .label { font-size: 1rem; } } .pxs-checkout .field-tooltip-content { font-size: 1.3rem; } .pxs-checkout .checkout-shipping-address { margin-bottom: 1rem; padding-bottom: 2.5rem; border-bottom: 1px solid #eaeaea; } @media (min-width: 48em) { .pxs-checkout .checkout-shipping-address { padding: 0 3rem 3rem; border: 1px solid #eaeaea; } } .pxs-checkout .checkout-shipping-address .step-title { display: none; } .pxs-checkout .checkout-shipping-address .addresses { padding: 3rem 0 2rem 0; } .pxs-checkout .checkout-shipping-address .action-show-popup { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; border: 1px solid #5b899a; } @media (max-width: 63.99em) { .pxs-checkout .checkout-shipping-address .action-show-popup { font-size: 10px; } } .pxs-checkout .checkout-shipping-address .action-show-popup * { fill: #5b899a; } .pxs-checkout .checkout-shipping-address .action-show-popup, .pxs-checkout .checkout-shipping-address .action-show-popup:visited { background-color: #fff; color: #222222; border: 1px solid #5b899a; } .pxs-checkout .checkout-shipping-address .action-show-popup:hover, .pxs-checkout .checkout-shipping-address .action-show-popup:focus, .pxs-checkout .checkout-shipping-address .action-show-popup:active { transition: all 0.2s; background-color: #5b899a; color: #fff; } .pxs-checkout .checkout-shipping-address .action-show-popup:hover *, .pxs-checkout .checkout-shipping-address .action-show-popup:focus *, .pxs-checkout .checkout-shipping-address .action-show-popup:active * { fill: #fff; } .pxs-checkout .checkout-shipping-address .action-show-popup[disabled] { opacity: 0.65; cursor: auto; } .pxs-checkout .step-title { padding: 2rem 0; border-bottom: none; font-size: 1.8rem; } @media (min-width: 48em) { .pxs-checkout .step-title { padding: 3rem; border: 1px solid #eaeaea; border-bottom: none; } } .pxs-checkout .form-login { margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid #eaeaea; } .pxs-checkout .form-login .actions-toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; } @media (min-width: 48em) { .pxs-checkout .form-shipping-address .field[name*=firstname], .pxs-checkout .form-shipping-address .field[name*=lastname], .pxs-checkout .form-shipping-address .field[name*=postcode], .pxs-checkout .form-shipping-address .field[name*=city] { display: inline-block; } } @media (min-width: 48em) { .pxs-checkout .form-shipping-address .field[name*=firstname], .pxs-checkout .form-shipping-address .field[name*=lastname] { width: calc(50% - 0.5rem); } } @media (min-width: 48em) { .pxs-checkout .form-shipping-address .field[name*=lastname] { padding-left: 1rem; float: right; margin-top: 0; } } @media (min-width: 48em) { .pxs-checkout .form-shipping-address .field[name*=postcode] { width: 30%; } } @media (min-width: 48em) { .pxs-checkout .form-shipping-address .field[name*=city] { float: right; padding-left: 15px; width: 70%; } } @media (min-width: 48em) { .pxs-checkout .table-checkout-shipping-method { padding: 0 3rem 3rem; border: 1px solid #eaeaea; } } .pxs-checkout .table-checkout-shipping-method .actions-toolbar { display: none; } .pxs-checkout .table-checkout-shipping-method thead { display: none; } .pxs-checkout .table-checkout-shipping-method .radio { display: inline-block; margin: 0 1rem 0 0; height: 2rem; width: 2rem; cursor: pointer; outline: none; border: 1px solid #eaeaea; background-color: #fff; border-radius: 50%; transition: all 0.2s; background-position: 50% 50%; background-size: 1rem 1rem; background-repeat: no-repeat; background-color: #fff; -moz-appearance: none; appearance: none; -webkit-appearance: none; box-shadow: none; flex: 0 0 auto; } .pxs-checkout .table-checkout-shipping-method .radio:hover, .pxs-checkout .table-checkout-shipping-method .radio:focus { border-color: #9f9f9f; box-shadow: none; } .pxs-checkout .table-checkout-shipping-method .radio:checked { border: 1px solid #5b899a; background-image: url("data:image/svg+xml;utf8, "); } .pxs-checkout .table-checkout-shipping-method .radio:checked, .pxs-checkout .table-checkout-shipping-method .radio:checked:hover, .pxs-checkout .table-checkout-shipping-method .radio:checked:focus { border: 1px solid #5b899a; } .pxs-checkout .table-checkout-shipping-method .radio[disabled] { opacity: 0.5; } .pxs-checkout .table-checkout-shipping-method .row { display: flex; align-items: center; padding: 1rem 3rem; } .pxs-checkout .table-checkout-shipping-method .row:first-child { padding-top: 2rem; } @media (max-width: 47.99em) { .pxs-checkout .table-checkout-shipping-method .row + .row { border-top: 1px solid #eaeaea; } } .pxs-checkout .table-checkout-shipping-method td { padding: 0; } .pxs-checkout .table-checkout-shipping-method .col-method { display: flex; align-items: center; flex: 0 0 auto; } .pxs-checkout .table-checkout-shipping-method .col-method input { margin-right: 2rem; } .pxs-checkout .table-checkout-shipping-method .col-carrier { display: none; } .pxs-checkout .table-checkout-shipping-method .col-price { flex: 1 1 auto; order: 2; text-align: right; } .pxs-checkout .methods-shipping .actions-toolbar { display: none; } .pxs-checkout__tabs { display: flex; margin: 0 -1.5rem 2rem -1.5rem; } @media (min-width: 48em) { .pxs-checkout__tabs { margin: 0 -3rem 2rem -3rem; } } .pxs-checkout__tabs-item { padding: 3rem; width: 50%; background-color: #f4f4f4; font-size: 1.8rem; cursor: pointer; } @media (max-width: 47.99em) { .pxs-checkout__tabs-item { padding: 2rem; font-size: 1.4rem; border-top: 1px solid #eaeaea; } } .pxs-checkout__tabs-item--active { background-color: #fff; } .pxs-checkout .opc-block-summary { position: relative; border: 1px solid #eaeaea; } .pxs-checkout .opc-block-summary .action-close { display: none; } .pxs-checkout .opc-block-summary .title { font-size: 1.8rem; padding: 3rem; display: block; } .pxs-checkout .opc-block-summary .items-in-cart { margin-bottom: 0; } .pxs-checkout .opc-block-summary .items-in-cart .title { position: absolute; right: 3rem; top: 0; padding: 3rem 0; } .pxs-checkout .opc-block-summary .items-in-cart .title strong { font-size: 1.4rem; font-weight: 400; } .pxs-checkout .custom-slide ._show .items-in-cart .title { display: none; } .pxs-checkout .product-item { border-top: 1px solid #eaeaea; } .pxs-checkout .product-item .product { padding: 2.5rem 3.5rem; } .pxs-checkout .product-item .product-item-name { font-size: 1.4rem; font-weight: 400; } .pxs-checkout .product-item .product-image-wrapper { height: auto; } .pxs-checkout .product-item .product-image-container { margin-right: 3rem; flex: 0 0 auto; } .pxs-checkout .product-item .product-item-inner, .pxs-checkout .product-item .product { display: flex; align-items: center; justify-content: space-between; } .pxs-checkout .product-item .product-item-details { flex: 1 1 auto; } .pxs-checkout .product-item .cart-price .price { font-size: 1.4rem; font-weight: 400; } .pxs-checkout .minicart-items { margin: 0; padding: 0; list-style: none; } .pxs-checkout__button { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #5b899a; color: #fff; width: 100%; } .pxs-checkout__button-wrapper { padding: 2.5rem 3.5rem; border-top: 1px solid #eaeaea; } @media (max-width: 63.99em) { .pxs-checkout__button { font-size: 10px; } } .pxs-checkout__button * { fill: #fff; } .pxs-checkout__button, .pxs-checkout__button:visited { background-color: #5b899a; color: #fff; } .pxs-checkout__button:hover, .pxs-checkout__button:focus, .pxs-checkout__button:active { transition: all 0.2s; background-color: #25434e; color: #fff; } .pxs-checkout__button[disabled] { opacity: 0.65; cursor: auto; } .pxs-checkout__button span { display: inline-block; padding-right: 3rem; } .pxs-checkout__button svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } .pxs-checkout__options-group { display: flex; align-items: center; margin-bottom: 0; } .pxs-checkout__options-label, .pxs-checkout__options-value { margin-bottom: 0; font-size: 1.2rem; line-height: 1.6rem; font-weight: 400; } .pxs-checkout__options-label { margin-right: 0.5rem; color: #9f9f9f; } .pxs-checkout__payment-methods { margin: 0 3.5rem 3rem; color: #9f9f9f; } @media (min-width: 48em) { .pxs-checkout__payment-methods { display: flex; align-items: center; justify-content: space-between; } } .pxs-checkout__payment-methods img { max-width: 18rem; } @media (max-width: 47.99em) { .pxs-checkout__payment-methods img { margin-top: 1rem; } } .pxs-checkout__estimated { background: #f4f4f4; border-top: 1px solid #eaeaea; padding: 3.5rem 1.5rem; border-top: 1px solid #eaeaea; margin-left: -1.5rem; margin-right: -1.5rem; } @media (min-width: 48em) { .pxs-checkout__estimated { display: none; } } .pxs-checkout__estimated .estimated-block { display: none; } .pxs-checkout__estimated-icon { position: relative; display: inline-block; margin-right: 2rem; } .pxs-checkout__estimated-icon svg { width: 3.5rem; height: 2.5rem; fill: #5b899a; } .pxs-checkout__estimated-qty { position: absolute; right: -0.8rem; top: -0.7rem; display: block; min-width: 1.7rem; height: 1.7rem; line-height: 1.3rem; font-size: 9px; text-align: center; color: #fff; border: 2px solid #fff; background: #d7be7c; border-radius: 1.7rem; } .pxs-checkout__estimated-button { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; border: 1px solid #5b899a; width: 100%; display: flex; justify-content: center; align-items: center; padding: 1rem 0; } @media (max-width: 63.99em) { .pxs-checkout__estimated-button { font-size: 10px; } } .pxs-checkout__estimated-button * { fill: #5b899a; } .pxs-checkout__estimated-button, .pxs-checkout__estimated-button:visited { background-color: #fff; color: #222222; border: 1px solid #5b899a; } .pxs-checkout__estimated-button:hover, .pxs-checkout__estimated-button:focus, .pxs-checkout__estimated-button:active { transition: all 0.2s; background-color: #5b899a; color: #fff; } .pxs-checkout__estimated-button:hover *, .pxs-checkout__estimated-button:focus *, .pxs-checkout__estimated-button:active * { fill: #fff; } .pxs-checkout__estimated-button[disabled] { opacity: 0.65; cursor: auto; } .pxs-checkout__estimated-payment { display: flex; align-items: center; justify-content: space-between; margin: 2.5rem 0 3rem; color: #9f9f9f; font-size: 1.2rem; } @media (min-width: 48em) { .pxs-checkout__estimated-payment { display: flex; align-items: center; justify-content: space-between; } } .pxs-checkout__estimated-payment img { max-width: 18rem; margin-left: 1rem; } .pxs-404 { padding: 6rem 0 5rem; text-align: center; font-weight: 300; } @media (min-width: 48em) { .pxs-404 { padding: 12rem 0 5rem; } } .pxs-404__picture { display: block; margin-bottom: 4rem; } .pxs-404__text { margin-bottom: 2rem; } .pxs-404__button { font-weight: 400; position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #5b899a; color: #fff; } @media (max-width: 47.99em) { .pxs-404__button { display: block; } } @media (max-width: 63.99em) { .pxs-404__button { font-size: 10px; } } .pxs-404__button * { fill: #fff; } .pxs-404__button, .pxs-404__button:visited { background-color: #5b899a; color: #fff; } .pxs-404__button:hover, .pxs-404__button:focus, .pxs-404__button:active { transition: all 0.2s; background-color: #25434e; color: #fff; } .pxs-404__button[disabled] { opacity: 0.65; cursor: auto; } .pxs-404__button-span { display: inline-block; padding-right: 3rem; } .pxs-404__button svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } .pxs-userarea { padding: 2.5rem 0; font-weight: 300; } @media (min-width: 48em) { .pxs-userarea { padding: 4.5rem 0; } } .pxs-userarea .action.primary { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #5b899a; color: #fff; } @media (max-width: 63.99em) { .pxs-userarea .action.primary { font-size: 10px; } } .pxs-userarea .action.primary * { fill: #fff; } .pxs-userarea .action.primary, .pxs-userarea .action.primary:visited { background-color: #5b899a; color: #fff; } .pxs-userarea .action.primary:hover, .pxs-userarea .action.primary:focus, .pxs-userarea .action.primary:active { transition: all 0.2s; background-color: #25434e; color: #fff; } .pxs-userarea .action.primary[disabled] { opacity: 0.65; cursor: auto; } .pxs-userarea .actions-toolbar { margin-top: 2.5rem; } .pxs-userarea__login { max-width: 47rem; margin: 0 auto; padding-top: 0.5rem; color: #9f9f9f; font-size: 1.2rem; line-height: 1.6rem; } .pxs-userarea__login .block-customer-login { margin-bottom: 3rem; } .pxs-userarea__login .tooltip { display: block; margin-top: 1rem; } .pxs-userarea__login .action.primary { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #5b899a; color: #fff; width: 100%; } @media (max-width: 63.99em) { .pxs-userarea__login .action.primary { font-size: 10px; } } .pxs-userarea__login .action.primary * { fill: #fff; } .pxs-userarea__login .action.primary, .pxs-userarea__login .action.primary:visited { background-color: #5b899a; color: #fff; } .pxs-userarea__login .action.primary:hover, .pxs-userarea__login .action.primary:focus, .pxs-userarea__login .action.primary:active { transition: all 0.2s; background-color: #25434e; color: #fff; } .pxs-userarea__login .action.primary[disabled] { opacity: 0.65; cursor: auto; } .pxs-userarea__login .action.primary span { display: inline-block; padding-right: 3rem; } .pxs-userarea__login .action.primary svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } .pxs-userarea__login .action.create { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; border: 1px solid #5b899a; width: 100%; } @media (max-width: 63.99em) { .pxs-userarea__login .action.create { font-size: 10px; } } .pxs-userarea__login .action.create * { fill: #5b899a; } .pxs-userarea__login .action.create, .pxs-userarea__login .action.create:visited { background-color: #fff; color: #222222; border: 1px solid #5b899a; } .pxs-userarea__login .action.create:hover, .pxs-userarea__login .action.create:focus, .pxs-userarea__login .action.create:active { transition: all 0.2s; background-color: #5b899a; color: #fff; } .pxs-userarea__login .action.create:hover *, .pxs-userarea__login .action.create:focus *, .pxs-userarea__login .action.create:active * { fill: #fff; } .pxs-userarea__login .action.create[disabled] { opacity: 0.65; cursor: auto; } .pxs-userarea__login .action.create span { display: inline-block; padding-right: 3rem; } .pxs-userarea__login .action.create svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } .pxs-userarea__login .secondary { margin: 2rem 0 0; text-align: center; font-size: 1.4rem; } .pxs-userarea__login .secondary .action { color: #5b899a; transition: all 0.2s; } .pxs-userarea__login .secondary .action, .pxs-userarea__login .secondary .action:visited { color: #5b899a; } .pxs-userarea__login .secondary .action:hover, .pxs-userarea__login .secondary .action:focus, .pxs-userarea__login .secondary .action:active { color: #d7be7c; text-decoration: none; background: none; } .pxs-userarea__login .field.email .label, .pxs-userarea__login .field.password .label { position: absolute; left: 5rem; top: 1.7rem; font-size: 1.4rem; line-height: 1.6rem; font-weight: 300; letter-spacing: normal; text-transform: none; color: #9f9f9f; z-index: 3; transition: all 0.2s; width: auto; } .pxs-userarea__login .field.email .input-text, .pxs-userarea__login .field.password .input-text { padding: 2rem 1.5rem 1rem 5rem; transition: all 0.2s; } .pxs-userarea__login .field.email .input-text::-webkit-input-placeholder, .pxs-userarea__login .field.password .input-text::-webkit-input-placeholder { color: transparent !important; } .pxs-userarea__login .field.email .input-text::-moz-placeholder, .pxs-userarea__login .field.password .input-text::-moz-placeholder { color: transparent !important; } .pxs-userarea__login .field.email .input-text:-ms-input-placeholder, .pxs-userarea__login .field.password .input-text:-ms-input-placeholder { color: transparent !important; } .pxs-userarea__login .field.email .input-text::-ms-input-placeholder, .pxs-userarea__login .field.password .input-text::-ms-input-placeholder { color: transparent !important; } .pxs-userarea__login .field.email .input-text::placeholder, .pxs-userarea__login .field.password .input-text::placeholder { color: transparent !important; } .pxs-userarea__login .field.email .input-text:focus + .label, .pxs-userarea__login .field.email .input-text:focus + .mage-error + .label, .pxs-userarea__login .field.email .input-text:not(:placeholder-shown) + .label, .pxs-userarea__login .field.email .input-text:not(:placeholder-shown) + .mage-error + .label, .pxs-userarea__login .field.password .input-text:focus + .label, .pxs-userarea__login .field.password .input-text:focus + .mage-error + .label, .pxs-userarea__login .field.password .input-text:not(:placeholder-shown) + .label, .pxs-userarea__login .field.password .input-text:not(:placeholder-shown) + .mage-error + .label { top: 0.5rem; font-size: 1.1rem; } .pxs-userarea__login .field.email svg, .pxs-userarea__login .field.password svg { position: absolute; top: 1.5rem; left: 2rem; width: 1.8rem; height: 1.8rem; z-index: 3; fill: #c5c5c5; } .pxs-userarea__register { max-width: 47rem; margin: 0 auto; color: #9f9f9f; font-size: 1.2rem; line-height: 1.6rem; } .pxs-userarea__register-button { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; border: 1px solid #5b899a; width: 100%; } @media (max-width: 63.99em) { .pxs-userarea__register-button { font-size: 10px; } } .pxs-userarea__register-button * { fill: #5b899a; } .pxs-userarea__register-button, .pxs-userarea__register-button:visited { background-color: #fff; color: #222222; border: 1px solid #5b899a; } .pxs-userarea__register-button:hover, .pxs-userarea__register-button:focus, .pxs-userarea__register-button:active { transition: all 0.2s; background-color: #5b899a; color: #fff; } .pxs-userarea__register-button:hover *, .pxs-userarea__register-button:focus *, .pxs-userarea__register-button:active * { fill: #fff; } .pxs-userarea__register-button[disabled] { opacity: 0.65; cursor: auto; } .pxs-userarea__register-button span { display: inline-block; padding-right: 3rem; } .pxs-userarea__register-button svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } .pxs-userarea__register .field.field-name-firstname .label, .pxs-userarea__register .field.field-name-lastname .label, .pxs-userarea__register .field.password .label, .pxs-userarea__register .field.email .label, .pxs-userarea__register .field.confirmation .label { position: absolute; left: 5rem; top: 1.7rem; font-size: 1.4rem; line-height: 1.6rem; font-weight: 300; letter-spacing: normal; text-transform: none; color: #9f9f9f; z-index: 3; transition: all 0.2s; width: auto; } .pxs-userarea__register .field.field-name-firstname .input-text, .pxs-userarea__register .field.field-name-lastname .input-text, .pxs-userarea__register .field.password .input-text, .pxs-userarea__register .field.email .input-text, .pxs-userarea__register .field.confirmation .input-text { padding: 2rem 1.5rem 1rem 5rem; transition: all 0.2s; } .pxs-userarea__register .field.field-name-firstname .input-text::-webkit-input-placeholder, .pxs-userarea__register .field.field-name-lastname .input-text::-webkit-input-placeholder, .pxs-userarea__register .field.password .input-text::-webkit-input-placeholder, .pxs-userarea__register .field.email .input-text::-webkit-input-placeholder, .pxs-userarea__register .field.confirmation .input-text::-webkit-input-placeholder { color: transparent !important; } .pxs-userarea__register .field.field-name-firstname .input-text::-moz-placeholder, .pxs-userarea__register .field.field-name-lastname .input-text::-moz-placeholder, .pxs-userarea__register .field.password .input-text::-moz-placeholder, .pxs-userarea__register .field.email .input-text::-moz-placeholder, .pxs-userarea__register .field.confirmation .input-text::-moz-placeholder { color: transparent !important; } .pxs-userarea__register .field.field-name-firstname .input-text:-ms-input-placeholder, .pxs-userarea__register .field.field-name-lastname .input-text:-ms-input-placeholder, .pxs-userarea__register .field.password .input-text:-ms-input-placeholder, .pxs-userarea__register .field.email .input-text:-ms-input-placeholder, .pxs-userarea__register .field.confirmation .input-text:-ms-input-placeholder { color: transparent !important; } .pxs-userarea__register .field.field-name-firstname .input-text::-ms-input-placeholder, .pxs-userarea__register .field.field-name-lastname .input-text::-ms-input-placeholder, .pxs-userarea__register .field.password .input-text::-ms-input-placeholder, .pxs-userarea__register .field.email .input-text::-ms-input-placeholder, .pxs-userarea__register .field.confirmation .input-text::-ms-input-placeholder { color: transparent !important; } .pxs-userarea__register .field.field-name-firstname .input-text::placeholder, .pxs-userarea__register .field.field-name-lastname .input-text::placeholder, .pxs-userarea__register .field.password .input-text::placeholder, .pxs-userarea__register .field.email .input-text::placeholder, .pxs-userarea__register .field.confirmation .input-text::placeholder { color: transparent !important; } .pxs-userarea__register .field.field-name-firstname .input-text:focus + .label, .pxs-userarea__register .field.field-name-firstname .input-text:focus + .mage-error + .label, .pxs-userarea__register .field.field-name-firstname .input-text:not(:placeholder-shown) + .label, .pxs-userarea__register .field.field-name-firstname .input-text:not(:placeholder-shown) + .mage-error + .label, .pxs-userarea__register .field.field-name-lastname .input-text:focus + .label, .pxs-userarea__register .field.field-name-lastname .input-text:focus + .mage-error + .label, .pxs-userarea__register .field.field-name-lastname .input-text:not(:placeholder-shown) + .label, .pxs-userarea__register .field.field-name-lastname .input-text:not(:placeholder-shown) + .mage-error + .label, .pxs-userarea__register .field.password .input-text:focus + .label, .pxs-userarea__register .field.password .input-text:focus + .mage-error + .label, .pxs-userarea__register .field.password .input-text:not(:placeholder-shown) + .label, .pxs-userarea__register .field.password .input-text:not(:placeholder-shown) + .mage-error + .label, .pxs-userarea__register .field.email .input-text:focus + .label, .pxs-userarea__register .field.email .input-text:focus + .mage-error + .label, .pxs-userarea__register .field.email .input-text:not(:placeholder-shown) + .label, .pxs-userarea__register .field.email .input-text:not(:placeholder-shown) + .mage-error + .label, .pxs-userarea__register .field.confirmation .input-text:focus + .label, .pxs-userarea__register .field.confirmation .input-text:focus + .mage-error + .label, .pxs-userarea__register .field.confirmation .input-text:not(:placeholder-shown) + .label, .pxs-userarea__register .field.confirmation .input-text:not(:placeholder-shown) + .mage-error + .label { top: 0.5rem; font-size: 1.1rem; } .pxs-userarea__register .field.field-name-firstname svg, .pxs-userarea__register .field.field-name-lastname svg, .pxs-userarea__register .field.password svg, .pxs-userarea__register .field.email svg, .pxs-userarea__register .field.confirmation svg { position: absolute; top: 1.5rem; left: 2rem; width: 1.8rem; height: 1.8rem; z-index: 3; fill: #c5c5c5; } .pxs-userarea__register .tooltip { display: block; margin: 1rem 0 2.5rem; } .pxs-userarea__register .legend span { display: block; margin: 2rem 0 1rem; line-height: 1.6rem; } .pxs-userarea__register .password-strength-meter { margin: 1rem 0; } .pxs-userarea__register .password-strength-meter span { font-weight: 400; } .pxs-userarea__register .action.primary { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #5b899a; color: #fff; width: 100%; } @media (max-width: 63.99em) { .pxs-userarea__register .action.primary { font-size: 10px; } } .pxs-userarea__register .action.primary * { fill: #fff; } .pxs-userarea__register .action.primary, .pxs-userarea__register .action.primary:visited { background-color: #5b899a; color: #fff; } .pxs-userarea__register .action.primary:hover, .pxs-userarea__register .action.primary:focus, .pxs-userarea__register .action.primary:active { transition: all 0.2s; background-color: #25434e; color: #fff; } .pxs-userarea__register .action.primary[disabled] { opacity: 0.65; cursor: auto; } .pxs-userarea__register .action.primary span { display: inline-block; padding-right: 3rem; } .pxs-userarea__register .action.primary svg { position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; max-width: 1.8rem; max-height: 1.8rem; } .pxs-userarea__columns { display: flex; flex-wrap: wrap; } .pxs-userarea__aside { order: 1; width: 100%; } @media (min-width: 48em) { .pxs-userarea__aside { margin-bottom: 3rem; width: 33.3333%; } } @media (min-width: 80em) { .pxs-userarea__aside { width: 25%; } } .pxs-userarea__main { order: 2; margin-bottom: 3rem; width: 100%; line-height: 2.1rem; } @media (min-width: 48em) { .pxs-userarea__main { padding-left: 9rem; width: 66.6666%; } } @media (min-width: 80em) { .pxs-userarea__main { width: 75%; } } .pxs-userarea__main .pxs-userarea__page-title .page-title { text-align: left; margin-bottom: 3.5rem; } .pxs-userarea__main .field.field-name-firstname .label, .pxs-userarea__main .field.field-name-lastname .label, .pxs-userarea__main .field.password .label, .pxs-userarea__main .field.email .label, .pxs-userarea__main .field.confirmation .label { position: absolute; left: 5rem; top: 1.7rem; font-size: 1.4rem; line-height: 1.6rem; font-weight: 300; letter-spacing: normal; text-transform: none; color: #9f9f9f; z-index: 3; transition: all 0.2s; width: auto; } .pxs-userarea__main .field.field-name-firstname .input-text, .pxs-userarea__main .field.field-name-lastname .input-text, .pxs-userarea__main .field.password .input-text, .pxs-userarea__main .field.email .input-text, .pxs-userarea__main .field.confirmation .input-text { padding: 2rem 1.5rem 1rem 5rem; transition: all 0.2s; } .pxs-userarea__main .field.field-name-firstname .input-text::-webkit-input-placeholder, .pxs-userarea__main .field.field-name-lastname .input-text::-webkit-input-placeholder, .pxs-userarea__main .field.password .input-text::-webkit-input-placeholder, .pxs-userarea__main .field.email .input-text::-webkit-input-placeholder, .pxs-userarea__main .field.confirmation .input-text::-webkit-input-placeholder { color: transparent !important; } .pxs-userarea__main .field.field-name-firstname .input-text::-moz-placeholder, .pxs-userarea__main .field.field-name-lastname .input-text::-moz-placeholder, .pxs-userarea__main .field.password .input-text::-moz-placeholder, .pxs-userarea__main .field.email .input-text::-moz-placeholder, .pxs-userarea__main .field.confirmation .input-text::-moz-placeholder { color: transparent !important; } .pxs-userarea__main .field.field-name-firstname .input-text:-ms-input-placeholder, .pxs-userarea__main .field.field-name-lastname .input-text:-ms-input-placeholder, .pxs-userarea__main .field.password .input-text:-ms-input-placeholder, .pxs-userarea__main .field.email .input-text:-ms-input-placeholder, .pxs-userarea__main .field.confirmation .input-text:-ms-input-placeholder { color: transparent !important; } .pxs-userarea__main .field.field-name-firstname .input-text::-ms-input-placeholder, .pxs-userarea__main .field.field-name-lastname .input-text::-ms-input-placeholder, .pxs-userarea__main .field.password .input-text::-ms-input-placeholder, .pxs-userarea__main .field.email .input-text::-ms-input-placeholder, .pxs-userarea__main .field.confirmation .input-text::-ms-input-placeholder { color: transparent !important; } .pxs-userarea__main .field.field-name-firstname .input-text::placeholder, .pxs-userarea__main .field.field-name-lastname .input-text::placeholder, .pxs-userarea__main .field.password .input-text::placeholder, .pxs-userarea__main .field.email .input-text::placeholder, .pxs-userarea__main .field.confirmation .input-text::placeholder { color: transparent !important; } .pxs-userarea__main .field.field-name-firstname .input-text:focus + .label, .pxs-userarea__main .field.field-name-firstname .input-text:focus + .mage-error + .label, .pxs-userarea__main .field.field-name-firstname .input-text:not(:placeholder-shown) + .label, .pxs-userarea__main .field.field-name-firstname .input-text:not(:placeholder-shown) + .mage-error + .label, .pxs-userarea__main .field.field-name-lastname .input-text:focus + .label, .pxs-userarea__main .field.field-name-lastname .input-text:focus + .mage-error + .label, .pxs-userarea__main .field.field-name-lastname .input-text:not(:placeholder-shown) + .label, .pxs-userarea__main .field.field-name-lastname .input-text:not(:placeholder-shown) + .mage-error + .label, .pxs-userarea__main .field.password .input-text:focus + .label, .pxs-userarea__main .field.password .input-text:focus + .mage-error + .label, .pxs-userarea__main .field.password .input-text:not(:placeholder-shown) + .label, .pxs-userarea__main .field.password .input-text:not(:placeholder-shown) + .mage-error + .label, .pxs-userarea__main .field.email .input-text:focus + .label, .pxs-userarea__main .field.email .input-text:focus + .mage-error + .label, .pxs-userarea__main .field.email .input-text:not(:placeholder-shown) + .label, .pxs-userarea__main .field.email .input-text:not(:placeholder-shown) + .mage-error + .label, .pxs-userarea__main .field.confirmation .input-text:focus + .label, .pxs-userarea__main .field.confirmation .input-text:focus + .mage-error + .label, .pxs-userarea__main .field.confirmation .input-text:not(:placeholder-shown) + .label, .pxs-userarea__main .field.confirmation .input-text:not(:placeholder-shown) + .mage-error + .label { top: 0.5rem; font-size: 1.1rem; } .pxs-userarea__main .field.field-name-firstname svg, .pxs-userarea__main .field.field-name-lastname svg, .pxs-userarea__main .field.password svg, .pxs-userarea__main .field.email svg, .pxs-userarea__main .field.confirmation svg { position: absolute; top: 1.5rem; left: 2rem; width: 1.8rem; height: 1.8rem; z-index: 3; fill: #c5c5c5; } .pxs-userarea__main a { color: #5b899a; transition: all 0.2s; } .pxs-userarea__main a, .pxs-userarea__main a:visited { color: #5b899a; } .pxs-userarea__main a:hover, .pxs-userarea__main a:focus, .pxs-userarea__main a:active { color: #d7be7c; text-decoration: none; background: none; } .pxs-userarea__main .action.back { display: block; } .pxs-userarea__main .block-title { font-size: 1.8rem; text-transform: uppercase; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #eaeaea; } .pxs-userarea__main .block-title strong { font-weight: 300; } .pxs-userarea__main .block-title .action.edit { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .pxs-userarea__main .block-title .action.view { font-size: 1.4rem; text-transform: lowercase; } .pxs-userarea__main .block-title.order { display: flex; justify-content: space-between; } @media (min-width: 48em) { .pxs-userarea__main .block-content { display: flex; justify-content: space-between; } } .pxs-userarea__main .block-content .box-title { display: block; margin-bottom: 0.5rem; font-weight: 400; } @media (min-width: 48em) { .pxs-userarea__main .box { width: 48%; } } @media (max-width: 47.99em) { .pxs-userarea__main .box + .pxs-userarea__main .box { margin-top: 2rem; } } .pxs-userarea__main .box-actions a { color: #5b899a; } .pxs-userarea__main .box-actions a:not(:first-child) { padding-left: 0.8rem; margin-left: 0.8rem; border-left: 1px solid #c5c5c5; } .pxs-userarea__main .legend { font-weight: 600; } .pxs-userarea__main .actions-toolbar { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #eaeaea; padding-top: 2rem; } .pxs-userarea__main .actions-toolbar .secondary { order: 1; } .pxs-userarea__main .actions-toolbar .primary { order: 2; } @media (max-width: 47.99em) { .pxs-userarea__main .pager { display: flex; align-items: center; justify-content: space-between; } } .pxs-userarea__main .pager .limiter { display: flex; align-items: center; justify-content: space-around; width: auto; } .pxs-userarea__main .pager .limiter-options { min-width: 7rem; } .pxs-userarea__main .pager select { margin: 0 1rem; } .pxs-userarea__main .pager .limiter-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .pxs-userarea__main .fieldset + .fieldset { margin-top: 2rem; } .pxs-userarea__main select { display: block; padding: 1.5rem 3rem 1.5rem 1.5rem; font-size: 14px; font-family: "Montserrat", sans-serif; color: #9f9f9f; border: 1px solid #eaeaea; border-radius: 6px; background-color: #fff; width: 100%; max-width: 80rem; outline: none; -moz-appearance: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat, repeat; background-position: right 0.8rem top 52%, 0 0; background-size: 1.5rem auto; box-shadow: none; transition: all 0.2s; } .pxs-userarea__main select:hover:not([disabled]), .pxs-userarea__main select:focus:not([disabled]) { border: 1px solid #9f9f9f; box-shadow: none; } .pxs-userarea__main select[disabled] { opacity: 0.5; } .pxs-userarea__main .password-info { margin: 1rem 0; } .pxs-userarea__navigation .account-nav-content { padding: 3rem 2.5rem; background: #fff; border: 1px solid #eaeaea; } .pxs-userarea__navigation .items { margin: 0; padding: 0; list-style: none; } .pxs-userarea__navigation .item.current strong { padding: 0.5rem 0; border: none; } .pxs-userarea__navigation .item a { padding: 0.2rem 0; color: #222222; border-left: none; } .pxs-userarea__navigation .item a, .pxs-userarea__navigation .item a:visited { color: #222222; } .pxs-userarea__navigation .item a:hover, .pxs-userarea__navigation .item a:focus, .pxs-userarea__navigation .item a:active { color: #d7be7c; text-decoration: none; background: none; } .pxs-userarea__navigation .item .delimiter { margin: 2.5rem 0; border-color: #eaeaea; } .pxs-userarea__navigation-logout { display: flex; align-items: center; } .pxs-userarea__navigation-logout svg { margin-left: 1rem; width: 1.8rem; height: 1.8rem; } .pxs-userarea--logout { max-width: 50rem; margin: 0 auto; text-align: center; } .page-title { font-weight: 300; font-size: 2rem; margin-bottom: 2rem; text-transform: uppercase; text-align: center; } @media (min-width: 48em) { .page-title { font-weight: 300; font-size: 2.4rem; margin-bottom: 4rem; } } .pxs-styleguide__section { padding: 2rem 0; margin: 2rem 0; border-bottom: 1px solid #9f9f9f; } .pxs-styleguide__color-wrapper { display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 100px; } .pxs-styleguide__color-box { display: flex; align-items: center; justify-content: center; } .pxs-styleguide__color-box--silver-chalice { background-color: #9f9f9f; } .pxs-styleguide__color-box--color-dove-gray { background-color: #646464; } .pxs-styleguide__color-box--color-light-grey { background-color: #eaeaea; } .pxs-styleguide__color-box--color-wild-sand { background-color: #f4f4f4; } .pxs-styleguide__color-box--color-plantation { background-color: #25434e; color: #fff; } .pxs-styleguide__color-box--color-horizon { background-color: #5b899a; } .pxs-styleguide__color-box--color-straw { background-color: #d7be7c; } .pxs-styleguide__color-box--color-jaffa { background-color: #F48535; } .pxs-styleguide__color-box--color-mine-shaft { background-color: #222222; color: #fff; } .pxs-styleguide__color-box--color-mine-shaft2 { background-color: #363636; color: #fff; } .pxs-styleguide__button--primary { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #5b899a; color: #fff; } @media (max-width: 63.99em) { .pxs-styleguide__button--primary { font-size: 10px; } } .pxs-styleguide__button--primary * { fill: #fff; } .pxs-styleguide__button--primary, .pxs-styleguide__button--primary:visited { background-color: #5b899a; color: #fff; } .pxs-styleguide__button--primary:hover, .pxs-styleguide__button--primary:focus, .pxs-styleguide__button--primary:active { transition: all 0.2s; background-color: #25434e; color: #fff; } .pxs-styleguide__button--primary[disabled] { opacity: 0.65; cursor: auto; } .pxs-styleguide__button--secondary { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; } @media (max-width: 63.99em) { .pxs-styleguide__button--secondary { font-size: 10px; } } .pxs-styleguide__button--secondary * { fill: #5b899a; } .pxs-styleguide__button--secondary, .pxs-styleguide__button--secondary:visited { background-color: #fff; color: #222222; } .pxs-styleguide__button--secondary:hover, .pxs-styleguide__button--secondary:focus, .pxs-styleguide__button--secondary:active { transition: all 0.2s; background-color: #eaeaea; color: #222222; } .pxs-styleguide__button--secondary[disabled] { opacity: 0.65; cursor: auto; } .pxs-styleguide__button--ghost { position: relative; display: inline-block; margin: 0; padding: 1.7rem 3rem; color: #222222; font-size: 12px; line-height: 16px; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer; text-align: center; border: none; outline: none; border-radius: 6px; background-color: #fff; color: #222222; border: 1px solid #5b899a; } @media (max-width: 63.99em) { .pxs-styleguide__button--ghost { font-size: 10px; } } .pxs-styleguide__button--ghost * { fill: #5b899a; } .pxs-styleguide__button--ghost, .pxs-styleguide__button--ghost:visited { background-color: #fff; color: #222222; border: 1px solid #5b899a; } .pxs-styleguide__button--ghost:hover, .pxs-styleguide__button--ghost:focus, .pxs-styleguide__button--ghost:active { transition: all 0.2s; background-color: #5b899a; color: #fff; } .pxs-styleguide__button--ghost:hover *, .pxs-styleguide__button--ghost:focus *, .pxs-styleguide__button--ghost:active * { fill: #fff; } .pxs-styleguide__button--ghost[disabled] { opacity: 0.65; cursor: auto; } .pxs-styleguide__button--icon-left { display: inline-block; padding-right: 3rem; } .pxs-styleguide__button--icon-right { display: inline-block; padding-left: 3rem; } .pxs-styleguide__button svg { width: 1.8rem; } .pxs-styleguide input[type='text'] { display: block; width: 100%; max-width: 80rem; padding: 1.5rem; height: auto; width: 100%; font-size: 14px; font-family: "Montserrat", sans-serif; font-weight: 300; border: 1px solid #eaeaea; border-radius: 6px; background-color: #fff; transition: all 0.2s; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 1rem 0; } .pxs-styleguide input[type='text']:hover:not([disabled]), .pxs-styleguide input[type='text']:focus:not([disabled]) { border: 1px solid #9f9f9f; box-shadow: none; } .pxs-styleguide input[type='text']::-webkit-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-styleguide input[type='text']::-moz-placeholder { opacity: 1; color: #9f9f9f; } .pxs-styleguide input[type='text']:-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-styleguide input[type='text']::-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-styleguide input[type='text']::placeholder { opacity: 1; color: #9f9f9f; } .pxs-styleguide input[type='text'][disabled] { opacity: 0.6; } .pxs-styleguide input[type='radio'] { display: inline-block; margin: 0 1rem 0 0; height: 2rem; width: 2rem; cursor: pointer; outline: none; border: 1px solid #eaeaea; background-color: #fff; border-radius: 50%; transition: all 0.2s; background-position: 50% 50%; background-size: 1rem 1rem; background-repeat: no-repeat; background-color: #fff; -moz-appearance: none; appearance: none; -webkit-appearance: none; box-shadow: none; flex: 0 0 auto; } .pxs-styleguide input[type='radio']:hover, .pxs-styleguide input[type='radio']:focus { border-color: #9f9f9f; box-shadow: none; } .pxs-styleguide input[type='radio']:checked { border: 1px solid #5b899a; background-image: url("data:image/svg+xml;utf8, "); } .pxs-styleguide input[type='radio']:checked, .pxs-styleguide input[type='radio']:checked:hover, .pxs-styleguide input[type='radio']:checked:focus { border: 1px solid #5b899a; } .pxs-styleguide input[type='radio'][disabled] { opacity: 0.5; } .pxs-styleguide input[type='checkbox'] { display: inline-block; margin: 0 1rem 0 0; height: 2rem; width: 2rem; cursor: pointer; outline: none; border: 1px solid #eaeaea; background-color: #fff; border-radius: 50%; transition: all 0.2s; background-position: 50% 50%; background-size: 1rem 1rem; background-repeat: no-repeat; background-color: #fff; -moz-appearance: none; appearance: none; -webkit-appearance: none; box-shadow: none; flex: 0 0 auto; border-radius: 6px; background-size: 1rem 1rem; margin-right: 1.5rem; flex: 0 0 auto; } .pxs-styleguide input[type='checkbox']:hover, .pxs-styleguide input[type='checkbox']:focus { border-color: #9f9f9f; box-shadow: none; } .pxs-styleguide input[type='checkbox']:checked { border: 1px solid #5b899a; background-image: url("data:image/svg+xml;utf8, "); } .pxs-styleguide input[type='checkbox']:checked, .pxs-styleguide input[type='checkbox']:checked:hover, .pxs-styleguide input[type='checkbox']:checked:focus { border: 1px solid #5b899a; } .pxs-styleguide input[type='checkbox'][disabled] { opacity: 0.5; } .pxs-styleguide input[type='checkbox']:checked { background-image: url("data:image/svg+xml;utf8, "); } .pxs-styleguide select { display: block; padding: 1.5rem 3rem 1.5rem 1.5rem; font-size: 14px; font-family: "Montserrat", sans-serif; color: #9f9f9f; border: 1px solid #eaeaea; border-radius: 6px; background-color: #fff; width: 100%; max-width: 80rem; outline: none; -moz-appearance: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat, repeat; background-position: right 0.8rem top 52%, 0 0; background-size: 1.5rem auto; box-shadow: none; transition: all 0.2s; margin: 1rem 0; } .pxs-styleguide select:hover:not([disabled]), .pxs-styleguide select:focus:not([disabled]) { border: 1px solid #9f9f9f; box-shadow: none; } .pxs-styleguide select[disabled] { opacity: 0.5; } .pxs-styleguide textarea { display: block; width: 100%; max-width: 80rem; padding: 1.5rem; height: auto; width: 100%; font-size: 14px; font-family: "Montserrat", sans-serif; font-weight: 300; border: 1px solid #eaeaea; border-radius: 6px; background-color: #fff; transition: all 0.2s; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; resize: vertical; box-shadow: none; } .pxs-styleguide textarea:hover:not([disabled]), .pxs-styleguide textarea:focus:not([disabled]) { border: 1px solid #9f9f9f; box-shadow: none; } .pxs-styleguide textarea::-webkit-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-styleguide textarea::-moz-placeholder { opacity: 1; color: #9f9f9f; } .pxs-styleguide textarea:-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-styleguide textarea::-ms-input-placeholder { opacity: 1; color: #9f9f9f; } .pxs-styleguide textarea::placeholder { opacity: 1; color: #9f9f9f; } .pxs-styleguide textarea[disabled] { opacity: 0.6; }