@import url(//hello.myfonts.net/count/397f8e);@charset "UTF-8";
/**
* Based on
*
* - reset.css 2.0 by Eric Meyer
(public domain)
* http://meyerweb.com/eric/tools/css/reset/
*
* - normalize.css 8.0.1 by Nicolas Gallagher and Jonathan Neal
* (licensed under MIT)
* https://github.com/necolas/normalize.css
*
* - Reboot from Bootstrap 4.5.3
* (licensed under MIT)
* https://github.com/twbs/bootstrap
*/
/**
* IE10+ doesn't honor `` elements.
*/
body {
/* 1 */
line-height: 1;
/* 2 */
font-family: sans-serif;
/* 3 */
text-align: left;
}
/**
* Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
* on elements that programmatically receive focus but wouldn't normally show a visible
* focus outline. In general, this would mean that the outline is only applied if the
* interaction that led to the element receiving programmatic focus was a keyboard interaction,
* or the browser has somehow determined that the user is primarily a keyboard user and/or
* wants focus outlines to always be presented.
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
* and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
*/
[tabindex="-1"]:focus:not(:focus-visible) {
outline: 0 !important;
}
/**
* Lists
*/
ol, ul {
list-style: none;
}
/**
* Quotes
*/
blockquote, q {
quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: "";
content: none;
}
/**
* Tables
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/**
* Table Headers
* 1. Matches default ` ` alignment by inheriting from the ``, or the
* closest parent with a set `text-align`.
* 2. Fix alignment for Safari
*/
th {
/* 1 */
text-align: inherit;
/* 2 */
text-align: -webkit-match-parent;
}
/**
* Horizontal Lines
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
/* 1 */
box-sizing: content-box;
height: 0;
/* 2 */
overflow: visible;
}
/**
* Preformatted Text
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Don't allow content to break outside
* 3. We have @viewport set which causes scrollbars to overlap content in IE11
* and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to
* counteract.
*/
code {
/* 1 */
font-family: monospace, monospace;
}
/**
* Links
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
/* 1 */
background-color: transparent;
/* 2 */
-webkit-text-decoration-skip: objects;
}
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
* 3. Add explicit cursor to indicate changed behavior.
* 4. Prevent the text-decoration to be skipped.
*/
address {
font-style: normal;
line-height: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub {
position: relative;
font-size: 75%;
line-height: 0;
}
sub {
bottom: -0.25em;
}
/**
* Prevent `em` being affected from global reset
*/
em {
font-style: italic;
}
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/**
* Hide SVG overflow in IE
*/
svg:not(:root) {
overflow: hidden;
}
/**
* Remove the default `border-radius` that macOS Chrome adds.
* Details at https://github.com/twbs/bootstrap/issues/24093
*/
button {
border-radius: 0;
}
/**
* Work around a Firefox/IE bug where the transparent `button` background
* results in a loss of the default `button` focus styles.
* Credit: https://github.com/suitcss/base/
*/
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
/**
* form element resets
* 1. Remove the margin in Firefox and Safari
* 2. inherit font rules
*/
input,
button,
select,
textarea {
/* 1 */
margin: 0;
/* 2 */
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=reset],
[type=submit],
[type=button] {
/* 2 */
-webkit-appearance: button;
}
/**
* Remove the default appearance of temporal inputs to avoid a Mobile Safari
* bug where setting a custom line-height prevents text from being vertically
* centered within the input.
* See https://bugs.webkit.org/show_bug.cgi?id=139848
* and https://github.com/twbs/bootstrap/issues/11266
*/
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
-webkit-appearance: listbox;
}
/**
* 1. Remove the default vertical scrollbar in IE.
* 2. Textareas should really only resize vertically so they don't break their
* (horizontal) containers.
*/
textarea {
overflow: auto;
resize: vertical;
}
/**
* Show the overflow in IE.
*/
button,
input {
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
*/
button,
select {
text-transform: none;
}
/**
* Set the cursor for non-`` buttons
* Details at https://github.com/twbs/bootstrap/pull/30562
*/
[role=button] {
cursor: pointer;
}
/**
* Remove the inheritance of word-wrap in Safari.
* See https://github.com/twbs/bootstrap/issues/24990
*/
select {
word-wrap: normal;
}
/**
* Remove inner border and padding from Firefox, but don't restore the outline
* like Normalize.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* 1. Add the correct box sizing in IE 10-
* 2. Remove the padding in IE 10-
*/
input[type=radio],
input[type=checkbox] {
/* 1 */
box-sizing: border-box;
/* 2 */
padding: 0;
}
/**
* Suppress the focus outline on elements that cannot be accessed via keyboard.
* This prevents an unwanted focus outline from appearing around elements that
* might still respond to pointer events.
* Credit: https://github.com/suitcss/base
*/
[tabindex="-1"]:focus {
outline: 0 !important;
}
/**
* Browsers set a default `min-width: min-content` on fieldsets,
* unlike e.g. ``s, which have `min-width: 0` by default.
* So we reset that to ensure fieldsets behave more like a standard block element.
* See https://github.com/twbs/bootstrap/issues/12359
* and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
*/
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Set display to block for all browsers
*/
legend {
/* 1 */
max-width: 100%;
white-space: normal;
/* 2 */
color: inherit;
/* 3 */
display: block;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
/**
* 1. Remove the default vertical scrollbar in IE 10+.
* 2. Textareas should really only resize vertically so they don't break their
* (horizontal) containers.
*/
textarea {
/* 1 */
overflow: auto;
/* 2 */
resize: vertical;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
/* 1 */
box-sizing: border-box;
/* 2 */
padding: 0;
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
/* 1 */
-webkit-appearance: textfield;
/* 2 */
outline-offset: -2px;
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
/* 1 */
-webkit-appearance: button;
/* 2 */
font: inherit;
}
/**
* Correct element display for output
*/
output {
display: inline-block;
}
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Always hide an element with the `hidden` HTML attribute (from PureCSS).
* Needed for proper display in IE 10-.
*/
[hidden] {
display: none;
}
.lazyload {
visibility: hidden;
opacity: 0;
}
.lazyload__animate--fade {
transition-property: visibility, opacity;
transition-duration: 0.29s;
transition-timing-function: ease-out-cubic;
}
.lazyload--show {
visibility: visible;
opacity: 1;
}
/**
* @license
* MyFonts Webfont Build ID 3768206, 2019-05-30T08:53:00-0400
*
* The fonts listed in this notice are subject to the End User License
* Agreement(s) entered into by the website owner. All other parties are
* explicitly restricted from using the Licensed Webfonts(s).
*
* You may obtain a valid license at the URLs below.
*
* Webfont: MuseoSansCyrl-300 by exljbris
* URL: https://www.myfonts.com/css/fonts/exljbris/museo-sans-cyrillic/300/
* Licensed pageviews: 500,000
*
* Webfont: MuseoSansCyrl-500 by exljbris
* URL: https://www.myfonts.com/css/fonts/exljbris/museo-sans-cyrillic/500/
* Licensed pageviews: Unlimited
*
* Webfont: MuseoSansCyrl-700 by exljbris
* URL: https://www.myfonts.com/css/fonts/exljbris/museo-sans-cyrillic/700/
* Licensed pageviews: 500,000
*
*
* License: https://www.myfonts.com/viewlicense?type=web&buildid=3768206
* Webfonts copyright: Copyright (c) 2012 by Jos Buivenga. All rights reserved.
*
* © 2019 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@font-face {
font-family: "Museo Sans";
font-weight: 300;
src: url("./fonts/museo/subset-MuseoSansCyrl-300.woff2") format("woff2"), url("./fonts/museo/subset-MuseoSansCyrl-300.woff") format("woff");
font-display: swap;
}
@font-face {
font-family: "Museo Sans";
font-weight: 500;
src: url("./fonts/museo/subset-MuseoSansCyrl-500.woff2") format("woff2"), url("./fonts/museo/subset-MuseoSansCyrl-500.woff") format("woff");
font-display: swap;
}
@font-face {
font-family: "Museo Sans";
font-weight: 700;
src: url("./fonts/museo/subset-MuseoSansCyrl-700.woff2") format("woff2"), url("./fonts/museo/subset-MuseoSansCyrl-700.woff") format("woff");
font-display: swap;
}
html {
font-size: 10px;
}
body {
font-size: 1.4rem;
line-height: 2.1rem;
font-family: "Museo Sans", sans-serif;
color: #000000;
}
h1,
h2,
h3,
h4,
h5 {
color: #000000;
font-family: "Museo Sans", sans-serif;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1 {
margin: 0 0 2rem;
font-size: 2.8rem;
line-height: 3.5rem;
}
@media screen and (min-width: 48em) {
h1 {
margin: 0 0 3rem;
font-size: 4.5rem;
line-height: 5.4rem;
}
}
h2 {
font-size: 2.8rem;
line-height: 3.5rem;
}
@media screen and (min-width: 48em) {
h2 {
font-size: 3.8rem;
line-height: 4.9rem;
}
}
h3,
.h3 {
margin: 0 0 1.6rem;
font-size: 3rem;
line-height: 4.1rem;
}
h4 {
margin: 0 0 1.6rem;
font-size: 2rem;
line-height: 2.5rem;
}
@media screen and (min-width: 48em) {
h4 {
font-size: 2.3rem;
line-height: 3rem;
}
}
h5 {
margin: 0 0 1.6rem;
font-size: 1.6rem;
line-height: 2.4rem;
}
p, section.product-detail > header .page-width div.product-summary div.short-description {
margin: 0 0 1.5rem;
font-size: 1.5rem;
line-height: 2.3rem;
font-weight: 300;
}
a {
text-decoration: none;
color: #ff5137;
}
strong,
b {
font-size: 105%;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.product-title {
margin: 0 0 1.6rem;
color: #000000;
font-family: "Museo Sans", sans-serif;
font-weight: 700;
font-size: 1.6rem;
line-height: 2.4rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.button {
position: relative;
z-index: 2;
display: inline-block;
padding: 1.5rem 7rem 1.5rem 2.5rem;
font-size: 1.5rem;
font-weight: 500;
line-height: 2rem;
text-decoration: none;
cursor: pointer;
transition: all 125ms ease-in-out;
border: 0;
}
@media screen and (min-width: 330px) {
.button {
font-size: 1.6rem;
}
}
.button:after {
content: "\F061";
position: absolute;
top: 1.5rem;
right: 2.7rem;
font: var(--fa-font-solid);
transition: all 125ms ease-in-out;
transform: translateX(0);
}
.button:hover:after, .button:active:after, .button:focus:after {
transform: translateX(0.5rem);
}
.button:focus, .button:active {
outline: none;
}
.button.button-back {
padding: 1.5rem 2.5rem 1.5rem 7rem;
}
.button.button-back.button-rounded {
padding: 1.5rem 2.5rem 1.5rem 6rem;
}
.button.button-back:after {
content: "\F060";
right: auto;
left: 2.7rem;
}
.button.button-back:hover:after, .button.button-back:active:after, .button.button-back:focus:after {
transform: translateX(-0.5rem);
}
.button.button-primary {
color: #ffffff;
background: linear-gradient(90deg, #ff7d55 0.51%, #ff1810 100%);
border: 0;
}
.button.button-primary:before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 0;
transition: all 125ms ease-in-out;
background: linear-gradient(90deg, #ff1810 0.51%, #ff7d55 100%);
}
.button.button-primary:hover:before, .button.button-primary:active:before, .button.button-primary:focus:before {
opacity: 1;
}
.button.button-rounded {
padding: 1.5rem 6rem 1.5rem 2.7rem;
border-radius: 3rem;
}
.button.button-rounded.inline {
display: inline;
margin-right: 1rem;
}
@media screen and (max-width: 26.99875em) {
.button.button-rounded.inline {
display: block;
width: 100%;
}
}
.button.button-rounded:before {
border-radius: 3rem;
}
.button.button-open {
box-shadow: inset 0 0 0 0.1rem #ff5137;
color: #ff5137;
font-weight: 300;
background: none;
}
.button.button-open.inline {
display: inline;
}
@media screen and (max-width: 26.99875em) {
.button.button-open.inline {
display: block;
width: 100%;
}
}
.button:disabled, .button.disabled {
cursor: not-allowed;
opacity: 0.2;
}
.button.loading {
cursor: wait;
}
.collapsible input.toggle {
position: absolute;
height: 0;
width: 0;
opacity: 0;
}
.collapsible input.toggle:checked ~ .collapsible-content {
display: block;
}
.collapsible input.toggle:checked + label.toggle:after {
content: "\F106";
}
.collapsible label.toggle {
display: block;
position: relative;
cursor: pointer;
}
.collapsible label.toggle:after {
content: "\F107";
margin-left: 0.3rem;
font: var(--fa-font-solid);
transition: all 125ms ease-in-out;
}
.collapsible .collapsible-content {
display: none;
}
.ypa-datepicker {
display: block;
position: relative;
width: 100%;
background: #ffffff;
border-radius: 0.4rem;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.ypa-datepicker-header {
display: block;
position: relative;
padding: 2.6rem 2rem 1rem;
}
.ypa-datepicker-header h3 {
font-size: 1.6rem;
line-height: 1.8rem;
margin: 0;
padding: 0;
color: #a1a1a1;
}
.ypa-datepicker-nav {
display: block;
position: absolute;
right: 1rem;
width: 7rem;
top: 1.8rem;
}
.ypa-datepicker-nav span {
display: inline-block;
position: relative;
width: 3.2rem;
height: 3.2rem;
text-align: center;
line-height: 3.2rem;
margin: 0;
padding: 0;
color: #a1a1a1;
cursor: pointer;
transition: all 125ms ease-in-out;
}
.ypa-datepicker-nav span:hover {
color: #ff5137;
}
.ypa-datepicker-body {
padding: 2rem 0.3rem;
}
.ypa-datepicker-body .ypa-datepicker-day, .ypa-datepicker-body .ypa-datepicker-day-header {
display: inline-block;
position: relative;
color: #a1a1a1;
width: 14.285%;
font-size: 1.6rem;
height: 3.2rem;
text-align: center;
}
.ypa-datepicker-body .ypa-datepicker-day {
cursor: pointer;
}
.ypa-datepicker-body .ypa-datepicker-day span {
display: block;
position: absolute;
width: 4rem;
height: 4rem;
left: 50%;
top: 50%;
font-weight: 300;
line-height: 4rem;
transform: translate(-2rem, -2rem);
background: transparent;
border-radius: 100%;
transition: all 125ms ease-in-out;
}
.ypa-datepicker-body .ypa-datepicker-day.disabled {
cursor: not-allowed;
}
.ypa-datepicker-body .ypa-datepicker-day.disabled span {
color: #a1a1a1;
}
.ypa-datepicker-body .ypa-datepicker-day.current span {
color: #000000;
}
.ypa-datepicker-body .ypa-datepicker-day.today span {
font-weight: 500;
color: #000000;
background: #eeeeee;
}
.ypa-datepicker-body .ypa-datepicker-day.selected span {
background: #ff5137;
color: #ffffff;
}
.ypa-datepicker-body .ypa-datepicker-day-header {
color: #cccccc;
padding-bottom: 1rem;
}
.ypa-datepicker-body .ypa-datepicker-day-header span {
font-weight: 700;
}
.fileupload {
position: relative;
margin-bottom: 2rem;
}
.fileupload input {
opacity: 0;
appearance: none;
z-index: 2;
position: relative;
width: 100%;
height: 4.6rem;
}
.fileupload > div {
cursor: pointer;
position: absolute;
display: block;
top: 0;
height: 5rem;
line-height: 5rem;
}
.fileupload > div span {
color: #a1a1a1;
visibility: visible;
}
.fileupload > div strong {
margin-right: 1rem;
background: #ffffff;
font-weight: 400;
padding: 1.2rem 2rem;
border-radius: 0.4rem;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
transition: all 125ms ease-in-out;
}
.fileupload:hover > div strong {
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.15);
}
input[type=text],
input[type=email],
input[type=password],
input[type=url],
input[type=tel],
input[type=time],
input[type=search],
input[type=number],
textarea {
display: block;
-webkit-appearance: none;
appearance: none;
margin: 0.1em;
margin-top: 0.25em;
padding: 1rem 1.2rem;
background-color: #ffffff;
border: 0.1rem solid #eeeeee;
color: #000000;
font-size: 1.4rem;
border-radius: 0.4rem;
resize: none;
transition-property: border-color;
transition-duration: 0.29s;
transition-timing-function: ease-out-quad;
}
input[type=text]:hover,
input[type=email]:hover,
input[type=password]:hover,
input[type=url]:hover,
input[type=tel]:hover,
input[type=time]:hover,
input[type=search]:hover,
input[type=number]:hover,
textarea:hover {
border-color: #a1a1a1;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=url]:focus,
input[type=tel]:focus,
input[type=time]:focus,
input[type=search]:focus,
input[type=number]:focus,
textarea:focus {
border-color: #a1a1a1;
outline: 0;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=url]::placeholder,
input[type=tel]::placeholder,
input[type=time]::placeholder,
input[type=search]::placeholder,
input[type=number]::placeholder,
textarea::placeholder {
color: #a1a1a1;
font-size: 1.5rem;
}
input[type=text][readonly], input[type=text].readonly, input[type=text][readonly]:hover, input[type=text].readonly:hover, input[type=text][readonly]:focus, input[type=text].readonly:focus,
input[type=email][readonly],
input[type=email].readonly,
input[type=email][readonly]:hover,
input[type=email].readonly:hover,
input[type=email][readonly]:focus,
input[type=email].readonly:focus,
input[type=password][readonly],
input[type=password].readonly,
input[type=password][readonly]:hover,
input[type=password].readonly:hover,
input[type=password][readonly]:focus,
input[type=password].readonly:focus,
input[type=url][readonly],
input[type=url].readonly,
input[type=url][readonly]:hover,
input[type=url].readonly:hover,
input[type=url][readonly]:focus,
input[type=url].readonly:focus,
input[type=tel][readonly],
input[type=tel].readonly,
input[type=tel][readonly]:hover,
input[type=tel].readonly:hover,
input[type=tel][readonly]:focus,
input[type=tel].readonly:focus,
input[type=time][readonly],
input[type=time].readonly,
input[type=time][readonly]:hover,
input[type=time].readonly:hover,
input[type=time][readonly]:focus,
input[type=time].readonly:focus,
input[type=search][readonly],
input[type=search].readonly,
input[type=search][readonly]:hover,
input[type=search].readonly:hover,
input[type=search][readonly]:focus,
input[type=search].readonly:focus,
input[type=number][readonly],
input[type=number].readonly,
input[type=number][readonly]:hover,
input[type=number].readonly:hover,
input[type=number][readonly]:focus,
input[type=number].readonly:focus,
textarea[readonly],
textarea.readonly,
textarea[readonly]:hover,
textarea.readonly:hover,
textarea[readonly]:focus,
textarea.readonly:focus {
border: 0.1rem solid #eeeeee;
background: #f9f9f9;
}
input[type=text].error,
input[type=email].error,
input[type=password].error,
input[type=url].error,
input[type=tel].error,
input[type=time].error,
input[type=search].error,
input[type=number].error,
textarea.error {
border: 0.1rem solid #ff1810;
}
input[type=number] {
-moz-appearance: textfield !important;
}
.input-group {
display: flex;
justify-content: space-between;
}
.input-group > * {
width: calc(50% - 1rem);
}
label {
display: inline-block;
margin: 0.5rem 0;
font-weight: 300;
}
input:not([type=hidden]) + label {
margin-top: 1.6rem;
}
.menu-button {
position: relative;
display: block;
width: 3rem;
height: 3rem;
border-radius: 0.6rem;
}
@media screen and (min-width: 64em) {
.menu-button {
width: 2.4rem;
height: 2.4rem;
}
}
.menu-button span {
position: absolute;
display: block;
background: #000000;
}
.menu-button__line {
transition-property: all, opacity;
transition-duration: 0.19s, 0.09s;
transition-timing-function: ease-in-out;
width: 100%;
height: 5%;
border-radius: 0;
top: 10%;
}
.menu-button__line--middle {
transition-delay: 0.19s;
top: 40%;
}
.menu-button__line--bottom {
top: 70%;
}
.menu-button.right {
position: absolute;
right: 1.5rem;
}
.menu-button.active .menu-button__line {
top: 0.7rem;
}
.menu-button.active .menu-button__line--top {
transform: rotate(45deg);
}
.menu-button.active .menu-button__line--bottom {
transform: rotate(-45deg);
}
.menu-button.active .menu-button__line--middle {
transition-delay: 0s;
opacity: 0;
}
.menu-button--back .menu-button__line {
top: 0.7rem;
transition-duration: 0.11s, 0.09s;
}
.menu-button--back .menu-button__line--top {
top: 1.2rem;
transform: rotate(45deg);
width: 1rem;
}
.menu-button--back .menu-button__line--bottom {
transform: rotate(-45deg);
top: 0.4rem;
width: 1rem;
}
.menu-button--back .menu-button__line--middle {
transition-delay: 0s;
opacity: 1;
}
p.menu-button--back, section.product-detail > header .page-width div.product-summary div.menu-button--back.short-description {
padding: 0;
margin: 0;
width: 100%;
cursor: pointer;
}
p.menu-button--back strong, section.product-detail > header .page-width div.product-summary div.menu-button--back.short-description strong {
padding-left: 3rem;
margin-top: -0.2rem;
}
.password-field {
display: block;
cursor: pointer;
position: relative;
}
.password-field input {
width: 100%;
font-size: 1.6rem;
margin-bottom: 0.8rem !important;
}
.password-field span {
display: block;
position: absolute;
right: 1rem;
bottom: 1rem;
width: 10rem;
text-align: right;
}
.password-field span em {
margin-right: 0.5rem;
font-weight: 300;
}
.password-field span i,
.password-field span em {
transition: all 75ms ease-in-out;
display: inline-block;
position: relative;
vertical-align: middle;
line-height: 1;
color: #a1a1a1;
}
.password-field:hover em,
.password-field:hover i {
color: #ff5137;
}
html .select2-container {
min-width: 7rem;
}
html .select2-container .select2-selection--single {
border: 0.1rem solid #eeeeee;
border-radius: 0.6rem;
background: #ffffff;
height: 4rem;
transition: all 125ms ease-in-out;
}
html .select2-container .select2-selection--single:focus, html .select2-container .select2-selection--single:hover {
outline: none;
border: 0.1rem solid #ff5137;
}
html .select2-container .select2-selection--single .select2-selection__rendered {
line-height: 4rem;
padding: 0 2.4rem 0 1.2rem;
}
html .select2-container .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
color: #a1a1a1;
font-weight: 300;
}
html .select2-container .select2-selection--single .select2-selection__arrow:after {
content: "\F107";
position: absolute;
top: 1rem;
right: 1.2rem;
font: var(--fa-font-solid);
transition: all 125ms ease-in-out;
}
html .select2-container .select2-selection--single .select2-selection__arrow b {
display: none;
}
html .select2-container .select2-dropdown {
border: 0.1rem solid #eeeeee;
border-top: 0;
background: #ffffff;
font-weight: 300;
box-shadow: 0.2rem 0.5rem 1rem 0 rgba(0, 0, 0, 0.05);
}
html .select2-container .select2-dropdown .select2-search--dropdown {
padding: 0.7rem;
}
html .select2-container .select2-dropdown .select2-search--dropdown .select2-search__field {
padding: 0.3rem 0.7rem;
border: 0;
background: #eeeeee;
font-weight: 300;
border-radius: 0.6rem;
}
html .select2-container .select2-dropdown .select2-results {
overflow-y: auto;
max-height: 20rem;
}
html .select2-container .select2-dropdown .select2-results .select2-results__option {
padding: 0.7rem;
}
html .select2-container .select2-dropdown .select2-results .select2-results__option.select2-results__option--highlighted {
background: #eeeeee;
color: #000000;
}
html .select2-container--filter {
outline: 0;
}
html .select2-container--filter .select2-selection--single .select2-selection__rendered {
padding: 0 3.2rem 0 1.6rem;
}
html .select2-container--filter .select2-selection--single .select2-selection__arrow:after {
content: "\F002";
right: 1.6rem;
}
html .select2-container--filter span.flag {
display: flex;
align-items: center;
}
html .select2-container--filter span.flag img {
display: block;
margin-right: 1rem;
width: 2rem;
height: 1.5rem;
}
html .select2-container--filter span.flag .flag-text {
font-size: 1.3rem;
}
html .select2-container--filter .select2-dropdown .select2-search--dropdown {
padding: 1rem;
}
html .select2-container--filter .select2-dropdown .select2-search--dropdown .select2-search__field {
padding: 0.5rem 1.2rem;
}
html .select2-container--filter .select2-dropdown .select2-results .select2-results__option {
padding: 1rem;
}
table {
width: 100%;
border: none;
border-spacing: 0;
border-collapse: separate;
}
table th,
table td {
padding: 1.7rem 2rem 1.5rem;
border: 0;
margin: 0;
border-bottom: 0.1rem solid #f9f9f9;
}
table td {
font-size: 1.4rem;
line-height: 1.8rem;
}
table th {
background: #f9f9f9;
font-size: 1.6rem;
line-height: 2rem;
text-align: left;
}
.grid-four, section.search .product-grid {
display: -ms-grid;
display: grid;
grid-gap: 2rem;
-ms-grid-columns: 100%;
-ms-grid-rows: 1fr;
grid-template-columns: 100%;
}
@media screen and (max-width: 47.99875em) {
.grid-four.start-two, section.search .start-two.product-grid {
grid-gap: 3rem;
-ms-grid-columns: 1fr 1fr;
-ms-grid-rows: 1fr;
grid-template-columns: 1fr 1fr;
}
.grid-four.start-two > *:nth-child(1), section.search .start-two.product-grid > *:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.grid-four.start-two > *:nth-child(2), section.search .start-two.product-grid > *:nth-child(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
}
@media screen and (min-width: 48em) {
.grid-four, section.search .product-grid {
grid-gap: 3rem;
-ms-grid-columns: 1fr 1fr;
-ms-grid-rows: 1fr;
grid-template-columns: 1fr 1fr;
}
.grid-four > *:nth-child(1), section.search .product-grid > *:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.grid-four > *:nth-child(2), section.search .product-grid > *:nth-child(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
}
@media screen and (min-width: 64em) {
.grid-four, section.search .product-grid {
-ms-grid-columns: 1fr 1fr 1fr 1fr;
-ms-grid-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid-four > *:nth-child(1), section.search .product-grid > *:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.grid-four > *:nth-child(2), section.search .product-grid > *:nth-child(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
.grid-four > *:nth-child(3), section.search .product-grid > *:nth-child(3) {
-ms-grid-column: 3;
-ms-grid-row: 1;
}
.grid-four > *:nth-child(4), section.search .product-grid > *:nth-child(4) {
-ms-grid-column: 4;
-ms-grid-row: 1;
}
}
.grid-three {
display: -ms-grid;
display: grid;
grid-gap: 2rem;
-ms-grid-columns: 100%;
-ms-grid-rows: 1fr;
grid-template-columns: 100%;
}
@media screen and (min-width: 27em) {
.grid-three {
-ms-grid-columns: 1fr 1fr;
-ms-grid-rows: 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: 64em) {
.grid-three {
grid-gap: 3rem;
}
}
@media screen and (min-width: 64em) {
.grid-three {
-ms-grid-columns: 1fr 1fr 1fr;
-ms-grid-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
.grid-three > *:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.grid-three > *:nth-child(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
.grid-three > *:nth-child(3) {
-ms-grid-column: 3;
-ms-grid-row: 1;
}
}
.grid-two {
display: -ms-grid;
display: grid;
grid-gap: 2rem;
-ms-grid-columns: 100%;
-ms-grid-rows: 1fr;
grid-template-columns: 100%;
}
@media screen and (min-width: 48em) {
.grid-two {
grid-gap: 3rem;
-ms-grid-columns: 1fr 1fr;
-ms-grid-rows: 1fr;
grid-template-columns: 1fr 1fr;
}
.grid-two > *:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.grid-two > *:nth-child(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
}
.grid-column-gap-only {
row-gap: 0;
}
.hidden {
position: absolute;
display: block;
margin: 0 !important;
padding: 0;
visibility: hidden;
opacity: 0;
overflow: hidden;
transition: all 125ms ease-in-out;
max-height: 0;
}
.visible, section.order-portal footer.cart-footer {
display: block !important;
visibility: visible !important;
opacity: 1;
max-height: 100%;
overflow: visible;
}
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: scroll;
}
body.no-scroll, html.no-scroll body {
overflow: hidden;
}
body > div {
display: flex;
flex-direction: column;
flex-grow: 1;
}
body > div > main {
flex-grow: 1;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 26.99875em) {
body > div > main {
margin-top: 10rem;
}
}
body.template__clean > div:not(#chat-application) {
min-height: 100%;
}
body.template__clean > div:not(#chat-application) > main {
min-height: 100%;
}
section.breadcrumbs {
padding: 2rem 0;
}
section.breadcrumbs ol li {
display: inline;
line-height: 2.5rem;
}
section.breadcrumbs ol li a {
color: #a1a1a1;
font-weight: 300;
transition: all 75ms ease-in-out;
}
section.breadcrumbs ol li a:hover {
color: #ff5137;
}
section.breadcrumbs ol li i {
color: #a1a1a1;
padding: 0 1rem;
font-size: 1.2rem;
}
footer.main {
background: #252934;
color: #ffffff;
}
footer.main:before {
content: "";
display: block;
height: 0.5rem;
width: 100%;
background: linear-gradient(90deg, #ff7d55 0.51%, #ff1810 100%);
}
footer.main .page-width:first-child {
padding-top: 3.5rem;
padding-bottom: 2.5rem;
display: -ms-grid;
display: grid;
font-size: 1.4rem;
}
@media screen and (min-width: 64em) {
footer.main .page-width:first-child {
-ms-grid-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 3rem;
}
}
footer.main .page-width:first-child section {
position: relative;
}
@media screen and (max-width: 63.99875em) {
footer.main .page-width:first-child section {
padding-bottom: 1rem;
padding-top: 2rem;
border-bottom: 0.1rem solid rgb(79.404494382, 87.9887640449, 111.595505618);
}
}
@media screen and (min-width: 64em) {
footer.main .page-width:first-child section label {
cursor: default;
}
footer.main .page-width:first-child section label:after {
display: none;
}
footer.main .page-width:first-child section .collapsible-content {
display: block;
}
}
footer.main .page-width:first-child section:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}
footer.main .page-width:first-child section:nth-child(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
footer.main .page-width:first-child section:nth-child(3) {
-ms-grid-column: 3;
-ms-grid-row: 1;
}
footer.main .page-width:first-child section:nth-child(4) {
-ms-grid-column: 4;
-ms-grid-row: 1;
}
footer.main .page-width:first-child section label {
display: flex;
justify-content: space-between;
font-size: 1.6rem;
color: #ffffff;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
footer.main .page-width:first-child section label:after {
font-size: 2.5rem;
}
footer.main .page-width:first-child section a {
color: #ffffff;
text-decoration: none;
font-weight: 300;
}
footer.main .page-width:first-child section ul,
footer.main .page-width:first-child section p,
footer.main .page-width:first-child section.product-detail > header .page-width div.product-summary div.short-description {
list-style: none;
padding: 0;
margin: 0;
}
footer.main .page-width:first-child section ul li a,
footer.main .page-width:first-child section p li a,
footer.main .page-width:first-child section.product-detail > header .page-width div.product-summary div.short-description li a {
display: block;
padding: 0.2rem 0;
font-weight: 300;
}
footer.main .page-width:first-child section ul li a:hover,
footer.main .page-width:first-child section p li a:hover,
footer.main .page-width:first-child section.product-detail > header .page-width div.product-summary div.short-description li a:hover {
text-decoration: underline;
}
footer.main .page-width:first-child section.contact {
border-bottom: 0;
}
footer.main .page-width:first-child section.contact a {
line-height: 3rem;
}
footer.main .page-width:first-child section.contact a i {
margin-right: 0.5rem;
width: 2rem;
font-size: 1.8rem;
vertical-align: middle;
text-align: center;
}
footer.main .page-width:first-child section.contact p, footer.main section.product-detail > header .page-width:first-child section.contact div.product-summary div.short-description, section.product-detail > header footer.main .page-width:first-child section.contact div.product-summary div.short-description, footer.main section.product-detail > header .page-width:first-child div.product-summary section.contact div.short-description, section.product-detail > header footer.main .page-width:first-child div.product-summary section.contact div.short-description {
margin-top: 1.6rem;
color: #aaa;
font-size: 1.4rem;
}
footer.main .page-width:first-child section.contact p.newsletter, footer.main section.product-detail > header .page-width:first-child section.contact div.product-summary div.newsletter.short-description, section.product-detail > header footer.main .page-width:first-child section.contact div.product-summary div.newsletter.short-description, footer.main section.product-detail > header .page-width:first-child div.product-summary section.contact div.newsletter.short-description, section.product-detail > header footer.main .page-width:first-child div.product-summary section.contact div.newsletter.short-description {
color: #ff5137;
}
footer.main .page-width:first-child section.contact p.newsletter a, footer.main section.product-detail > header .page-width:first-child section.contact div.product-summary div.newsletter.short-description a, section.product-detail > header footer.main .page-width:first-child section.contact div.product-summary div.newsletter.short-description a, footer.main section.product-detail > header .page-width:first-child div.product-summary section.contact div.newsletter.short-description a, section.product-detail > header footer.main .page-width:first-child div.product-summary section.contact div.newsletter.short-description a {
color: #ff5137;
text-decoration: underline;
}
footer.main .page-width:first-child section.contact ul {
margin-top: 1.6rem;
}
footer.main .page-width:first-child section.contact ul:first-child {
margin-top: 0;
}
footer.main .page-width:first-child section.social {
border-bottom: 0;
text-align: center;
}
@media screen and (min-width: 64em) {
footer.main .page-width:first-child section.social {
text-align: left;
}
}
@media screen and (max-width: 63.99875em) {
footer.main .page-width:first-child section.social label {
display: none;
}
}
footer.main .page-width:first-child section.social a {
display: inline-block;
margin: 0.5rem 1.5rem 0.5rem 0;
font-size: 2.4rem;
}
footer.main .page-width:first-child section.social a:last-child {
margin-right: 0;
}
footer.main .subfooter {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 1.5rem;
font-size: 1.2rem;
line-height: 1.8rem;
}
@media screen and (min-width: 64em) {
footer.main .subfooter {
padding-top: 1.5rem;
}
footer.main .subfooter:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 3rem;
right: 3rem;
height: 0.1rem;
background: rgba(255, 255, 255, 0.1);
}
}
footer.main .subfooter section {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
}
@media screen and (max-width: 63.99875em) {
footer.main .subfooter section {
order: 1;
justify-content: center;
margin-bottom: 1.5rem;
}
}
footer.main .subfooter section a,
footer.main .subfooter section div {
display: inline-block;
margin-right: 5%;
color: #aaa;
font-weight: 300;
}
footer.main .subfooter section.payment-providers {
display: flex;
}
@media screen and (max-width: 63.99875em) {
footer.main .subfooter section.payment-providers {
order: 0;
}
}
@media screen and (min-width: 64em) {
footer.main .subfooter section.payment-providers {
justify-content: flex-end;
}
}
footer.main .subfooter section.payment-providers img {
margin-left: 3%;
height: 2rem;
object-fit: contain;
}
footer.main .subfooter section.payment-providers img.paypal {
max-width: 4.7rem;
}
header.main {
position: static;
z-index: 99;
top: 0;
width: 100%;
padding-top: 3.3rem;
transition-property: height, box-shadow;
transition-duration: 0.15s, 0.1s;
transition-timing-function: ease-out-quad;
background: #ffffff;
}
@media screen and (max-width: 26.99875em) {
header.main {
padding-top: 0rem;
}
}
@media screen and (max-width: 63.99875em) {
header.main {
position: fixed;
}
}
@media screen and (min-width: 64em) {
header.main.scroll {
position: fixed;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}
header.main.scroll .pre-header {
top: -100%;
}
header.main.scroll > section {
padding-top: 0;
}
}
header.main.minimal {
border-bottom: 0.1rem solid #f9f9f9;
}
header.main.minimal:before {
display: none;
}
@media screen and (min-width: 64em) {
header.main:hover + main {
position: relative;
z-index: -2;
}
}
@media screen and (max-width: 63.99875em) {
header.main + main {
margin-top: 10rem;
}
}
header.main .pre-header {
position: relative;
top: 0;
display: block;
padding-top: 1.4rem;
padding-bottom: 1.4rem;
background: #f9f9f9;
text-align: center;
margin-bottom: 0;
transition: top 0.1s ease-in-out;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
@media screen and (min-width: 64em) {
header.main .pre-header {
position: absolute;
width: 100%;
}
}
header.main .pre-header__link {
display: inline-block;
width: 100%;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
font-size: 1.5rem !important;
color: #000000;
font-weight: 300;
margin-top: 1.2rem;
}
header.main .pre-header__link:hover {
color: #ff5137;
}
header.main .pre-header__link .fa-check:before {
color: #00b900;
}
header.main .pre-header__link span {
display: none;
}
@media screen and (min-width: 27em) {
header.main .pre-header__link span {
display: inline;
}
}
@media screen and (min-width: 64em) {
header.main .pre-header__link span {
display: none;
}
}
@media screen and (min-width: 80em) {
header.main .pre-header__link span {
display: inline;
}
}
header.main .pre-header__link:first-of-type {
display: none;
}
header.main .pre-header__link:last-of-type {
display: none;
}
header.main .pre-header__link a {
display: none;
}
@media screen and (min-width: 64em) {
header.main .pre-header__link {
width: 80%;
text-align: center;
}
header.main .pre-header__link:first-of-type {
display: inline-block;
text-align: center;
}
header.main .pre-header__link:last-of-type {
display: inline-block;
text-align: center;
}
}
@media screen and (min-width: 80em) {
header.main .pre-header__link a {
display: inline-block;
}
}
header.main .pre-header a {
display: inline-block;
vertical-align: text-top;
}
header.main .pre-header a img {
display: block;
margin-left: 0.5rem;
height: 1.4rem;
}
header.main > section {
display: flex;
justify-content: space-between;
align-items: stretch;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
background: #ffffff;
transition: all 0.1s ease-in-out;
}
@media screen and (min-width: 64em) {
header.main > section {
padding-top: 3.1rem;
box-shadow: none;
}
}
header.main > section div.main-menu-left {
display: flex;
}
header.main > section div.main-menu-left figure.logo {
display: flex;
align-items: center;
margin: 2rem 0;
width: 6rem;
}
@media screen and (min-width: 27em) {
header.main > section div.main-menu-left figure.logo {
width: 9rem;
}
}
@media screen and (min-width: 64em) {
header.main > section div.main-menu-left figure.logo {
margin: 0 3vw 0 0;
width: 11rem;
}
}
header.main > section div.main-menu-left figure.logo.logo-nl {
width: 9rem;
}
@media screen and (min-width: 64em) {
header.main > section div.main-menu-left figure.logo.logo-nl {
width: 12rem;
}
}
header.main > section div.main-menu-left figure.logo a,
header.main > section div.main-menu-left figure.logo img {
display: block;
width: 100%;
}
nav.main-menu {
display: flex;
position: relative;
}
@media screen and (min-width: 64em) {
nav.main-menu ul {
list-style: none;
font-size: 1.6rem;
}
nav.main-menu ul li.back-to-parent, nav.main-menu ul li.home {
display: none;
}
nav.main-menu ul li a {
color: #000000;
white-space: nowrap;
cursor: pointer;
}
nav.main-menu ul li a.active, nav.main-menu ul li a:hover {
color: #ff5137 !important;
}
nav.main-menu ul li a.parent {
display: none;
}
nav.main-menu ul li i {
display: none;
}
nav.main-menu ul.level-1 {
display: flex;
margin-bottom: 0;
}
nav.main-menu ul.level-1 > li {
margin: 0 2rem;
}
nav.main-menu ul.level-1 > li.customer-service {
display: none;
}
nav.main-menu ul.level-1 > li:hover ul.level-2 {
left: 0;
right: 0;
transition: right 0s ease-out, left 0s ease-out;
}
nav.main-menu ul.level-1 > li:hover ul.level-2:before {
transform: scaleY(1);
transition: transform 150ms ease-out;
}
nav.main-menu ul.level-1 > li:hover ul.level-2 li {
opacity: 1;
}
nav.main-menu ul.level-1 > li > a {
display: block;
padding: 2.5rem 0rem;
font-size: 1.6rem;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
nav.main-menu ul.level-1 > li ul.level-2 {
position: absolute;
left: 999rem;
right: -999rem;
display: flex;
transition: right 0s ease-out 300ms, left 0s ease-out 300ms;
padding-top: 2rem;
margin-top: -2rem;
}
nav.main-menu ul.level-1 > li ul.level-2:before {
content: "";
position: absolute;
z-index: -1;
display: block;
background: #f9f9f9;
left: -200rem;
right: -200rem;
top: 2rem;
bottom: 0;
transition: transform 150ms ease-out 150ms;
transform: scaleY(0);
transform-origin: 0% 0%;
}
nav.main-menu ul.level-1 > li ul.level-2 > li {
transition: all 150ms ease-out;
opacity: 0;
}
nav.main-menu ul.level-1 > li ul.level-2 > li:hover .mega-menu {
left: -22.7rem;
right: 0;
transition: right 0s ease-out, left 0s ease-out;
}
nav.main-menu ul.level-1 > li ul.level-2 > li:hover .mega-menu:after {
transform: scaleY(1);
transition: transform 150ms ease-out, box-shadow 300ms ease-out 300ms;
}
nav.main-menu ul.level-1 > li ul.level-2 > li:hover .mega-menu section {
opacity: 1;
}
nav.main-menu ul.level-1 > li ul.level-2 > li > a {
display: block;
padding: 1rem 2rem;
font-size: 1.4rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
nav.main-menu ul.level-1 > li ul.level-2 > li > a i {
display: none;
}
nav.main-menu ul.level-1 > li ul.level-2 > li .mega-menu {
position: absolute;
left: 999rem;
right: -999rem;
padding: 3.5rem 3rem 1.5rem;
width: 126rem;
transition: right 0s ease-out 300ms, left 0s ease-out 300ms;
}
nav.main-menu ul.level-1 > li ul.level-2 > li .mega-menu:after {
content: "";
position: absolute;
z-index: 1;
display: block;
background: #ffffff;
left: -200rem;
right: -200rem;
top: 0;
bottom: 0;
transition: transform 150ms ease-out 150ms, box-shadow 150ms ease-out 150ms;
transform: scaleY(0);
transform-origin: 0% 0%;
box-shadow: 0;
}
nav.main-menu ul.level-1 > li ul.level-2 > li .mega-menu header {
display: none;
}
nav.main-menu ul.level-1 > li ul.level-2 > li .mega-menu section {
position: relative;
z-index: 3;
display: flex;
justify-content: flex-start;
font-size: 1.4rem;
line-height: 2.1rem;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav.main-menu ul.level-1 > li ul.level-2 > li .mega-menu section .featured {
flex-basis: 25%;
}
nav.main-menu ul.level-1 > li ul.level-2 > li .mega-menu section .featured h5 {
margin-bottom: 1rem;
}
nav.main-menu ul.level-1 > li ul.level-2 > li .mega-menu section .featured ul li a {
display: block;
padding: 0.5rem 0;
font-weight: 300;
font-size: 1.4rem;
}
nav.main-menu ul.level-1 > li ul.level-2 > li .mega-menu section .categories {
display: flex;
flex-wrap: wrap;
}
nav.main-menu ul.level-1 > li ul.level-2 > li .mega-menu section .categories > a {
display: flex;
flex-direction: column;
align-items: center;
width: 13rem;
margin: 0 2rem 2rem;
font-weight: 300;
white-space: normal;
}
nav.main-menu ul.level-1 > li ul.level-2 > li .mega-menu section .categories > a:hover figure {
transform: scale(1.06);
}
nav.main-menu ul.level-1 > li ul.level-2 > li .mega-menu section .categories > a figure {
margin-bottom: 1.3rem;
padding: 1rem;
background: #f9f9f9;
transform: scale(1);
transition: transform 150ms ease-in-out;
}
nav.main-menu ul.level-1 > li ul.level-2 > li .mega-menu section .categories > a figure img {
display: block;
width: 100%;
height: auto;
}
nav.main-menu ul.level-1 > li ul.level-2 > li .mega-menu section .categories > a span {
width: 100%;
}
}
div.mobile-menu-buttons {
display: flex;
align-items: center;
margin-right: 2.5rem;
}
div.mobile-menu-buttons .menu-button--back {
display: none;
}
@media screen and (min-width: 64em) {
div.mobile-menu-buttons {
display: none;
}
}
@media screen and (max-width: 63.99875em) {
nav.main-menu {
display: none;
position: fixed;
flex-direction: column;
justify-content: center;
z-index: -1;
overflow-y: auto;
overflow-x: hidden;
top: 8.2rem;
bottom: 0;
left: 0;
right: 0;
max-height: initial !important;
background: #ffffff;
font-size: 1.8rem;
}
nav.main-menu.active {
display: flex;
overflow-x: hidden;
margin-top: 5rem;
}
nav.main-menu ul {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
background: #ffffff;
transition: transform 300ms ease-in-out;
}
nav.main-menu ul li.back-to-parent {
position: relative;
padding: 1.5rem 1rem 2.5rem;
color: #a1a1a1;
}
nav.main-menu ul li.back-to-parent i {
position: absolute;
right: auto;
left: -1rem;
}
nav.main-menu ul li.active > ul, nav.main-menu ul li.active > div {
transform: translateX(-100%);
}
nav.main-menu ul li a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 1rem;
color: #000000;
font-weight: 400;
cursor: pointer;
}
nav.main-menu ul li a.active, nav.main-menu ul li a:hover {
color: #ff5137 !important;
}
nav.main-menu ul li a.parent {
justify-content: flex-start;
}
nav.main-menu ul li a.parent i {
margin-left: 1.3rem;
}
nav.main-menu ul li a i {
margin-left: 0.5rem;
font-size: 1.5rem;
}
nav.main-menu ul.level-1 {
display: flex;
flex-direction: column;
padding: 5rem;
z-index: 2;
}
nav.main-menu ul.level-1 > li:not(.submenu) {
order: 2;
}
nav.main-menu ul.level-1 > li:not(.submenu) a {
font-size: 2rem;
font-weight: 300;
}
nav.main-menu ul.level-1 > li > a {
font-size: 2.4rem;
font-weight: 400;
}
nav.main-menu ul.level-1 > li ul.level-2 {
left: 100%;
right: -100%;
z-index: 3;
padding: 2.5rem 2.5rem 2.5rem 4rem;
}
nav.main-menu ul.level-1 > li ul.level-2 > li div.mega-menu {
position: absolute;
top: 0;
bottom: 0;
left: 100%;
right: -100%;
width: 100%;
padding: 2rem;
background: #ffffff;
transition: transform 300ms ease-in-out;
}
nav.main-menu ul.level-1 > li ul.level-2 > li div.mega-menu header {
position: relative;
padding: 2rem 2.8rem;
font-size: 1.8rem;
color: #a1a1a1;
}
nav.main-menu ul.level-1 > li ul.level-2 > li div.mega-menu header i {
position: absolute;
left: 1rem;
}
nav.main-menu ul.level-1 > li ul.level-2 > li div.mega-menu div.featured {
display: none;
}
nav.main-menu ul.level-1 > li ul.level-2 > li div.mega-menu section.page-width {
padding: 0;
}
nav.main-menu ul.level-1 > li ul.level-2 > li div.mega-menu section.page-width .categories {
display: flex;
flex-wrap: wrap;
}
nav.main-menu ul.level-1 > li ul.level-2 > li div.mega-menu section.page-width .categories a {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: initial;
margin: 1rem;
padding: 0;
width: calc(50% - 2rem);
white-space: normal;
font-size: 1.5rem;
font-weight: 300;
}
nav.main-menu ul.level-1 > li ul.level-2 > li div.mega-menu section.page-width .categories a figure {
margin-bottom: 1rem;
padding: 0.5rem;
background: #f9f9f9;
}
nav.main-menu ul.level-1 > li ul.level-2 > li div.mega-menu section.page-width .categories a figure img {
width: 100%;
height: auto;
}
nav.main-menu ul.level-1 > li ul.level-2 > li div.mega-menu section.page-width .categories a span {
width: 100%;
}
}
.secondary-menu {
display: flex;
}
.secondary-menu li {
display: flex;
align-items: center;
position: relative;
}
@media screen and (max-width: 63.99875em) {
.secondary-menu li.customer-service {
display: none;
}
}
.secondary-menu li a {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0.5rem;
color: #000000;
}
@media screen and (min-width: 48em) {
.secondary-menu li a {
padding: 0 1rem;
}
}
.secondary-menu li a:hover, .secondary-menu li a.active {
color: #ff5137;
}
.secondary-menu li a i {
font-size: 2.5rem;
}
@media screen and (min-width: 64em) {
.secondary-menu li a i {
margin: 0.3rem 0 0.8rem;
font-size: 2rem;
}
}
.secondary-menu li a span {
font-size: 1rem;
line-height: 1.2rem;
}
@media screen and (max-width: 63.99875em) {
.secondary-menu li a span span {
display: none;
}
}
.secondary-menu li a i.header-cart-button-count {
position: absolute;
display: block;
right: 0;
top: 2rem;
width: 2rem;
height: 2rem;
background: #ff5137;
border-radius: 100%;
color: #ffffff;
font-weight: 700;
font-size: 1.2rem;
line-height: 2.3rem;
text-align: center;
}
@media screen and (min-width: 64em) {
.secondary-menu li a i.header-cart-button-count {
right: 1.5rem;
top: 0.5rem;
}
}
.secondary-menu li a[data-modal=search] {
color: #ff5137;
}
.secondary-menu li a[data-modal=search]:hover {
color: #ff1810;
}
.page-width {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 123rem;
padding-left: 2rem;
padding-right: 2rem;
}
@media screen and (min-width: 64em) {
.page-width {
padding-left: 3rem;
padding-right: 3rem;
}
}
.modal-auth form {
margin-top: 1.6rem;
}
.modal-auth form > section {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.modal-auth form > section a:not(.button) {
text-align: right;
margin-left: 1rem;
}
.modal-auth form > input + .input-group,
.modal-auth form > input + input,
.modal-auth form > input + .password-field,
.modal-auth form > .password-field + .password-field,
.modal-auth form .input-group + input {
margin-top: 1.6rem;
}
.modal-auth form > input {
width: 100%;
}
.modal-auth a:not(.button) {
text-decoration: underline;
}
.modal-auth p, .modal-auth section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .modal-auth div.short-description {
margin: 0;
}
.modal-auth p.info, .modal-auth section.product-detail > header .page-width div.product-summary div.info.short-description, section.product-detail > header .page-width div.product-summary .modal-auth div.info.short-description {
margin-top: 1.6rem;
color: #a1a1a1;
}
.modal-auth .button {
margin: 2rem 0;
}
.modal-auth hr {
display: block;
margin: 3rem 0;
width: 100%;
height: 0.1rem;
border: none;
background: #eeeeee;
}
.modal-auth footer {
font-weight: 300;
}
.modal-auth footer p, .modal-auth footer section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .modal-auth footer div.short-description,
.modal-auth footer li {
font-size: 1.4rem;
}
.modal-auth footer li {
position: relative;
margin: 0.5rem 0;
padding-left: 2.5rem;
line-height: 2rem;
}
.modal-auth footer li i {
position: absolute;
left: 0;
top: 0.3rem;
}
.modal-auth .responder-image {
position: absolute;
z-index: 3;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #ffffff;
text-align: center;
}
.modal-auth .responder-image img {
display: block;
position: absolute;
width: 7.5rem;
height: 9rem;
left: 50%;
top: 21.5rem;
transform: translate(-50%, -50%);
}
.modal-auth .responder-image h4 {
display: block;
position: absolute;
left: 2rem;
right: 2rem;
text-align: center;
top: 29rem;
}
.modal-auth .responder-image:not(.hidden) + p, .modal-auth section.product-detail > header .page-width div.product-summary .responder-image:not(.hidden) + div.short-description, section.product-detail > header .page-width div.product-summary .modal-auth .responder-image:not(.hidden) + div.short-description {
display: none !important;
opacity: 0 !important;
}
.modal-auth .customer-type {
display: flex;
justify-content: space-between;
}
.modal-auth .customer-type label {
display: flex;
justify-content: space-between;
align-items: center;
width: calc(50% - 1rem);
padding: 1rem 1.2rem;
border: 0.1rem solid #eeeeee;
border-radius: 0.4rem;
color: #a1a1a1;
font-size: 1.4rem;
transition: all 125ms ease-in-out;
cursor: pointer;
}
.modal-auth .customer-type label i {
opacity: 0;
color: #7cc461;
font-size: 1.8rem;
transition: all 125ms ease-in-out;
}
.modal-auth .customer-type input {
position: absolute;
opacity: 0;
}
.modal-auth .customer-type input:checked + label {
border: 0.1rem solid #a1a1a1;
color: #000000;
}
.modal-auth .customer-type input:checked + label i {
opacity: 1;
}
.address-card {
display: block;
position: relative;
padding: 1.6rem;
border-radius: 0.6rem;
border: 0.1rem solid #eeeeee;
margin-bottom: 2.4rem;
cursor: pointer;
transition: all 125ms ease-in-out;
}
.address-card span {
display: block;
font-weight: 300;
font-size: 1.6rem;
line-height: 1.4;
}
.address-card i {
position: absolute;
display: block;
text-align: right;
right: 1.6rem;
top: 1.6rem;
color: #a1a1a1;
font-size: 2.4rem;
}
.address-card:hover {
margin-top: -0.5rem;
margin-bottom: 2.6rem;
border-bottom: 0.3rem solid #ff5137;
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.15);
}
.address-card:hover i {
color: #ff5137;
}
a.banner-product {
display: block;
width: 14rem;
}
@media screen and (min-width: 64em) {
a.banner-product {
width: 25rem;
}
}
a.banner-product:hover figure {
transform: scale(1.03);
}
a.banner-product figure {
position: relative;
margin-bottom: 1.5rem;
width: 100%;
height: 19.5rem;
background: #f9f9f9;
background-size: cover;
box-shadow: 0;
transition: all 125ms ease-in-out;
transform: scale(1);
}
@media screen and (min-width: 64em) {
a.banner-product figure {
height: 35rem;
}
}
a.banner-product figure label {
position: absolute;
left: 2.5rem;
bottom: 2.5rem;
padding: 0.6rem 1.5rem;
color: #ffffff;
background: linear-gradient(90deg, #ff7d55 0.51%, #ff1810 100%);
font-weight: 500;
font-size: 1.2rem;
}
@media screen and (max-width: 26.99875em) {
a.banner-product figure label {
left: 0;
bottom: 0.7rem;
transform: scale(0.75);
}
}
a.banner-product figure picture {
max-width: 100%;
height: 100%;
}
a.banner-product figure picture img {
object-fit: cover;
object-position: 20% 50%;
}
.banner {
position: relative;
}
@media screen and (min-width: 48em) {
.banner {
padding: 6rem 0;
min-height: 25rem;
height: 60vh;
}
}
@media screen and (min-width: 64em) {
.banner {
min-height: 35rem;
}
}
@media screen and (min-width: 48em) {
.banner > picture {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
}
.banner .page-width {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
}
@media screen and (max-width: 47.99875em) {
.banner .page-width {
padding: 0;
}
}
@media screen and (min-width: 48em) {
.banner .page-width {
align-items: flex-start;
}
}
.banner .page-width.right {
align-items: flex-end;
}
.banner .page-width blockquote {
position: relative;
margin: 0;
padding: 2.5rem 3rem 4.6rem;
width: 100%;
background-image: linear-gradient(#ffffff 80%, #eeeeee 100%);
}
@media screen and (min-width: 48em) {
.banner .page-width blockquote {
background: #ffffff;
max-width: 45rem;
width: 70%;
}
}
@media screen and (min-width: 64em) {
.banner .page-width blockquote {
padding: 2.5rem 5rem 5.6rem;
}
}
.banner .page-width blockquote.dark {
color: #ffffff;
background: #252934;
}
@media screen and (min-width: 48em) {
.banner .page-width blockquote.dark {
background: #252934;
}
}
.banner .page-width blockquote.dark h1,
.banner .page-width blockquote.dark h3 {
font-size: 3rem;
line-height: 4.1rem;
margin: 0 0 0.5rem;
color: #ffffff;
}
.banner .page-width blockquote.dark a.button {
box-shadow: 0 1rem 4rem 0 rgba(0, 0, 0, 0.3);
}
.banner .page-width blockquote a.button {
position: absolute;
top: calc(100% - 3rem);
margin-right: 4rem;
}
.cards {
padding: 7rem 0;
}
@media screen and (max-width: 47.99875em) {
.cards .grid-two {
grid-gap: 2rem;
}
}
.cards a.card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 5rem 3rem;
min-height: 26rem;
background-color: #f9f9f9;
border-radius: 0.6rem;
text-decoration: none;
transition: all 125ms ease-in-out;
box-shadow: 0;
overflow: hidden;
}
@media screen and (min-width: 48em) {
.cards a.card {
padding: 4.5rem 5rem;
}
}
@media screen and (min-width: 80em) {
.cards a.card {
padding-right: 50%;
}
}
@media screen and (max-width: 47.99875em) {
.cards a.card:before {
content: "";
position: absolute;
display: block;
background: linear-gradient(30deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.3));
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
border-radius: 0.6rem;
}
}
.cards a.card:hover {
box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.15);
}
.cards a.card:hover span {
text-decoration: underline;
}
.cards a.card picture {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.cards a.card h4,
.cards a.card span {
position: relative;
z-index: 2;
}
.cards a.card span {
font-size: 1.6rem;
color: #000000;
}
.cards a.card.xs-txt-c-white {
color: #ffffff;
}
.cards a.card.xs-txt-c-white:before {
background: linear-gradient(30deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}
.cards a.card.xs-txt-c-white span,
.cards a.card.xs-txt-c-white h4 {
color: #ffffff;
}
.carousel {
position: relative;
display: flex;
height: 48rem;
}
.carousel-slider__wrapper {
height: inherit;
}
@media screen and (min-width: 27em) {
.carousel-slider__wrapper {
overflow: hidden;
}
}
.carousel-slider__wrapper--thumbnails {
flex-shrink: 0;
display: flex;
align-items: center;
margin-right: 2rem;
}
@media screen and (max-width: 26.99875em) {
.carousel-slider__wrapper--thumbnails {
display: none;
}
}
.carousel-slider__wrapper--thumbnails div.thumbnail-navigation {
position: relative;
}
.carousel-slider__wrapper--thumbnails div.thumbnail-navigation .navigate-up,
.carousel-slider__wrapper--thumbnails div.thumbnail-navigation .navigate-down {
padding: 0.5rem 0;
color: #eeeeee;
font-size: 2rem;
width: 100%;
text-align: center;
transition: all 125ms ease-in-out;
}
.carousel-slider__wrapper--thumbnails div.thumbnail-navigation .navigate-up.active,
.carousel-slider__wrapper--thumbnails div.thumbnail-navigation .navigate-down.active {
color: #363636;
}
.carousel-slider__wrapper--thumbnails div.thumbnail-navigation .navigate-up.active:hover,
.carousel-slider__wrapper--thumbnails div.thumbnail-navigation .navigate-down.active:hover {
color: #ff5137;
cursor: pointer;
}
.carousel-slider__wrapper--thumbnails div.thumbnail-navigation.no-overflow .navigate-up,
.carousel-slider__wrapper--thumbnails div.thumbnail-navigation.no-overflow .navigate-down {
display: none;
}
.carousel-slider__wrapper--thumbnails div.overflow {
padding: 0.5rem;
position: relative;
max-height: 35rem;
overflow-y: hidden;
}
.carousel-slider__wrapper--thumbnails ul.carousel-slider__thumbnails {
position: relative;
display: flex;
flex-direction: column;
transition: left 0.65s ease-in-out;
text-align: center;
transition: transform 125ms ease-in-out;
}
.carousel-slider__wrapper--thumbnails ul.carousel-slider__thumbnails li {
cursor: pointer;
display: block;
margin: 0 0 1rem;
width: 6rem;
height: 6rem;
border-radius: 0.6rem;
background: rgba(249, 249, 249, 0.4);
}
.carousel-slider__wrapper--thumbnails ul.carousel-slider__thumbnails li:hover img {
border-bottom-color: #ff5137;
}
.carousel-slider__wrapper--thumbnails ul.carousel-slider__thumbnails li img {
border-bottom: 0.2rem solid transparent;
user-select: none;
border-radius: 0.6rem;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transition: all 125ms ease-in-out;
}
.carousel-slider__wrapper--thumbnails ul.carousel-slider__thumbnails li.carousel-slider__thumbnail--active img {
border-bottom-color: #ff5137;
transform: scale(1.1);
}
.carousel-slider__wrapper--detail {
position: relative;
width: 100%;
height: 48rem;
}
.carousel-slider__wrapper--detail span.discount {
position: absolute;
z-index: 5;
display: inline-block;
bottom: 2rem;
left: 2rem;
padding: 0.5rem 1.2rem;
background: linear-gradient(90deg, #ff7d55 0.51%, #ff1810 100%);
color: white;
font-size: 1.5rem;
font-weight: 500;
transition: all 125ms ease-in-out;
}
.carousel-slider__wrapper--detail .carousel-slider__detail {
position: relative;
display: flex;
transition: left 0.45s ease-in-out;
height: 100%;
max-height: 48rem;
}
@media screen and (max-width: 26.99875em) {
.carousel-slider__wrapper--detail .carousel-slider__detail {
margin-left: -2rem;
margin-right: -2rem;
padding-left: 2rem;
width: calc(100% + 4rem) !important;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
scroll-snap-type: mandatory;
scroll-snap-points-x: repeat(100%);
scroll-snap-type: x mandatory;
}
.carousel-slider__wrapper--detail .carousel-slider__detail:after {
content: "";
display: block;
width: 0.01rem;
flex: 0 0 auto;
}
}
.carousel-slider__wrapper--detail .carousel-slider__detail li {
scroll-snap-align: start;
position: relative;
height: 100%;
flex-grow: 1;
}
@media screen and (max-width: 26.99875em) {
.carousel-slider__wrapper--detail .carousel-slider__detail li {
flex-shrink: 0;
width: 85%;
margin-right: 5%;
}
}
.carousel-slider__wrapper--detail .carousel-slider__detail li div,
.carousel-slider__wrapper--detail .carousel-slider__detail li div img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.carousel-slider__wrapper--detail .carousel-slider__detail li div {
background: #f9f9f9;
border-radius: 0.6rem;
}
.carousel-slider__wrapper--detail .carousel-slider__detail li div img {
object-fit: cover;
object-position: 50% 25%;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
label.checkbox {
position: relative;
display: block;
padding: 0.5rem 0 0.5rem 3rem;
font-weight: 300;
cursor: pointer;
transition: all 75ms ease-in-out;
user-select: none;
}
label.checkbox input {
border: 0;
visibility: hidden;
width: 0;
height: 0;
}
label.checkbox .checkmark {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0.7rem;
left: 0;
width: 1.6rem;
height: 1.6rem;
border-radius: 0.2rem;
transition: all 75ms ease-in-out;
box-shadow: inset 0 0 0 0.1rem #cccccc;
}
label.checkbox .checkmark:after {
content: "\F00C";
position: absolute;
font: var(--fa-font-solid);
font-size: 1.3rem;
color: #ffffff;
}
label.checkbox:hover {
color: #ff5137;
}
label.checkbox:hover .checkmark {
box-shadow: inset 0 0 0 0.1rem #ff5137;
}
label.checkbox input:checked ~ .checkmark {
background: linear-gradient(90deg, #ff7d55 0.51%, #ff1810 100%);
box-shadow: none;
}
div.contact-options a.contact-option {
display: block;
padding: 0.5rem 0;
font-size: 1.6rem;
}
div.contact-options a.contact-option i,
div.contact-options a.contact-option span {
transition: all 75ms ease-in-out;
}
div.contact-options a.contact-option i {
margin-right: 0.5rem;
font-size: 2rem;
vertical-align: middle;
}
div.contact-options a.contact-option span {
color: #000000;
}
.contact-small-message {
color: #363636;
font-size: 0.9em;
}
section.discover-list {
padding: 5rem 0;
}
@media screen and (max-width: 63.99875em) {
section.discover-list {
padding-bottom: 0;
}
}
section.discover-list h2 {
margin-bottom: 4rem;
}
section.discover-list section {
display: flex;
margin-left: -2rem;
margin-right: -2rem;
padding-left: 2rem;
padding-bottom: 6rem;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
section.discover-list section:after {
content: "";
display: block;
width: 0.01rem;
flex: 0 0 auto;
}
@media screen and (min-width: 64em) {
section.discover-list section {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 3rem;
overflow-x: visible;
margin-left: 0;
margin-right: 0;
padding-left: 0;
}
}
a.discover-item {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 3rem;
width: 100%;
min-width: 15rem;
height: 17.5rem;
text-decoration: none;
}
@media screen and (max-width: 26.99875em) {
a.discover-item {
min-width: 45vw;
}
}
@media screen and (min-width: 64em) {
a.discover-item {
height: 19.5rem;
}
}
a.discover-item:hover h3 {
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.15);
color: #ff5137;
}
a.discover-item.dark h3 {
color: #ffffff;
background-color: #252934;
}
a.discover-item picture {
height: 100%;
width: 100%;
border-radius: 0.6rem;
overflow: hidden;
}
a.discover-item h3 {
margin: -2rem 1rem 0;
padding: 1.2rem 2.5rem;
font-size: 1.8rem;
line-height: 2.8rem;
background: #ffffff;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
transition: all 125ms ease-in-out;
}
@media screen and (max-width: 63.99875em) {
a.discover-item h3 {
font-size: 1.6rem;
line-height: 2.3rem;
}
}
.faqitem {
display: block;
position: relative;
padding: 1.3rem 4rem 1.3rem 0;
font-size: 1.6rem;
line-height: 2.4rem;
cursor: pointer;
text-decoration: none;
}
.faqitem:before, .faqitem:after {
content: "";
display: block;
position: absolute;
bottom: 0;
height: 0.1rem;
width: 100%;
}
.faqitem:after {
transform: scaleX(0);
transform-origin: top left;
transition: transform 200ms ease-in-out;
background: #ff5137;
}
.faqitem:before {
background: #eeeeee;
}
.faqitem:hover:after {
transform: scaleX(1);
}
.faqitem:hover > span {
color: #ff5137;
}
.faqitem:hover > span i {
color: #ff5137;
}
.faqitem:hover > span i.fa-arrow-right {
transform: translateX(0.5rem);
}
.faqitem > span {
padding-right: 3rem;
color: #000000;
text-decoration: none;
transition: color 200ms ease-in-out;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.faqitem > span i {
font-style: normal;
position: absolute;
top: 1.8rem;
right: 2rem;
color: #a1a1a1;
}
.faqitem i.fa-arrow-right {
transform: translateX(0);
transition: transform 200ms ease-in-out;
}
.faqitem input[type=checkbox] {
position: absolute;
visibility: hidden;
}
.faqitem input[type=checkbox]:checked + span i {
color: #000000;
}
.faqitem input[type=checkbox]:checked + span i.fa-plus {
display: none;
}
.faqitem input[type=checkbox]:checked ~ div.collapsible-content {
display: block;
}
.faqitem .collapsible-content {
display: none;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 0.1rem dashed #eeeeee;
font-weight: 300;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.faqitem .collapsible-content .content-inner ul,
.faqitem .collapsible-content .content-inner ol {
list-style: initial;
margin: 0 0 1.6rem 3rem;
}
.faqitem .collapsible-content .content-inner ul li,
.faqitem .collapsible-content .content-inner ol li {
margin: 0.5rem 0;
}
.faqitem .faq-video {
position: relative;
height: 0;
padding-top: 56.25%;
width: 100%;
}
.faqitem .faq-video iframe {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.filter {
position: relative;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 0.1rem solid #eeeeee;
}
.filter label.toggle {
display: flex;
justify-content: space-between;
margin: 0 0 1rem;
font-size: 1.6rem;
}
.filter label.toggle:after {
content: "\F067";
}
.filter input.toggle:checked + label.toggle:after {
content: "\F068";
}
.filter ul li {
cursor: pointer;
}
.button-filter {
display: block;
margin-top: 2rem;
width: 100%;
text-align: left;
position: sticky;
bottom: 2rem;
}
div.flush-cache {
position: fixed;
top: 30px;
right: 30px;
z-index: 10000000;
}
div.flush-cache i.fa-recycle {
font-size: 1rem;
cursor: pointer;
color: green;
}
section.image-slider {
padding: 5rem 0;
}
@media screen and (max-width: 26.99875em) {
section.image-slider .page-width {
padding-right: 0;
padding-left: 0;
}
}
section.image-slider .slider {
position: relative;
width: 100%;
overflow-x: scroll;
}
@media screen and (min-width: 48em) {
section.image-slider .slider {
padding-left: 1.5rem;
overflow-x: visible;
}
}
@media screen and (max-width: 26.99875em) {
section.image-slider .slider .slider-products {
padding-right: 2rem;
width: auto !important;
}
}
section.image-slider .slider a.slider-button {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
top: 15rem;
margin: 0 -3.5rem;
width: 7rem;
height: 7rem;
background: #ffffff;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
transition: all 125ms ease-in-out;
}
@media screen and (max-width: 26.99875em) {
section.image-slider .slider a.slider-button {
display: none;
}
}
section.image-slider .slider a.slider-button.invisible {
visibility: hidden;
opacity: 0;
}
section.image-slider .slider a.slider-button.right {
right: 0;
}
section.image-slider .slider a.slider-button.left {
left: 0;
}
section.image-slider .slider a.slider-button i {
font-size: 3rem;
color: #000000;
}
section.image-slider .slider .slider-products {
display: flex;
transition-property: margin-left;
transition-duration: 0.39s;
transition-timing-function: ease-out-quad;
}
section.image-slider .slider .slider-products .slider-product {
flex-shrink: 0;
margin-right: 1.6rem;
}
@media screen and (max-width: 47.99875em) {
section.image-slider .slider .slider-products .slider-product:first-child {
padding-left: 2rem;
}
}
section.image-slider .slider .slider-products .slider-product:last-child {
padding-right: 2rem;
}
section.inspirations {
padding: 5rem 0;
background: #f9f9f9;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
section.inspirations h2 {
margin-bottom: 4rem;
}
section.inspirations section {
display: flex;
flex-wrap: wrap;
}
section.inspirations section a {
display: block;
width: calc(50% - 2rem);
margin: 0 3rem 3rem 0;
text-decoration: none;
flex-grow: 1;
}
@media screen and (min-width: 64em) {
section.inspirations section a {
width: calc(30% - 4rem);
}
section.inspirations section a:nth-child(3n+3) {
margin-right: 0;
}
}
@media screen and (max-width: 63.99875em) {
section.inspirations section a:nth-child(2n+2) {
margin-right: 0;
}
}
section.inspirations section a:last-child {
margin-right: 0;
}
section.inspirations section a picture {
margin-bottom: 1.6rem;
height: 15rem;
box-shadow: 0;
transition: all 125ms ease-in-out;
}
@media screen and (min-width: 64em) {
section.inspirations section a picture {
height: 27rem;
}
}
section.inspirations section a picture img {
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
border-radius: 0.6rem;
}
section.inspirations section a:hover picture {
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.15);
}
section.inspirations section a:hover h4 {
color: #ff5137;
}
section.inspirations section a label.category {
color: rgb(127.5, 127.5, 127.5);
font-size: 1.4rem;
}
section.inspirations section a h4 {
margin: 0.7rem 0 2rem;
font-weight: 700;
font-size: 1.8rem;
transition: all 125ms ease-in-out;
word-break: break-word;
}
section.inspirations section a .read-more {
text-decoration: underline;
font-size: 1.6rem;
}
section.inspirations section a.inspiration-search {
padding: 0;
border-radius: 0.6rem;
background: #ffffff;
box-shadow: none;
transition: all 125ms ease-in-out;
flex-grow: 0;
overflow: hidden;
}
section.inspirations section a.inspiration-search picture img {
border-radius: 0;
}
section.inspirations section a.inspiration-search .description {
padding: 0 1.6rem;
}
section.inspirations section a.inspiration-search footer {
padding: 1.6rem;
}
@media screen and (min-width: 64em) {
section.inspirations section a.inspiration-search {
width: calc(35% - 4rem);
}
}
section.inspirations section a.inspiration-search:hover {
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.15);
}
section.inspirations section a.inspiration-search:hover picture {
box-shadow: none;
}
.link-list {
padding: 3rem 3rem 3rem 0;
background: #ffffff;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
}
.link-list.clean {
padding: 0;
background: none;
box-shadow: none;
}
.link-list.clean ul li a {
padding: 0.6rem 0;
}
.link-list.clean ul li a:before {
display: none;
}
.link-list.clean ul li a:hover, .link-list.clean ul li a:focus, .link-list.clean ul li a.active {
padding: 0.6rem 0;
text-decoration: underline;
}
.link-list h4 {
padding: 0 3rem;
}
.link-list ul li a {
position: relative;
padding: 0.6rem 4rem 0.6rem 3rem;
display: block;
color: #000000;
font-weight: 300;
transition: all 125ms ease-in-out;
}
.link-list ul li a:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0.3rem;
height: 100%;
background: #ff5137;
opacity: 0;
transition: all 125ms ease-in-out;
}
.link-list ul li a:hover, .link-list ul li a:focus, .link-list ul li a.active {
color: #ff5137;
padding: 0.6rem 3rem 0.6rem 4rem;
}
.link-list ul li a:hover:before, .link-list ul li a:focus:before, .link-list ul li a.active:before {
opacity: 1;
}
.link-list ul li a.active {
color: #ff5137;
}
section.majorteaser {
padding: 8rem 0;
}
@media screen and (max-width: 47.99875em) {
section.majorteaser {
padding: 6rem 0;
}
section.majorteaser + section.majorteaser {
padding-top: 0;
}
}
@media screen and (max-width: 47.99875em) {
section.majorteaser .page-width {
padding-left: 0;
padding-right: 0;
}
}
section.majorteaser .page-width > div {
position: relative;
display: flex;
flex-direction: column;
font-size: 1.6rem;
line-height: 2.4rem;
}
@media screen and (min-width: 48em) {
section.majorteaser .page-width > div {
flex-direction: row;
justify-content: center;
}
}
section.majorteaser .page-width > div.left a {
align-self: flex-start;
margin: -6rem 3rem 0 -0.6rem;
color: #ffffff;
background: linear-gradient(90deg, #ff7d55 0.51%, #ff1810 100%);
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 48em) {
section.majorteaser .page-width > div.left a {
order: 1;
margin: 0 -10% 6rem 3rem;
}
}
section.majorteaser .page-width > div.left a:hover {
box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.15);
}
section.majorteaser .page-width > div.left a h2,
section.majorteaser .page-width > div.left a p,
section.majorteaser section.product-detail > header .page-width > div.left a div.product-summary div.short-description,
section.product-detail > header section.majorteaser .page-width > div.left a div.product-summary div.short-description,
section.majorteaser section.product-detail > header .page-width > div.left div.product-summary a div.short-description,
section.product-detail > header section.majorteaser .page-width > div.left div.product-summary a div.short-description {
color: #ffffff;
}
@media screen and (min-width: 48em) {
section.majorteaser .page-width > div.left figure {
order: 2;
margin-top: 6rem;
width: 63%;
height: 40vh;
min-height: 40rem;
}
}
section.majorteaser .page-width > div.right a {
align-self: flex-end;
margin: -6rem -0.6rem 0 3rem;
background: #ffffff;
box-shadow: 0 3rem 5rem 0 rgba(0, 0, 0, 0.05);
}
@media screen and (min-width: 48em) {
section.majorteaser .page-width > div.right a {
margin: 6rem 3rem 0 -10%;
}
}
section.majorteaser .page-width > div.right a:hover {
box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 48em) {
section.majorteaser .page-width > div.right figure {
margin-bottom: 6rem;
width: 42%;
height: 30vh;
min-height: 30rem;
}
}
section.majorteaser .page-width > div.right .dots {
display: none;
}
section.majorteaser .page-width > div a {
display: block;
position: relative;
z-index: 3;
padding: 3rem 4rem 3rem 3rem;
max-width: 47rem;
border-radius: 0.6rem;
border: 0;
text-decoration: none;
transition: box-shadow 125ms ease-in-out;
color: #000000;
}
@media screen and (min-width: 48em) {
section.majorteaser .page-width > div a {
padding: 5rem 6rem 5rem 5rem;
min-height: 25rem;
}
}
@media screen and (min-width: 64em) {
section.majorteaser .page-width > div a {
flex-basis: 35%;
}
}
section.majorteaser .page-width > div a:hover p, section.majorteaser section.product-detail > header .page-width > div a:hover div.product-summary div.short-description, section.product-detail > header section.majorteaser .page-width > div a:hover div.product-summary div.short-description, section.majorteaser section.product-detail > header .page-width > div div.product-summary a:hover div.short-description, section.product-detail > header section.majorteaser .page-width > div div.product-summary a:hover div.short-description {
text-decoration: underline;
}
section.majorteaser .page-width > div a h2 {
font-size: 2.5rem;
line-height: 3.5rem;
margin-bottom: 2rem;
word-break: break-word;
}
@media screen and (min-width: 48em) {
section.majorteaser .page-width > div a h2 {
font-size: 3.8rem;
line-height: 4.8rem;
}
}
section.majorteaser .page-width > div a .content {
margin-bottom: 3rem;
font-weight: 300;
}
section.majorteaser .page-width > div a p, section.majorteaser section.product-detail > header .page-width > div a div.product-summary div.short-description, section.product-detail > header section.majorteaser .page-width > div a div.product-summary div.short-description, section.majorteaser section.product-detail > header .page-width > div div.product-summary a div.short-description, section.product-detail > header section.majorteaser .page-width > div div.product-summary a div.short-description {
color: #ff5137;
}
section.majorteaser .page-width > div figure {
position: relative;
z-index: 2;
min-height: 20rem;
height: 30vw;
max-height: 45rem;
background-size: cover;
}
section.majorteaser .page-width > div .dots {
position: absolute;
z-index: 1;
left: 0;
top: 15rem;
height: 23rem;
width: 25%;
background: url("/images/dots.png");
}
.modal {
position: fixed;
visibility: hidden;
opacity: 0;
display: none;
width: 100%;
height: 100%;
left: 0;
z-index: 9999;
top: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
transition-property: all, visibility, opacity;
transition-duration: 0s, 0.29s, 0.29s;
transition-delay: 0.29s, 0s, 0s;
transition-timing-function: ease;
}
.modal--visible {
display: flex;
visibility: visible;
opacity: 1;
transition-delay: 0s, 0s, 0s;
}
.modal .modal-background {
z-index: 98;
display: block;
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.7);
transform: translate3d(0, 0, -1px);
}
.modal .modal-body {
display: flex;
flex-direction: column;
position: relative;
z-index: 99;
margin: 8vh auto;
max-width: 80rem;
}
.modal .modal-body a.modal-close {
position: fixed;
z-index: 4;
right: 2.4rem;
top: 1.6rem;
font-size: 2rem;
color: #000000;
}
.modal .modal-body a.modal-close:hover {
color: #ff5137;
}
.modal .modal-body header,
.modal .modal-body .modal-content,
.modal .modal-body footer {
padding: 4rem;
}
.modal .modal-body header,
.modal .modal-body .modal-content {
background: #ffffff;
}
.modal .modal-body footer {
background: #f9f9f9;
}
.modal .modal-body header {
padding-bottom: 0;
}
.modal .modal-body header p, .modal .modal-body section.product-detail > header .page-width div.product-summary div.short-description {
font-size: 1.6rem;
}
.modal-center {
justify-content: center;
align-items: center;
}
.modal-center .modal-body {
position: relative;
max-width: 50rem;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
border-radius: 0.4rem;
overflow: hidden;
}
.modal-center .modal-body a.modal-close {
position: absolute;
}
.modal-center .modal-body header,
.modal-center .modal-body .modal-content {
padding: 3rem;
}
.modal-center header {
background: #f9f9f9;
}
.modal-center header h4 {
margin: 0;
}
.modal-center .actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
@media screen and (min-width: 380px) {
.modal-center .actions {
justify-content: flex-end;
flex-wrap: nowrap;
}
}
.modal-center .actions .button {
padding: 1.5rem 4rem;
}
.modal-center .actions .button:after {
content: none;
}
.modal-center .actions .button + .button {
margin-top: 2rem;
margin-left: 0;
}
@media screen and (min-width: 380px) {
.modal-center .actions .button + .button {
margin-top: 0;
margin-left: 2rem;
}
}
.modal-right {
flex-direction: row;
justify-content: flex-end;
}
.modal-right .modal-body {
margin: 0;
max-width: 50rem;
width: 90%;
}
.modal-right .modal-body .modal-content {
flex-grow: 1;
}
.modal-right .modal-body .modal-content label {
display: block;
}
.modal-right .modal-body .modal-content .product {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 -4rem 3rem;
padding: 4rem;
background: #f9f9f9;
}
@media screen and (min-width: 48em) {
.modal-right .modal-body .modal-content .product {
flex-direction: row;
padding: 4rem 8rem 4rem 4rem;
}
}
.modal-right .modal-body .modal-content .product figure {
margin-bottom: 2rem;
}
@media screen and (min-width: 48em) {
.modal-right .modal-body .modal-content .product figure {
margin-right: 2rem;
}
}
.modal-right .modal-body .modal-content .product figure img {
display: block;
width: 10rem;
border-radius: 0.6rem;
}
.modal-right .modal-body .modal-content .product div h4,
.modal-right .modal-body .modal-content .product div p,
.modal-right .modal-body .modal-content .product section.product-detail > header .page-width div.product-summary div.short-description,
section.product-detail > header .page-width .modal-right .modal-body .modal-content .product div.product-summary div.short-description {
text-align: center;
}
@media screen and (min-width: 48em) {
.modal-right .modal-body .modal-content .product div h4,
.modal-right .modal-body .modal-content .product div p,
.modal-right .modal-body .modal-content .product section.product-detail > header .page-width div.product-summary div.short-description,
section.product-detail > header .page-width .modal-right .modal-body .modal-content .product div.product-summary div.short-description {
text-align: left;
}
}
.modal-right .modal-body .modal-content textarea,
.modal-right .modal-body .modal-content input {
width: 100%;
margin-bottom: 1.6rem;
}
.modal-right .modal-body .modal-content ul,
.modal-right .modal-body .modal-content ol {
margin: 1rem 0 1.5rem 3rem;
list-style: initial;
list-style-position: outside;
font-size: 1.5rem;
font-weight: 300;
}
.modal-right .modal-body .modal-content ul li,
.modal-right .modal-body .modal-content ol li {
margin: 0.6rem 0;
}
.modal-estimate form > input,
.modal-estimate textarea {
width: 100%;
}
.modal-estimate input,
.modal-estimate textarea {
margin-bottom: 1.6rem;
}
ul.pagination {
display: flex;
justify-content: center;
align-items: center;
list-style-type: none;
margin: 5rem 0 0;
}
ul.pagination.top {
margin-top: 0;
margin-bottom: 4rem;
justify-content: right;
}
ul.pagination li a {
display: block;
padding: 0.8rem 1.6rem;
margin: 0.4rem;
font-size: 1.6rem;
font-weight: 300;
color: #000000;
background-color: #ffffff;
text-decoration: none;
}
ul.pagination li a.active, ul.pagination li a:hover {
color: #ff5137;
border-bottom: 0.2rem solid #ff5137;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
}
.paragraph {
font-size: 1.6rem;
line-height: 2.4rem;
max-width: 80rem;
}
.paragraph h2 {
margin: 4rem 0 1.6rem;
font-size: 2.6rem;
line-height: 3rem;
}
.paragraph h3 {
font-size: 1.9rem;
line-height: 2.5rem;
}
.paragraph h4 {
font-size: 1.7rem;
line-height: 2.3rem;
}
.paragraph figure {
margin: 2rem 0 3rem;
}
.paragraph figure img {
display: block;
max-width: 100%;
}
.paragraph figure figcaption {
padding: 0.5rem 1rem;
text-align: center;
color: #a1a1a1;
}
.paragraph p, .paragraph section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .paragraph div.short-description {
margin: 0 0 1.5rem;
font-size: 1.5rem;
}
.paragraph p.introduction, .paragraph section.product-detail > header .page-width div.product-summary div.introduction.short-description, section.product-detail > header .page-width div.product-summary .paragraph div.introduction.short-description {
font-size: 2.3rem;
line-height: 3.3rem;
color: #ff5137;
font-weight: 300;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.paragraph ul,
.paragraph ol {
margin: 1rem 0 1.5rem 3rem;
list-style: initial;
list-style-position: outside;
font-size: 1.5rem;
font-weight: 300;
}
.paragraph ul li,
.paragraph ol li {
margin: 0.6rem 0;
}
.paragraph blockquote {
margin: 3rem 0 3rem 6rem;
padding: 0;
color: #ff5137;
font-size: 2.6rem;
line-height: 3.7rem;
}
section.personal-advice {
display: flex;
justify-content: center;
padding: 8rem 3rem;
}
section.personal-advice > div {
position: relative;
margin: 0 auto;
}
section.personal-advice > div figure.background {
position: absolute;
z-index: 1;
display: block;
height: 100%;
width: 100%;
}
section.personal-advice > div figure.background img {
position: absolute;
}
section.personal-advice > div figure.background img.red-1 {
top: -10%;
left: 10%;
}
section.personal-advice > div figure.background img.red-2 {
top: 41%;
left: -8%;
}
section.personal-advice > div figure.background img.red-3 {
bottom: -5%;
right: 20%;
}
@media screen and (min-width: 48em) {
section.personal-advice > div figure.background img.red-3 {
bottom: -15%;
}
}
section.personal-advice > div figure.background img.blue-1 {
top: -5%;
left: -10%;
}
section.personal-advice > div figure.background img.blue-2 {
top: 10%;
right: -5%;
}
section.personal-advice > div figure.background img.gray-1 {
top: -15%;
left: -15%;
}
section.personal-advice > div figure.background img.gray-2 {
bottom: -5%;
right: 10%;
}
@media screen and (min-width: 48em) {
section.personal-advice > div figure.background img.gray-2 {
bottom: -17%;
}
}
section.personal-advice > div figure.background img.gray-3 {
top: 20%;
right: -10%;
}
section.personal-advice > div figure.dots {
position: absolute;
z-index: 2;
top: -15%;
right: -10%;
display: block;
opacity: 0.45;
width: 12rem;
height: 14rem;
background: url("../images/raster.svg");
}
@media screen and (min-width: 48em) {
section.personal-advice > div figure.dots {
z-index: 4;
top: 30%;
left: -20rem;
width: 23.2rem;
height: 28.2rem;
}
}
section.personal-advice > div article {
position: relative;
z-index: 3;
box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.15);
max-width: 80rem;
background: #ffffff;
overflow: hidden;
}
section.personal-advice > div article > section {
display: flex;
}
section.personal-advice > div article > section .content {
padding: 3rem 3rem 1.5rem;
}
@media screen and (min-width: 48em) {
section.personal-advice > div article > section .content {
padding: 5rem;
}
}
section.personal-advice > div article > section .content p, section.personal-advice > div article > section .content section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary section.personal-advice > div article > section .content div.short-description {
color: #999;
}
section.personal-advice > div article > section .content > p, section.personal-advice > div article > section section.product-detail > header .page-width div.product-summary .content > div.short-description, section.product-detail > header .page-width div.product-summary section.personal-advice > div article > section .content > div.short-description {
display: none;
font-size: 1.5rem;
}
@media screen and (min-width: 27em) {
section.personal-advice > div article > section .content > p, section.personal-advice > div article > section section.product-detail > header .page-width div.product-summary .content > div.short-description, section.product-detail > header .page-width div.product-summary section.personal-advice > div article > section .content > div.short-description {
display: block;
}
}
@media screen and (min-width: 27em) {
section.personal-advice > div article > section .content .mobile-hours {
display: none;
}
}
section.personal-advice > div article > section figure {
display: none;
flex-shrink: 0;
width: 27.5rem;
background-size: cover;
background-position: center center;
}
@media screen and (min-width: 64em) {
section.personal-advice > div article > section figure {
display: block;
}
}
section.personal-advice > div article footer {
width: 100%;
display: flex;
flex-direction: column;
padding: 2rem 0;
border-top: 0.1rem solid #eeeeee;
}
@media screen and (min-width: 48em) {
section.personal-advice > div article footer {
flex-direction: row;
padding: 0;
}
}
section.personal-advice > div article footer a {
flex-grow: 1;
padding: 1rem 2rem;
color: #000000;
font-size: 1.6rem;
text-decoration: none;
text-align: center;
font-weight: 300;
}
@media screen and (min-width: 48em) {
section.personal-advice > div article footer a {
border-top: 0.1rem solid #eeeeee;
padding: 2.5rem 2rem;
}
}
section.personal-advice > div article footer a:hover {
border-color: #ff5137;
color: #ff5137;
}
section.personal-advice > div article footer a i {
font-size: 2rem;
margin: 0 1rem 0 0;
}
section.personal-advice .contactform {
background: #ffffff;
width: 100%;
height: 100%;
top: 100%;
overflow: auto;
opacity: 0;
visibility: hidden;
left: 0;
transition-property: top, opacity, visibility;
transition-duration: 0.2s;
transition-delay: 0s, 0.1s, 0.1s;
transition-timing-function: ease-in-out;
}
@media screen and (min-width: 48em) {
section.personal-advice .contactform {
position: absolute;
}
}
section.personal-advice .contactform.visible, section.personal-advice section.order-portal footer.contactform.cart-footer, section.order-portal section.personal-advice footer.contactform.cart-footer {
top: 0;
opacity: 1;
transition-delay: 0s;
visibility: visible;
}
section.personal-advice .contactform.visible form, section.personal-advice section.order-portal footer.contactform.cart-footer form, section.order-portal section.personal-advice footer.contactform.cart-footer form {
max-height: 100rem;
padding: 0 3rem 2rem;
overflow-y: auto;
}
@media screen and (min-width: 48em) {
section.personal-advice .contactform.visible form, section.personal-advice section.order-portal footer.contactform.cart-footer form, section.order-portal section.personal-advice footer.contactform.cart-footer form {
padding: 3rem 3rem 2rem;
}
}
section.personal-advice .contactform form {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 0;
transition: all 125ms ease-in-out;
}
section.personal-advice .contactform form .submit {
display: flex;
justify-content: flex-end;
}
section.personal-advice .contactform label.message {
margin: 2rem 0;
}
@media screen and (min-width: 48em) {
section.personal-advice .contactform label.message {
margin: 0 0 2rem;
}
}
@media screen and (min-width: 48em) {
section.personal-advice .contactform label {
margin: 0 0 2rem;
}
}
section.personal-advice .contactform input,
section.personal-advice .contactform textarea {
width: 100%;
}
section.personal-advice .contactform textarea {
resize: none;
}
section.personal-advice .contactform .close {
position: absolute;
font-size: 2.4rem;
right: 2rem;
top: 2rem;
z-index: 2;
color: #000000;
}
section.personal-advice .contactform .close:hover {
color: #ff5137;
}
section.personal-advice .contactform button {
align-self: flex-end;
margin: 0 0 2rem;
}
.prices span {
display: inline-block;
}
.prices span.special-price,
.prices span.price {
font-size: 1.6rem;
font-weight: bold;
}
.prices span.price {
color: #000000;
}
.prices span.special-price {
color: rgb(255, 36.63, 4);
}
.prices span.old-price,
.prices span.vat-price {
font-size: 1.4rem;
font-weight: normal;
}
.prices span.old-price {
display: block;
color: #000000;
text-decoration: line-through;
}
.prices span.vat-price {
margin-left: 0.5rem;
color: #6e6e6e;
}
section.product-grid .product {
display: block;
color: #000000;
}
section.product-grid .product.product--hover {
cursor: pointer;
}
section.product-grid .product.product--hover:hover figure:after {
opacity: 1;
}
section.product-grid .product.product--hover:hover figure span.discount {
bottom: 4.5rem;
}
section.product-grid .product.product--hover:hover .details {
margin-top: -2.5rem;
padding: 1rem 0 2.5rem;
}
section.product-grid .product.product--hover:hover .details .product-price {
opacity: 1;
}
section.product-grid .product.product--hover.discounted.ex-vat:hover figure span.discount {
bottom: 6.5rem;
}
section.product-grid .product.product--hover.discounted.ex-vat:hover .details {
margin-top: -4.5rem;
padding: 1rem 0 4.5rem;
}
section.product-grid .product.product--hover > div {
position: relative;
overflow: hidden;
}
section.product-grid .product.product--hover .details {
position: relative;
padding: 1rem 0 0;
transition: all 125ms ease-in-out;
background: #ffffff;
}
section.product-grid .product.product--hover .details h5 {
margin: 0;
}
section.product-grid .product.product--hover .details .product-price {
transition: all 125ms ease-in-out;
opacity: 0;
}
section.product-grid .product.product--quantifiable {
position: relative;
}
section.product-grid .product.product--quantifiable figure {
margin-bottom: 1.5rem;
padding-top: 100%;
border: 0.1rem solid #eeeeee;
}
section.product-grid .product.product--quantifiable figure img {
position: absolute;
top: 50%;
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 50%;
left: 50%;
transform: translate(-50%, -50%);
}
section.product-grid .product.product--quantifiable .info {
position: relative;
}
section.product-grid .product.product--quantifiable .info i {
display: none;
}
section.product-grid .product.product--quantifiable .hover-description {
display: none;
}
section.product-grid .product.product--quantifiable .hover-description li,
section.product-grid .product.product--quantifiable .information-container li {
list-style-type: disc;
list-style-position: outside;
margin-left: 1rem;
}
@media screen and (max-width: 63.99875em) {
section.product-grid .product.product--quantifiable .hover-description {
opacity: 0;
}
section.product-grid .product.product--quantifiable .information-container {
opacity: 0;
visibility: hidden;
width: calc(200% + 3rem);
position: relative;
height: 0;
overflow: hidden;
}
section.product-grid .product.product--quantifiable .information-container.even {
margin-left: calc(-100% - 3rem);
}
section.product-grid .product.product--quantifiable .information-container.show {
opacity: 1;
visibility: visible;
height: auto;
margin-top: 2rem;
border-radius: 0.6rem;
background: #ffffff;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
padding: 2rem;
}
}
@media screen and (min-width: 64em) {
section.product-grid .product.product--quantifiable .information-container {
display: none !important;
}
section.product-grid .product.product--quantifiable .details > span {
display: none;
}
section.product-grid .product.product--quantifiable .hover-description {
position: absolute;
display: block;
top: 3rem;
opacity: 0;
width: 32rem;
left: 1rem;
z-index: 3;
padding: 2rem;
border-radius: 0.6rem;
background: #ffffff;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
}
section.product-grid .product.product--quantifiable .info {
position: absolute;
display: block;
top: 0.8rem;
right: 0.5rem;
z-index: 1;
}
section.product-grid .product.product--quantifiable .info i {
display: block;
}
section.product-grid .product.product--quantifiable .info:hover + .hover-description {
opacity: 1;
}
section.product-grid .product.product--quantifiable .info span {
display: none;
}
section.product-grid .product.product--quantifiable .info,
section.product-grid .product.product--quantifiable .info i {
cursor: pointer;
color: #ff5137;
font-size: 1.8rem;
width: 3.2rem;
height: 3.2rem;
text-align: center;
line-height: 3.2rem;
}
}
@media screen and (min-width: 80em) {
section.product-grid .product.product--quantifiable .hover-description {
left: auto;
right: 1rem;
}
}
section.product-grid .product.product--quantifiable .product-price {
font-size: 1.6rem;
}
section.product-grid .product.product--quantifiable .product-price .special-price + .vat {
color: #a1a1a1;
}
section.product-grid .product figure {
position: relative;
padding-top: 133.3333333333%;
height: 0;
}
section.product-grid .product figure:after {
content: "";
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
background: linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.1) 100%);
transition: all 125ms ease-in-out;
}
section.product-grid .product figure img {
position: absolute;
top: 0;
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 5%;
}
section.product-grid .product figure span.discount {
position: absolute;
z-index: 5;
display: inline-block;
bottom: 2rem;
left: 2rem;
padding: 0.5rem 1.2rem;
background: linear-gradient(90deg, #ff7d55 0.51%, #ff1810 100%);
color: #ffffff;
font-size: 1.3rem;
font-weight: 500;
transition: all 125ms ease-in-out;
}
section.product-grid .product .product-price {
font-size: 1.4rem;
font-weight: 300;
}
section.product-grid .product .product-price .old-price {
text-decoration: line-through;
}
section.product-grid .product .product-price .special-price {
font-weight: 700;
color: #ff5137;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
section.product-grid .product .product-price .special-price + .vat {
color: #ff5137;
}
section.product-grid .product .product-price .price {
font-weight: 500;
}
section.product-grid .product .product-price .vat-check {
display: none;
}
section.product-grid .product .product-price .vat-check.show-price {
display: inline-block;
}
section.quantifiable-products {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
}
section.quantifiable-products > .page-width header {
margin-top: 2.5rem;
}
section.quantifiable-products > .page-width header h1 {
margin: 0;
}
section.quantifiable-products > .page-width header a {
display: none;
}
@media screen and (min-width: 48em) {
section.quantifiable-products > .page-width header a {
display: block;
}
}
section.quantifiable-products > .page-width section.product-grid {
padding: 4rem 0 5rem;
}
section.quantifiable-products > .page-width > a {
display: block;
}
@media screen and (min-width: 48em) {
section.quantifiable-products > .page-width > a {
display: none;
}
}
section.quantifiable-products header,
section.quantifiable-products footer.cart-footer .page-width {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 48em) {
section.quantifiable-products header,
section.quantifiable-products footer.cart-footer .page-width {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
section.quantifiable-products footer.cart-footer {
position: sticky;
bottom: 0;
z-index: 99;
padding: 4rem 0;
background: #f9f9f9;
}
section.quantifiable-products footer.cart-footer .page-width h4 {
position: relative;
padding-left: 5rem;
}
@media screen and (max-width: 47.99875em) {
section.quantifiable-products footer.cart-footer .page-width h4 {
margin-bottom: 2rem;
font-size: 1.6rem;
line-height: 2.1rem;
}
}
section.quantifiable-products footer.cart-footer .page-width h4 i {
position: absolute;
top: -0.4rem;
left: 0;
margin-right: 1rem;
font-size: 3rem;
color: #7cc461;
}
.quantity-counter {
display: flex;
margin-top: 1.5rem;
font-size: 1.8rem;
/* Firefox */
}
.quantity-counter input {
width: 8rem;
text-align: center;
font-size: 1.6rem;
border-radius: 0;
}
.quantity-counter input::-webkit-outer-spin-button,
.quantity-counter input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.quantity-counter input[type=number] {
-moz-appearance: textfield;
}
.quantity-counter div {
width: 4rem;
display: flex;
align-items: center;
justify-content: center;
border: 0.1rem solid #eeeeee;
user-select: none;
cursor: pointer;
}
.quantity-counter div:hover {
background-color: #f9f9f9;
}
.quantity-counter div:first-of-type {
border-right: 0;
}
.quantity-counter div:last-of-type {
border-left: 0;
}
figure.rating-stars {
font-size: 2rem;
}
figure.rating-stars i {
color: #eeeeee;
}
figure.rating-stars i.highlight {
color: #ff5137;
}
.rating-radio-stars {
display: flex;
}
.rating-radio-stars:hover input {
transform: scale(1.2);
}
.rating-radio-stars input {
margin: 0 0.3rem;
width: auto;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 4rem;
text-align: center;
transition: all 125ms ease-in-out;
color: #ff5137;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
border: none;
}
.rating-radio-stars input:focus, .rating-radio-stars input:active {
outline: none;
}
.rating-radio-stars input:checked + input,
.rating-radio-stars input:checked + input + input,
.rating-radio-stars input:checked + input + input + input,
.rating-radio-stars input:checked + input + input + input + input {
color: #eeeeee;
}
.rating-radio-stars input:checked + input:hover,
.rating-radio-stars input:checked + input + input:hover,
.rating-radio-stars input:checked + input + input + input:hover,
.rating-radio-stars input:checked + input + input + input + input:hover {
color: #ff5137;
}
.rating-radio-stars input:hover + input,
.rating-radio-stars input:hover + input + input,
.rating-radio-stars input:hover + input + input + input,
.rating-radio-stars input:hover + input + input + input + input {
transform: scale(1);
}
.search-modal .modal-background {
background: #242935;
}
.search-modal .modal-body {
flex-grow: 1;
justify-content: center;
margin: 0;
max-width: 100%;
width: 100%;
min-height: 100%;
}
.search-modal .modal-body a.modal-close {
top: 2.8rem;
right: 3.8rem;
font-size: 3.8rem;
color: #ffffff;
}
@media screen and (min-width: 48em) {
.search-modal .modal-body a.modal-close {
top: 3.8rem;
right: 4.8rem;
font-size: 4.8rem;
}
}
.search-modal .modal-body .modal-content {
margin-bottom: 10vh;
background: none;
}
@media screen and (max-width: 47.99875em) {
.search-modal .modal-body .modal-content {
padding: 2rem;
}
}
.search-modal .modal-body .modal-content form {
position: relative;
}
.search-modal .modal-body .modal-content form input {
padding: 1.5rem 5rem 1.5rem 0;
width: 100%;
background: none;
border: 0;
border-radius: 0;
border-bottom: 0.1rem solid #ffffff;
color: #ffffff;
font-size: 2.4rem;
line-height: 4rem;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.search-modal .modal-body .modal-content form input::placeholder {
color: rgb(77.2584269663, 87.9887640449, 113.7415730337);
font-size: 2.4rem;
}
.search-modal .modal-body .modal-content form input:focus, .search-modal .modal-body .modal-content form input:active {
border-radius: 0;
outline: 0;
box-shadow: none;
}
@media screen and (min-width: 48em) {
.search-modal .modal-body .modal-content form input {
padding: 2rem 0;
font-size: 4.8rem;
}
.search-modal .modal-body .modal-content form input::placeholder {
font-size: 4.8rem;
}
}
.search-modal .modal-body .modal-content form input:-webkit-autofill, .search-modal .modal-body .modal-content form input:-webkit-autofill:hover, .search-modal .modal-body .modal-content form input:-webkit-autofill:focus, .search-modal .modal-body .modal-content form input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 50px #242935 inset !important;
}
.search-modal .modal-body .modal-content form input:-webkit-autofill {
-webkit-text-fill-color: rgb(186.5168539326, 192.9775280899, 208.4831460674) !important;
}
.search-modal .modal-body .modal-content form button {
padding: 1.5rem 0;
appearance: none;
position: absolute;
top: 0;
right: 0;
background: none;
color: #ffffff;
font-size: 3.2rem;
line-height: 4rem;
border: 0;
cursor: pointer;
}
.search-modal .modal-body .modal-content form button:focus, .search-modal .modal-body .modal-content form button:hover {
outline: none;
color: #ff5137;
}
@media screen and (min-width: 48em) {
.search-modal .modal-body .modal-content form button {
padding: 2rem 0;
font-size: 4.8rem;
}
}
.search-modal .modal-body .modal-content form ul {
display: block;
max-height: 20rem;
background: #ffffff;
overflow-y: auto;
}
.search-modal .modal-body .modal-content form ul li {
display: block;
position: relative;
height: 4rem;
line-height: 4rem;
}
.search-modal .modal-body .modal-content form ul li a {
color: #000000;
font-size: 2.4rem;
line-height: 4rem;
padding: 0 1.6rem;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
display: block;
position: relative;
overflow: hidden;
}
.search-modal .modal-body .modal-content form ul li a:hover {
color: #ff5137;
}
.slbElement .slbCloseBtn {
right: 1rem;
top: 3.5rem;
width: 3rem;
height: 3rem;
font-size: 0;
line-height: 0;
color: transparent;
}
.slbElement .slbCloseBtn:after {
content: "\F00D";
font: var(--fa-font-solid);
color: white;
font-size: 2.5rem;
line-height: 2.5rem;
}
.slbElement .slbCloseBtn:hover {
color: #ff5137;
opacity: 1;
}
.slbElement .slbArrow {
text-indent: 0;
color: transparent;
margin-top: -3.5rem;
font-size: 0;
line-height: 0;
height: 7rem;
width: 7rem;
overflow: visible;
opacity: 1;
}
.slbElement .slbArrow:focus, .slbElement .slbArrow:active {
outline: none;
}
.slbElement .slbArrow:before {
position: absolute;
left: 1.5rem;
top: 0.5rem;
font: var(--fa-font-solid);
color: white;
border: 0;
margin: 0;
font-size: 6rem;
line-height: 6rem;
text-shadow: 0.1rem 0.1rem 0.8rem rgba(0, 0, 0, 0.7);
}
.slbElement .slbArrow:hover {
opacity: 1;
}
.slbElement .slbArrow.prev {
left: 1rem;
}
.slbElement .slbArrow.prev:before {
content: "\F104";
}
.slbElement .slbArrow.next {
right: 0;
}
.slbElement .slbArrow.next:before {
content: "\F105";
}
.slbElement .slbImageWrap:after {
box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.3);
}
.sk-fading-circle {
display: inline-block;
width: 3rem;
height: 3rem;
position: relative;
}
.sk-fading-circle .sk-circle {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.sk-fading-circle .sk-circle:before {
content: "";
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background: #a1a1a1;
border-radius: 100%;
-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
}
.sk-fading-circle .sk-circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg);
}
.sk-fading-circle .sk-circle2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.sk-fading-circle .sk-circle3:before {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.sk-fading-circle .sk-circle4:before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.sk-fading-circle .sk-circle5:before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.sk-fading-circle .sk-circle6:before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.sk-fading-circle .sk-circle7:before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.sk-fading-circle .sk-circle8:before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.sk-fading-circle .sk-circle9:before {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@keyframes sk-circleFadeDelay {
0%, 39%, 100% {
opacity: 0;
}
40% {
opacity: 1;
}
}
picture.srcset {
display: block;
}
picture.srcset.fixed img {
height: 100%;
}
picture.srcset img {
display: block;
object-fit: cover;
object-position: center;
width: 100%;
}
table.summary {
margin: 3rem 0;
width: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
@media screen and (min-width: 48em) {
table.summary {
min-width: 30rem;
}
}
table.summary tr {
font-weight: 300;
}
table.summary tr.total,
table.summary tr.exvat,
table.summary tr.discount-total {
font-weight: 700;
}
table.summary tr.discount th, table.summary tr.discount td {
color: #7cc461;
}
table.summary tr.vat th,
table.summary tr.vat td {
padding-top: 1.5rem;
color: #a1a1a1;
}
table.summary tr.hidden {
display: none !important;
}
table.summary th,
table.summary td {
padding: 0.3rem 0;
font-size: 1.6rem;
background: none;
}
table.summary td {
text-align: right;
}
.voucher {
margin-top: 3rem;
}
form.couponform input, form.couponform button {
display: inline;
position: relative;
}
form.couponform input {
padding-right: 5rem;
text-transform: uppercase;
font-size: 1.6rem;
}
@media screen and (min-width: 48em) {
form.couponform input {
font-size: 1.4rem;
}
}
form.couponform input::-webkit-input-placeholder {
text-transform: none;
}
form.couponform input:-moz-placeholder {
text-transform: none;
}
form.couponform input::-moz-placeholder {
text-transform: none;
}
form.couponform input:-ms-input-placeholder {
text-transform: none;
}
.text-image {
padding: 5rem 0 10.8rem;
}
.text-image__page-width {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 48em) {
.text-image__page-width {
flex-direction: row;
}
}
.text-image__images {
position: relative;
width: calc(100% + 4rem);
}
@media screen and (min-width: 48em) {
.text-image__images {
width: 50%;
}
}
.text-image__dots {
position: absolute;
z-index: -1;
right: 3.5rem;
height: 20rem;
bottom: -4.8rem;
width: 55%;
background: url("/images/dots.png");
}
@media screen and (min-width: 48em) {
.text-image__dots {
right: unset;
left: 15%;
bottom: -5.8rem;
height: 25rem;
width: 60%;
}
}
.text-image__content {
margin: 8.5rem 0 0;
width: 100%;
}
@media screen and (min-width: 48em) {
.text-image__content {
width: 50%;
margin: auto 0;
}
}
.text-image__header {
margin-bottom: 2rem;
font-weight: 500;
font-size: 2.2rem;
line-height: 2.6rem;
}
@media screen and (min-width: 48em) {
.text-image__header {
margin-bottom: 3.2rem;
}
}
.text-image__text {
margin: 0;
font-size: 1.6rem;
line-height: 2.4rem;
}
.text-images {
position: relative;
display: flex;
margin: 0 -2rem;
padding-left: 4rem;
}
@media screen and (min-width: 48em) {
.text-images {
margin: 0;
padding-left: 2.2rem;
padding-right: 6rem;
}
}
@media screen and (min-width: 48em) {
.text-images--images-right {
order: 2;
}
}
.text-images__two-images {
display: flex;
flex-direction: column;
z-index: 1;
width: 50%;
}
.text-images__two-images picture img {
min-height: 18.5rem;
}
@media screen and (min-width: 48em) {
.text-images__two-images picture img {
min-height: 32rem;
}
}
.text-images__logo {
display: block;
height: auto;
margin-bottom: 1.5rem;
max-width: 10rem;
}
@media screen and (min-width: 64em) {
.text-images__logo {
max-width: 15.5rem;
margin-bottom: 1.6rem;
}
}
.text-images__background {
position: relative;
}
.text-images__background--light:before, .text-images__background--light:after {
background: #cccccc !important;
}
.text-images__background:before {
content: "";
position: absolute;
top: 1.5rem;
left: -1.5rem;
bottom: -1.5rem;
width: 1.5rem;
background: #252934;
}
@media screen and (min-width: 48em) {
.text-images__background:before {
left: -2.2rem;
bottom: -2rem;
width: 2.2rem;
}
}
.text-images__background:after {
content: "";
position: absolute;
top: 100%;
left: -1.5rem;
bottom: -1.5rem;
background: #252934;
width: 100%;
}
@media screen and (min-width: 48em) {
.text-images__background:after {
left: -2.2rem;
bottom: -2rem;
}
}
.text-images__one-image {
position: absolute;
margin-left: 11rem;
margin-right: 0;
width: unset;
bottom: 2.6rem;
height: calc(100% - 2.6rem);
}
@media screen and (min-width: 48em) {
.text-images__one-image {
position: absolute;
margin-right: 6rem;
width: unset;
bottom: 4rem;
height: calc(100% - 4rem);
}
}
@media screen and (min-width: 64em) {
.text-images__one-image {
margin-left: 17rem;
}
}
.text-images__one-image picture {
display: unset;
}
.quick-results {
position: absolute !important;
width: 57rem;
padding: 2rem;
z-index: 9999999;
margin-top: 1rem;
text-align: left;
}
.quick-results a {
text-decoration: none;
color: #000;
}
.quick-results a:hover {
color: #ff5137;
}
@media screen and (max-width: 26.99875em) {
.quick-results {
width: 37.5rem;
}
}
.uspticker {
border-radius: 5px;
color: #402726;
cursor: default;
font-weight: bold;
overflow: hidden;
height: 3.5rem;
}
@media screen and (max-width: 47.99875em) {
.uspticker {
display: none;
}
}
.uspticker ul li {
height: 31.5rem;
overflow: hidden;
white-space: nowrap;
display: none;
}
section.account {
padding: 6rem 0;
background: #ffffff;
}
@media screen and (min-width: 48em) {
section.account {
padding: 5rem 0;
padding-bottom: 8rem;
}
}
@media screen and (min-width: 48em) {
section.account.company-details h1 {
margin-bottom: 6rem;
}
}
section.account .page-width {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 48em) {
section.account .page-width {
flex-direction: row;
}
}
section.account .page-width > aside {
margin: 0 0 3rem;
}
@media screen and (min-width: 48em) {
section.account .page-width > aside {
min-width: 24rem;
margin: 0 11% 3rem 0;
width: 26rem;
}
}
section.account .page-width > section {
flex-grow: 1;
}
section.account .page-width > section h1 {
font-size: 3.8rem;
line-height: 4.5rem;
}
section.account .page-width > section p.introduction, section.account section.product-detail > header .page-width > section div.product-summary div.introduction.short-description, section.product-detail > header section.account .page-width > section div.product-summary div.introduction.short-description {
margin-bottom: 2rem;
font-weight: 300;
font-size: 1.8rem;
line-height: 2.7rem;
}
@media screen and (min-width: 48em) {
section.account .page-width > section p.introduction, section.account section.product-detail > header .page-width > section div.product-summary div.introduction.short-description, section.product-detail > header section.account .page-width > section div.product-summary div.introduction.short-description {
margin-bottom: 5rem;
}
}
section.account .account-list-item {
display: -ms-grid;
display: grid;
grid-template-areas: "icon data" "icon actions";
-ms-grid-columns: 3fr 6fr 3fr;
grid-template-columns: 10rem auto;
grid-gap: 1rem;
padding-bottom: 3rem;
margin-bottom: 3rem;
border-bottom: 0.1rem solid #eeeeee;
}
@media screen and (min-width: 48em) {
section.account .account-list-item {
grid-template-areas: "icon data actions";
grid-template-columns: 3fr 6fr 3fr;
align-items: center;
}
}
section.account .account-list-item:last-of-type {
border-bottom: 0;
}
section.account .account-list-item.account-list-item--company {
align-items: flex-start;
}
@media screen and (min-width: 48em) {
section.account .account-list-item.account-list-item--company .data {
display: block;
}
}
section.account .account-list-item.account-list-item--company .data h5 {
margin-bottom: 1rem;
}
section.account .account-list-item.account-list-item--company .data p, section.account .account-list-item.account-list-item--company .data section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary section.account .account-list-item.account-list-item--company .data div.short-description {
margin-bottom: 2.5rem;
font-size: 1.6rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
section.account .account-list-item .icon {
-ms-grid-column: 1;
-ms-grid-row: 1;
grid-column: 1;
grid-area: icon;
width: 8rem;
height: 8rem;
background: #f9f9f9;
border-radius: 100%;
text-align: center;
}
section.account .account-list-item .icon i {
font-size: 3.6rem;
line-height: 8rem;
color: #363636;
}
section.account .account-list-item .data {
-ms-grid-column: 2;
-ms-grid-row: 1;
grid-column: 2;
grid-area: data;
}
@media screen and (min-width: 48em) {
section.account .account-list-item .data {
display: flex;
}
}
section.account .account-list-item .data dl + dl {
margin: 1.6rem 0 0;
}
@media screen and (min-width: 48em) {
section.account .account-list-item .data dl + dl {
margin: 0 0 0 20%;
}
}
section.account .account-list-item .data dl dt,
section.account .account-list-item .data dl dd {
font-size: 1.6rem;
line-height: 2.4rem;
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
section.account .account-list-item .data dl dt {
font-weight: 700;
margin-bottom: 0.5rem;
}
section.account .account-list-item .data dl dd {
font-weight: 300;
}
section.account .account-list-item .actions {
-ms-grid-column: 3;
-ms-grid-row: 1;
grid-column: 3;
grid-area: actions;
margin-top: 2rem;
}
@media screen and (min-width: 48em) {
section.account .account-list-item .actions {
margin: 0;
text-align: right;
}
}
section.account .account-list-item .actions p, section.account .account-list-item .actions section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary section.account .account-list-item .actions div.short-description {
margin: 0 0 0.5rem;
color: #a1a1a1;
}
section.account .back-link {
position: relative;
display: block;
font-size: 1.6rem;
margin-bottom: 4rem;
font-weight: 300;
}
section.account .back-link i {
font-size: 1.2rem;
margin-right: 1rem;
}
section.addresses iframe {
overflow: hidden;
}
section.addresses iframe::-webkit-scrollbar {
display: none;
}
section.addresses .add-address-button {
display: block;
position: relative;
width: 100%;
margin: 3.2rem 0;
border: 0.1rem solid #eeeeee;
padding: 2.4rem;
color: #ff5137;
font-weight: 500;
font-size: 1.6rem;
transition: all 125ms ease-in-out;
}
section.addresses .add-address-button:hover {
border-color: #ff5137;
}
section.addresses .add-address-button:hover span {
transform: scale(1.1);
}
section.addresses .add-address-button span {
transition: all 125ms ease-in-out;
width: 3.6rem;
height: 3.6rem;
background: linear-gradient(90deg, #ff7d55 0.51%, #ff1810 100%);
border-radius: 100%;
display: inline-block;
vertical-align: middle;
position: relative;
color: #ffffff;
font-weight: 300;
text-align: center;
margin: 0 2.4rem 0 0;
}
section.addresses .add-address-button span i {
line-height: 3.6rem;
}
section.addresses .address span {
display: block;
position: relative;
width: 100%;
}
section.addresses .address-block {
border: 0.1rem solid #eeeeee;
padding: 4rem 2rem 4rem 4rem;
font-size: 1.6rem;
}
section.addresses .address-block span {
display: block;
position: relative;
width: 100%;
display: inline-block;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
section.addresses .address-block a {
font-weight: 300;
text-decoration: underline;
font-size: 1.5rem;
}
p.account-validation, section.product-detail > header .page-width div.product-summary div.account-validation.short-description {
margin: 1rem 0;
padding: 1rem;
border-radius: 0.4rem;
background: rgba(255, 81, 55, 0.1);
color: #ff5137;
}
p.account-validation.hidden, section.product-detail > header .page-width div.product-summary div.account-validation.hidden.short-description {
padding: 0;
}
p.account-validation.success, section.product-detail > header .page-width div.product-summary div.account-validation.success.short-description {
color: #7cc461;
background: rgba(124, 196, 97, 0.1);
}
section.dashboard h3 {
margin-bottom: 3rem;
}
@media screen and (min-width: 48em) {
section.order .page-width > aside {
margin-right: 6.5%;
width: 24rem;
}
}
section.order .page-width section.order-details dl dd {
font-size: 1.4rem;
}
section.order .page-width h3 small {
color: #a1a1a1;
font-size: 70%;
font-weight: 500;
}
section.order .page-width .order-total {
margin-top: 6rem;
}
@media screen and (min-width: 48em) {
section.order .page-width .order-total {
padding-left: 3.5rem;
}
}
section.order .page-width .order-total table.summary {
align-self: start;
}
@media screen and (min-width: 48em) {
section.order .page-width .order-total table.summary {
margin-top: 0;
}
}
section.order section.order-products {
margin-top: 4.2rem;
}
section.order section.order-products .order-product {
margin: 0 -3rem 1rem;
position: relative;
display: -ms-grid;
display: grid;
grid-template-areas: "thumb name name" "thumb quantity quantity" "thumb pricing pricing" "details details details";
-ms-grid-columns: 13rem auto 2rem 10rem;
grid-template-columns: 13rem auto 10rem;
-ms-grid-rows: 5.3rem auto;
grid-template-rows: 3rem 3rem 3rem auto;
align-items: center;
padding: 3rem;
background: #f9f9f9;
}
@media screen and (min-width: 48em) {
section.order section.order-products .order-product {
margin: 0 0 1rem;
grid-gap: 0 2rem;
grid-template-areas: "thumb name quantity pricing" "thumb details quantity pricing";
grid-template-columns: 13rem auto 2rem 10rem;
grid-template-rows: 5.3rem auto;
align-items: flex-start;
}
}
section.order section.order-products .order-product figure {
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-columns-span: 2;
grid-area: thumb;
align-self: flex-start;
margin-right: 1rem;
width: 8rem;
height: 8rem;
}
@media screen and (min-width: 27em) {
section.order section.order-products .order-product figure {
width: 10rem;
height: 10rem;
margin: 0;
}
}
section.order section.order-products .order-product figure img {
height: 100%;
width: 100%;
object-fit: cover;
}
section.order section.order-products .order-product .product-name {
-ms-grid-column: 2;
-ms-grid-row: 1;
grid-area: name;
}
section.order section.order-products .order-product .product-name h4 {
margin-bottom: 1rem;
font-size: 1.6rem;
line-height: 2.2rem;
}
@media screen and (min-width: 48em) {
section.order section.order-products .order-product .product-name h4 {
font-size: 2rem;
line-height: 2.5rem;
}
}
section.order section.order-products .order-product .product-details {
-ms-grid-column: 2;
-ms-grid-row: 2;
grid-area: details;
margin-top: 2rem;
font-weight: 300;
}
@media screen and (min-width: 48em) {
section.order section.order-products .order-product .product-details {
margin-top: 0;
}
}
section.order section.order-products .order-product .product-details dl {
margin: 1rem 0;
display: grid;
grid-template-columns: 1fr 2fr;
color: #909090;
}
@media screen and (min-width: 48em) {
section.order section.order-products .order-product .product-details dl {
min-width: 44rem;
}
}
section.order section.order-products .order-product .product-details dl dt,
section.order section.order-products .order-product .product-details dl dd {
margin: 0.5rem 0;
}
section.order section.order-products .order-product .product-details dl dt {
font-weight: 500;
color: #363636;
}
section.order section.order-products .order-product .quantity {
-ms-grid-column: 3;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-area: quantity;
}
section.order section.order-products .order-product .pricing {
-ms-grid-column: 4;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-area: pricing;
font-size: 1.7rem;
line-height: 2rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
margin-top: 2rem;
}
section.order section.order-products .order-product .pricing > span {
display: block;
}
section.order section.order-products .order-product .pricing .old-price {
text-decoration: line-through;
font-weight: 300;
}
section.order section.order-products .order-product .pricing .price {
font-weight: 700;
}
section.order section.order-products .order-product .pricing .price .vat {
display: block;
font-size: 1.3rem;
color: #909090;
font-weight: 300;
}
section.order section.order-products .order-product .pricing,
section.order section.order-products .order-product .quantity {
text-align: left;
}
@media screen and (min-width: 48em) {
section.order section.order-products .order-product .pricing,
section.order section.order-products .order-product .quantity {
text-align: right;
margin-top: 0.7rem;
}
}
section.order section.order-products .order-product button {
position: absolute;
-webkit-appearance: none;
border: none;
background: none;
top: 1rem;
right: 1rem;
font-size: 2rem;
color: #ff1810;
cursor: pointer;
}
section.order section.order-status {
margin-top: 2rem;
}
section.order section.order-status .order-status--progress {
padding-top: 2rem;
}
@media screen and (min-width: 48em) {
section.order section.order-status .order-status--progress {
padding: 5rem 6rem 4.5rem;
border: 0.1rem solid #eeeeee;
border-radius: 0.6rem;
}
}
section.order section.order-status .order-status--progress section.steps {
position: relative;
display: flex;
justify-content: space-between;
}
@media screen and (min-width: 48em) {
section.order section.order-status .order-status--progress section.steps {
justify-content: space-around;
}
}
section.order section.order-status .order-status--progress section.steps .step-progress-bar {
position: absolute;
z-index: 1;
top: 3rem;
left: 15%;
right: 15%;
height: 0.3rem;
background: #f9f9f9;
}
@media screen and (min-width: 48em) {
section.order section.order-status .order-status--progress section.steps .step-progress-bar {
top: 4rem;
}
}
section.order section.order-status .order-status--progress section.steps .step-progress-bar:after {
content: "";
display: block;
height: 0.3rem;
background: #ff5137;
transform-origin: left center;
transform: scaleX(0);
}
section.order section.order-status .order-status--progress section.steps .step {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
max-width: 30%;
text-align: center;
font-size: 1.3rem;
line-height: 1.8rem;
color: #a1a1a1;
}
@media screen and (min-width: 48em) {
section.order section.order-status .order-status--progress section.steps .step {
font-size: 1.6rem;
line-height: 2.4rem;
max-width: 16rem;
}
}
section.order section.order-status .order-status--progress section.steps .step figure {
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 3rem;
width: 6rem;
height: 6rem;
border-radius: 50%;
background: linear-gradient(to right, #ff7d55, #ff1810, #eeeeee, #f9f9f9);
background-size: 400% 100%;
background-position-x: 100%;
}
@media screen and (min-width: 48em) {
section.order section.order-status .order-status--progress section.steps .step figure {
width: 8rem;
height: 8rem;
}
}
@media screen and (max-width: 47.99875em) {
section.order section.order-status .order-status--progress section.steps .step figure svg {
transform: scale(0.7);
}
}
section.order section.order-status .order-status--progress section.steps .step figure svg .svg-fill {
fill: #a1a1a1;
}
section.order section.order-status .order-status--summary {
margin-top: 4rem;
padding: 1.5rem 4rem;
background: rgba(124, 196, 97, 0.1);
border-radius: 0.6rem;
}
section.order section.order-status section.steps.order-received .step-received {
animation: textactive 1000ms ease-out 200ms 1 normal forwards;
}
section.order section.order-status section.steps.order-received .step-received figure {
animation: figureactive 1000ms ease-out 0ms 1 normal forwards;
}
section.order section.order-status section.steps.order-received .step-received .svg-fill {
animation: svgactive 1000ms ease-out 200ms 1 normal forwards;
}
section.order section.order-status section.steps.order-processed .step-progress-bar:after {
animation: progress50 1000ms ease-out 400ms 1 normal forwards;
}
section.order section.order-status section.steps.order-processed .step-processed {
animation: textactive 1000ms ease-out 1000ms 1 normal forwards;
}
section.order section.order-status section.steps.order-processed .step-processed figure {
animation: figureactive 1000ms ease-out 1000ms 1 normal forwards;
}
section.order section.order-status section.steps.order-processed .step-processed .svg-fill {
animation: svgactive 1000ms ease-out 1000ms 1 normal forwards;
}
section.order section.order-status section.steps.order-sent .step-progress-bar:after {
animation: progress100 2000ms ease-out 400ms 1 normal forwards;
}
section.order section.order-status section.steps.order-sent .step-sent {
animation: textactive 1000ms ease-out 2000ms 1 normal forwards;
}
section.order section.order-status section.steps.order-sent .step-sent figure {
animation: figureactive 1000ms ease-out 2000ms 1 normal forwards;
}
section.order section.order-status section.steps.order-sent .step-sent .svg-fill {
animation: svgactive 1000ms ease-out 2000ms 1 normal forwards;
}
section.order section.order-status section.steps .step-sent a {
display: block;
position: relative;
margin-top: 2rem;
font-weight: 300;
padding-right: 3rem;
}
section.order section.order-status section.steps .step-sent a i {
display: inline;
position: absolute;
right: 0;
line-height: 2.3rem;
transition: all 125ms ease-in-out;
}
section.order section.order-status section.steps .step-sent:hover i {
right: -0.5rem;
}
@keyframes textactive {
from {
color: #a1a1a1;
}
to {
color: #000000;
}
}
@keyframes figureactive {
from {
background-position-x: 100%;
}
to {
background-position-x: 0%;
}
}
@keyframes svgactive {
from {
fill: #a1a1a1;
}
to {
fill: white;
}
}
@keyframes progress50 {
from {
transform: scaleX(0);
}
to {
transform: scaleX(0.5);
}
}
@keyframes progress100 {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
section.order-portal {
display: flex;
flex-grow: 1;
padding-bottom: 0;
min-height: 100%;
}
section.order-portal form {
height: 100%;
}
section.order-portal footer.cart-footer {
margin-top: 8rem !important;
}
section.order-portal footer.cart-footer:after {
content: "";
position: absolute;
display: block;
top: 0;
height: 100%;
left: -200%;
right: -200%;
background: #f9f9f9;
}
section.order-portal footer.cart-footer .page-width {
padding: 0;
}
section.order-portal footer.cart-footer h4 {
z-index: 2;
}
section.order-portal footer.cart-footer button {
white-space: nowrap;
}
.order-overview {
margin-top: 4rem;
}
@media screen and (max-width: 26.99875em) {
.order-overview {
margin-top: 2rem;
}
.order-overview h3 {
font-size: 2rem;
}
}
.order-overview .order-overview-item {
padding: 0 0 3rem;
margin: 0 0 3rem;
border-bottom: 0.1rem solid #eeeeee;
}
.order-overview .order-overview-item h4 {
margin-bottom: 2rem;
}
.order-overview .order-overview-item section {
display: -ms-grid;
display: grid;
grid-template-areas: "date total actions";
-ms-grid-columns: 3fr 5fr 4fr 3fr;
-ms-grid-rows: 1fr;
grid-template-columns: 3fr 4fr 3fr;
grid-gap: 1rem;
align-items: end;
}
@media screen and (min-width: 48em) {
.order-overview .order-overview-item section {
grid-template-areas: "date status total actions";
grid-template-columns: 3fr 5fr 4fr 3fr;
}
}
.order-overview .order-overview-item section .date {
-ms-grid-column: 1;
-ms-grid-row: 1;
grid-area: date;
}
.order-overview .order-overview-item section .status {
-ms-grid-column: 2;
-ms-grid-row: 1;
grid-area: status;
display: none;
}
@media screen and (min-width: 48em) {
.order-overview .order-overview-item section .status {
display: block;
}
}
.order-overview .order-overview-item section .total {
-ms-grid-column: 3;
-ms-grid-row: 1;
grid-area: total;
}
.order-overview .order-overview-item section .actions {
-ms-grid-column: 4;
-ms-grid-row: 1;
grid-area: actions;
}
.order-overview .order-overview-item section span.vat {
font-size: 80%;
}
.order-overview .order-overview-item section a {
text-decoration: underline;
font-weight: 300;
}
.order-overview .order-overview-item section a i {
margin-left: 1rem;
}
.order-overview .order-overview-item section small a {
color: #a1a1a1 !important;
}
.order-overview-item dl dt,
.order-overview-item dl dd,
.order dl dt,
.order dl dd {
font-size: 1.6rem;
line-height: 2.4rem;
display: block;
max-width: 100%;
overflow: hidden;
}
.order-overview-item dl dt,
.order dl dt {
font-weight: 700;
margin-bottom: 0.5rem;
}
.order-overview-item dl dd,
.order dl dd {
font-weight: 300;
}
.account-overlay button {
margin-top: 3rem;
}
.account-overlay input {
width: 100%;
}
.account-overlay iframe {
width: 100%;
min-height: 40rem;
}
.address-fields {
margin-bottom: 2rem;
}
.address-fields section {
display: block;
position: relative;
}
.address-fields section > div {
display: inline-block;
position: relative;
}
.address-fields section > div.fullwidth {
width: 100% !important;
display: block;
}
.address-fields section > div.fullwidth + div {
width: calc(60% - 1rem);
}
.address-fields section > div.fullwidth + div + div {
width: calc(40% - 1rem);
float: right;
}
.address-fields section input {
width: 100%;
margin-bottom: 1.6rem;
}
.address-fields section .input-group input {
width: calc(50% - 1rem);
}
@media screen and (min-width: 64em) {
section.blog .banner {
height: 40vh;
}
}
section.blog > .page-width {
display: grid;
padding: 3rem 3rem 0;
grid-template-columns: 100%;
}
@media screen and (min-width: 27em) {
section.blog > .page-width {
padding-bottom: 1rem;
grid-gap: 2rem;
grid-template-columns: 1fr 1fr;
}
section.blog > .page-width h5 {
text-align: left;
}
section.blog > .page-width p, section.product-detail > header section.blog > .page-width div.product-summary div.short-description {
text-align: right;
font-size: 1.6rem;
}
section.blog > .page-width p a, section.product-detail > header section.blog > .page-width div.product-summary div.short-description a {
text-decoration: underline;
}
}
section.blog section.blog-overview {
padding: 2rem 0 6rem;
}
@media screen and (min-width: 27em) {
section.blog section.blog-overview {
background: #f9f9f9;
padding: 6rem 0;
}
}
section.blog section.blog-overview .categories {
list-style: none;
display: block;
position: relative;
padding-bottom: 5rem;
}
section.blog section.blog-overview .categories li {
display: inline-block;
margin-right: 1rem;
position: relative;
font-weight: 300;
text-align: center;
}
section.blog section.blog-overview .categories li a {
display: block;
position: relative;
width: 13rem;
height: 7rem;
background: #eeeeee;
color: #252934;
transition: all 125ms ease-in-out;
border-bottom: 0.3rem solid rgba(0, 0, 0, 0);
}
section.blog section.blog-overview .categories li a span {
display: block;
position: absolute;
bottom: 2rem;
text-align: center;
width: 100%;
transition: all 125ms ease-in-out;
}
section.blog section.blog-overview .categories li a.active, section.blog section.blog-overview .categories li a:hover {
background: #ffffff;
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.15);
color: #ff5137;
border-bottom: 0.3rem solid #ff5137;
}
section.blog section.blog-overview .categories li a.active i, section.blog section.blog-overview .categories li a:hover i {
top: -0.2rem;
}
section.blog section.blog-overview .categories li a.active span, section.blog section.blog-overview .categories li a:hover span {
bottom: 2.2rem;
}
section.blog section.blog-overview .page-width {
display: grid;
grid-gap: 2rem;
grid-template-columns: 1fr 1fr;
}
@media screen and (min-width: 48em) {
section.blog section.blog-overview .page-width {
grid-gap: 3rem;
grid-template-columns: 1fr 1fr 1fr;
}
}
section.blog section.blog-overview .page-width article {
border-radius: 0.6rem;
transition: all 125ms ease-in-out;
transform: translateY(0);
}
@media screen and (min-width: 27em) {
section.blog section.blog-overview .page-width article {
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
}
}
@media screen and (min-width: 48em) {
section.blog section.blog-overview .page-width article:hover {
box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.15);
transform: translateY(-0.1rem);
}
section.blog section.blog-overview .page-width article:hover h5 {
color: #ff5137;
}
}
section.blog section.blog-overview .page-width article a {
display: flex;
flex-direction: column;
height: 100%;
}
section.blog section.blog-overview .page-width article a figure {
border-radius: 0.6rem;
overflow: hidden;
max-height: 23rem;
}
@media screen and (min-width: 27em) {
section.blog section.blog-overview .page-width article a figure {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
section.blog section.blog-overview .page-width article a figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.blog section.blog-overview .page-width article a .content {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 1.5rem 0;
}
@media screen and (min-width: 27em) {
section.blog section.blog-overview .page-width article a .content {
justify-content: space-between;
padding: 2rem 2.5rem 3rem;
background: #ffffff;
border-bottom-left-radius: 0.6rem;
border-bottom-right-radius: 0.6rem;
}
}
section.blog section.blog-overview .page-width article a .content .category {
margin: 0 0 1rem;
color: #a1a1a1;
font-weight: 300;
}
section.blog section.blog-overview .page-width article a .content h5 {
margin: 0 0 1rem;
transition: all 125ms ease-in-out;
}
@media screen and (min-width: 27em) {
section.blog section.blog-overview .page-width article a .content h5 {
margin: 0 0 1.6rem;
}
}
section.blog section.blog-overview .page-width article a .content .read-more {
align-self: flex-start;
text-decoration: underline;
font-size: 1.6rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
section.blog section.blog-overview .categories {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
list-style-type: none;
margin: 5rem 0 5rem;
}
section.blog section.blog-overview .categories li {
display: inline-block;
margin-right: 1rem;
position: relative;
font-weight: 300;
text-align: center;
}
section.blog section.blog-overview .categories li a {
display: block;
position: relative;
width: 15rem;
height: 4rem;
background: #ffffff;
color: #000000;
transition: all 125ms ease-in-out;
border-bottom: 0.3rem solid rgba(0, 0, 0, 0);
}
section.blog section.blog-overview .categories li a span {
display: block;
position: absolute;
text-align: center;
width: 100%;
transition: all 125ms ease-in-out;
bottom: 1rem;
}
section.blog section.blog-overview .categories li a i {
font-size: 5.4rem;
line-height: 10rem;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all 125ms ease-in-out;
}
section.blog section.blog-overview .categories li a.active, section.blog section.blog-overview .categories li a:hover {
background: #ffffff;
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.15);
color: #ff5137;
border-bottom: 0.3rem solid #ff5137;
}
section.blog section.blog-overview .categories li a.active i, section.blog section.blog-overview .categories li a:hover i {
top: -0.2rem;
}
section.blog section.blog-overview .categories li a.active span, section.blog section.blog-overview .categories li a:hover span {
bottom: 1rem;
}
section.blog section.discover-list {
padding: 5rem 0;
}
@media screen and (max-width: 63.99875em) {
section.blog section.discover-list {
padding-bottom: 0;
}
}
section.blog section.discover-list h2 {
margin-bottom: 4rem;
}
section.blog section.discover-list section {
display: flex;
margin-left: -2rem;
margin-right: -16rem;
padding-left: 2rem;
padding-bottom: 0rem;
margin-top: -6rem;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
@media screen and (min-width: 64em) {
section.blog section.discover-list section {
overflow-x: revert;
margin-bottom: -3rem;
}
}
section.blog section.discover-list section:after {
content: "";
display: block;
width: 0.01rem;
flex: 0 0 auto;
}
section.blog-post article > header {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 48em) {
section.blog-post article > header {
min-height: 40rem;
height: 60vh;
flex-direction: row;
}
section.blog-post article > header figure,
section.blog-post article > header div.title {
width: 50%;
}
}
section.blog-post article > header .mobile-back-link a {
display: block;
padding: 2rem;
color: #000000;
font-weight: 300;
}
@media screen and (min-width: 48em) {
section.blog-post article > header .mobile-back-link a {
display: none;
}
}
section.blog-post article > header .mobile-back-link a i {
margin-right: 0.5rem;
}
section.blog-post article > header figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
section.blog-post article > header div.title {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 48em) {
section.blog-post article > header div.title {
margin-left: -5vw;
padding: 5vh 0;
width: calc(50% + 5vw);
}
}
section.blog-post article > header div.title > .inner-width {
display: none;
}
@media screen and (min-width: 48em) {
section.blog-post article > header div.title > .inner-width {
display: block;
}
}
section.blog-post article > header div.title .inner-width {
width: 100%;
}
@media screen and (min-width: 48em) {
section.blog-post article > header div.title .inner-width {
padding: 0 5vw 0 calc(7rem + 3vw);
max-width: calc(53rem + 8vw);
}
}
section.blog-post article > header div.title .inner-width > a {
display: none;
margin: 0 0 2rem;
color: #000000;
font-weight: 300;
}
@media screen and (min-width: 48em) {
section.blog-post article > header div.title .inner-width > a {
display: block;
}
}
section.blog-post article > header div.title .inner-width > a:hover {
color: #ff5137;
}
section.blog-post article > header div.title .inner-width > a i {
margin-right: 0.5rem;
font-size: 1.2rem;
}
section.blog-post article > header div.title blockquote {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 4rem;
font-size: 1.6rem;
color: #ffffff;
background: linear-gradient(90deg, #ff7d55 0.51%, #ff1810 100%);
box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 48em) {
section.blog-post article > header div.title blockquote {
padding: 0;
}
}
section.blog-post article > header div.title blockquote h1 {
color: #ffffff;
}
section.blog-post article div.page-width {
padding-top: 6rem;
padding-bottom: 6rem;
display: flex;
flex-direction: column;
}
@media screen and (min-width: 48em) {
section.blog-post article div.page-width {
flex-direction: row;
}
}
section.blog-post article div.page-width aside {
order: 2;
position: relative;
display: flex;
flex-direction: column;
margin: 0 6% 6rem 0;
flex-shrink: 0;
}
@media screen and (min-width: 48em) {
section.blog-post article div.page-width aside {
order: 1;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
width: 36%;
}
}
section.blog-post article div.page-width aside .learn-more {
order: 2;
position: sticky;
top: 6rem;
box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.15);
background: #ffffff;
}
@media screen and (min-width: 48em) {
section.blog-post article div.page-width aside .learn-more {
margin-right: 2rem;
max-width: 27rem;
order: 1;
}
}
section.blog-post article div.page-width aside .learn-more:before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 25%;
left: -5rem;
background: url("/images/raster.svg") no-repeat top left;
width: 14rem;
height: 22.3rem;
}
section.blog-post article div.page-width aside .learn-more figure {
height: 25rem;
}
section.blog-post article div.page-width aside .learn-more figure img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
object-position: top center;
}
section.blog-post article div.page-width aside .learn-more div.content {
padding: 2rem 3rem;
background: #ffffff;
}
section.blog-post article div.page-width aside .learn-more div.content .contact-options .contact-option {
font-size: 1.4rem;
font-weight: 300;
}
section.blog-post article div.page-width aside .learn-more div.content .contact-options .contact-option:hover span,
section.blog-post article div.page-width aside .learn-more div.content .contact-options .contact-option:hover i {
color: #ff5137;
}
section.blog-post article div.page-width aside .learn-more div.content .contact-options .contact-option i {
color: #000000;
}
section.blog-post article div.page-width aside div.socials {
margin-bottom: 3rem;
order: 1;
display: flex;
}
@media screen and (min-width: 48em) {
section.blog-post article div.page-width aside div.socials {
margin: 0;
top: 6rem;
position: sticky;
flex-direction: column;
order: 2;
}
}
section.blog-post article div.page-width aside div.socials a {
display: block;
margin: 1rem 1rem 1.1rem;
color: #000000;
font-size: 2.1rem;
}
@media screen and (min-width: 48em) {
section.blog-post article div.page-width aside div.socials a {
margin: 1rem 0 1.1rem;
}
}
section.blog-post article div.page-width aside div.socials a:hover {
color: #ff5137;
}
section.blog-post article div.page-width section.paragraph {
order: 1;
}
@media screen and (min-width: 48em) {
section.blog-post article div.page-width section.paragraph {
order: 2;
}
}
section.blog-post article div.page-width section.paragraph .blog-video {
position: relative;
height: 0;
padding-top: 56.25%;
width: 100%;
}
section.blog-post article div.page-width section.paragraph .blog-video iframe {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
section.cart {
padding: 3rem 0;
}
@media screen and (min-width: 48em) {
section.cart {
padding: 8rem 0;
}
}
section.cart div.page-width > header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin: 0 0 3rem;
}
section.cart div.page-width > header h1,
section.cart div.page-width > header p,
section.cart section.product-detail > header div.page-width > header div.product-summary div.short-description,
section.product-detail > header section.cart div.page-width > header div.product-summary div.short-description {
margin: 0;
}
section.cart h1 {
margin-bottom: 3rem;
}
section.cart footer {
display: flex;
flex-direction: column;
margin: 3rem 0;
}
@media screen and (min-width: 48em) {
section.cart footer {
flex-direction: row;
}
}
section.cart footer .tip {
width: 100%;
}
@media screen and (max-width: 47.99875em) {
section.cart footer .tip {
order: 2;
}
}
section.cart footer .tip article {
padding: 2.4rem 3.6rem;
background: #ffffff;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 48em) {
section.cart footer .tip article {
margin-right: 6vw;
}
}
section.cart footer .tip form input {
width: 80%;
}
@media screen and (min-width: 48em) {
section.cart footer .tip form input {
width: unset;
}
}
section.cart footer .tip form button {
margin-top: 1.2rem;
width: 80%;
}
@media screen and (min-width: 48em) {
section.cart footer .tip form button {
width: unset;
}
}
section.cart footer table.summary {
width: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
@media screen and (min-width: 48em) {
section.cart footer table.summary {
width: auto;
min-width: 30rem;
}
}
section.cart .cart-actions {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media screen and (max-width: 26.99875em) {
section.cart .cart-actions a {
flex-grow: 1;
width: 100%;
margin-bottom: 1.5rem;
}
section.cart .cart-actions a:first-child {
order: 2;
}
}
section.cart .cart-actions div {
display: flex;
flex-direction: column;
width: 100%;
}
@media screen and (min-width: 48em) {
section.cart .cart-actions div {
flex-direction: row;
align-items: center;
width: unset;
}
}
@media screen and (min-width: 48em) {
section.cart .cart-actions div a + a {
margin-left: 2rem;
}
}
section.cart .cart-actions div .quotation {
order: 1;
}
@media screen and (min-width: 48em) {
section.cart .cart-actions div .quotation {
order: unset;
}
}
section.cart .empty-cart {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem;
background: #f9f9f9;
}
@media screen and (min-width: 48em) {
section.cart .empty-cart {
padding: 8vh;
}
}
.cart-product {
position: relative;
display: grid;
grid-template-areas: "thumb name name" "thumb quantity pricing" "delivery delivery delivery" "details details details";
grid-template-columns: 1fr 2fr;
margin: 0 -3rem 1rem;
align-items: center;
padding: 3rem;
background: #f9f9f9;
}
@media screen and (min-width: 48em) {
.cart-product {
margin: 0 0 1rem;
grid-gap: 0 2rem;
grid-template-areas: "thumb name delivery quantity pricing" "thumb details delivery quantity pricing";
grid-template-columns: 15rem 4fr 3fr 0.8fr 2fr;
align-items: flex-start;
}
}
.cart-product figure {
grid-area: thumb;
align-self: flex-start;
margin-right: 1rem;
width: 8rem;
height: 8rem;
}
@media screen and (min-width: 27em) {
.cart-product figure {
width: 10rem;
height: 10rem;
margin: 0;
}
}
.cart-product figure img {
height: 100%;
width: 100%;
object-fit: cover;
}
.cart-product .product-name {
grid-area: name;
}
.cart-product .product-name h5 {
margin-bottom: 1rem;
}
.cart-product .product-details {
grid-area: details;
margin-top: 2rem;
font-weight: 300;
}
.cart-product-upsell .cart-product .product-details {
margin-top: 1rem;
}
@media screen and (min-width: 48em) {
.cart-product .product-details {
margin-top: 5.5rem;
}
.cart-product-upsell .cart-product .product-details {
margin-top: 1rem;
}
}
.cart-product .product-details dl {
margin: 1rem 0;
display: grid;
grid-template-columns: 1fr 2fr;
color: #909090;
}
@media screen and (min-width: 48em) {
.cart-product .product-details dl {
min-width: 44rem;
}
}
.cart-product .product-details dl dt,
.cart-product .product-details dl dd {
margin: 0.5rem 0;
}
.cart-product .product-details dl dt {
font-weight: 500;
color: #363636;
}
.cart-product .delivery-estimate {
grid-area: delivery;
display: flex;
align-items: center;
margin-top: 2rem;
}
.cart-product .delivery-estimate i {
margin-right: 2rem;
font-size: 2rem;
}
.cart-product .delivery-estimate div span {
display: block;
font-weight: bold;
}
@media screen and (min-width: 48em) {
.cart-product .delivery-estimate,
.cart-product .pricing {
margin-top: 3.5rem;
}
}
.cart-product .quantity {
grid-area: quantity;
}
@media screen and (max-width: 47.99875em) {
.cart-product .quantity select {
padding: 0.5rem 1rem;
background: #ffffff;
}
}
@media screen and (min-width: 48em) {
.cart-product .quantity {
margin-top: 2.5rem;
}
}
.cart-product .pricing {
grid-area: pricing;
text-align: right;
font-size: 1.7rem;
line-height: 2rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.cart-product .pricing > span {
display: block;
}
.cart-product .pricing .old-price {
text-decoration: line-through;
font-weight: 300;
}
.cart-product .pricing .price {
font-weight: 700;
}
.cart-product .pricing .price.discount-price {
margin-left: 0.6rem;
color: #ff5137;
white-space: nowrap;
}
.cart-product .pricing .price .vat {
display: block;
font-size: 1.3rem;
color: #909090;
font-weight: 300;
}
.cart-product a.product-remove {
position: absolute;
display: block;
top: 1rem;
right: 1rem;
font-size: 2rem;
color: #ff1810;
cursor: pointer;
}
.cart-product.cart-product-upsell {
margin-top: -1rem;
}
.cart-product.cart-product-upsell .product-details {
margin-top: 1rem;
}
@media screen and (min-width: 48em) {
.cart-product.cart-product-upsell .product-details {
margin-top: 1rem;
}
}
.cart-product.cart-product-upsell .pricing {
font-size: 1.4rem;
color: #909090;
}
.cart-product.cart-product-upsell .pricing > span {
display: block;
}
.cart-product.cart-product-upsell .pricing .price {
font-weight: 700;
}
.cart-product.cart-product-upsell .pricing .price.discount-price {
color: #ff5137;
}
.cart-product.cart-product-upsell .pricing .price .vat {
display: block;
font-size: 1.3rem;
color: #909090;
font-weight: 300;
}
section.category section.banner {
margin-bottom: 3rem;
}
section.category section.category-list {
padding: 5rem 0;
background: #f9f9f9;
}
section.category section.category-text {
padding: 5rem 0;
}
section.category section.category-text .page-width {
max-width: 70rem;
}
header.checkout-header {
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
@media screen and (min-width: 48em) {
header.checkout-header {
flex-wrap: nowrap;
height: 6rem;
}
}
header.checkout-header p, header.checkout-header section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary header.checkout-header div.short-description {
margin: 0;
font-size: 1.3rem;
line-height: 1.6rem;
}
header.checkout-header p:first-child, header.checkout-header section.product-detail > header .page-width div.product-summary div.short-description:first-child, section.product-detail > header .page-width div.product-summary header.checkout-header div.short-description:first-child {
order: 3;
padding: 1rem 2rem;
width: 100%;
border-top: 0.1rem solid #eeeeee;
}
header.checkout-header p:last-child, header.checkout-header section.product-detail > header .page-width div.product-summary div.short-description:last-child, section.product-detail > header .page-width div.product-summary header.checkout-header div.short-description:last-child {
padding: 1rem 2rem;
order: 2;
}
@media screen and (min-width: 48em) {
header.checkout-header p:last-child, header.checkout-header section.product-detail > header .page-width div.product-summary div.short-description:last-child, section.product-detail > header .page-width div.product-summary header.checkout-header div.short-description:last-child {
margin-right: 2rem;
padding: 0;
width: calc(100% - 8rem - 4rem - 2rem);
}
}
@media screen and (min-width: 48em) {
header.checkout-header p, header.checkout-header section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary header.checkout-header div.short-description {
padding: 0;
font-size: 1.5rem;
text-align: center;
width: 50%;
}
header.checkout-header p:first-child, header.checkout-header section.product-detail > header .page-width div.product-summary div.short-description:first-child, section.product-detail > header .page-width div.product-summary header.checkout-header div.short-description:first-child {
order: 1;
padding-right: 5rem;
border: 0;
}
header.checkout-header p:last-child, header.checkout-header section.product-detail > header .page-width div.product-summary div.short-description:last-child, section.product-detail > header .page-width div.product-summary header.checkout-header div.short-description:last-child {
order: 3;
padding-left: 5rem;
}
}
header.checkout-header a.logo {
order: 1;
display: block;
margin: 1rem 2rem;
width: 11rem;
}
header.checkout-header a.logo.logo-nl {
width: 12rem;
}
@media screen and (min-width: 48em) {
header.checkout-header a.logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
margin: 0;
}
}
header.checkout-header a.logo img {
display: block;
width: 100%;
}
section.checkout {
flex-grow: 1;
display: flex;
flex-direction: column;
height: 100%;
}
section.checkout form {
flex-grow: 1;
display: flex;
flex-direction: column;
height: 100%;
}
@media screen and (min-width: 48em) {
section.checkout form {
flex-direction: row;
}
}
@media screen and (min-width: 48em) {
section.checkout form > section {
padding: 5rem 5vw;
width: 50%;
}
}
section.checkout form > section > div {
margin: 0 auto;
max-width: 50rem;
}
section.checkout form section.details input {
font-size: 1.6rem;
}
@media screen and (min-width: 48em) {
section.checkout form section.details input {
font-size: 1.4rem;
}
}
section.checkout form section.details .collapsible {
margin-bottom: 1rem;
}
section.checkout form section.details .collapsible.completed > label i {
visibility: visible;
}
section.checkout form section.details .collapsible > label {
display: flex;
justify-content: space-between;
padding: 2.5rem;
background: #f9f9f9;
font-size: 2.3rem;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
section.checkout form section.details .collapsible > label:after {
display: none;
}
section.checkout form section.details .collapsible > label i {
visibility: hidden;
color: #7cc461;
font-size: 2rem;
}
section.checkout form section.details .collapsible > div > div {
margin: 2rem 0 1rem;
padding: 0 2rem;
}
@media screen and (min-width: 48em) {
section.checkout form section.details .collapsible > div > div {
padding: 0;
}
}
section.checkout form section.details .collapsible > div > div > input {
width: 100%;
}
section.checkout form section.details .collapsible > div > div input {
margin-bottom: 1.5rem;
}
section.checkout form section.overview {
background: #f9f9f9;
}
@media screen and (max-width: 47.99875em) {
section.checkout form section.overview {
padding: 2rem;
}
}
section.checkout form section.overview > div {
position: sticky;
top: 6rem;
}
section.checkout form section.overview h3 {
font-size: 1.8rem;
}
@media screen and (min-width: 48em) {
section.checkout form section.overview h3 {
margin-bottom: 1rem;
font-size: 3rem;
}
}
section.checkout form section.overview .delivery-details {
display: flex;
justify-content: space-between;
padding: 3rem 0;
border-bottom: 0.1rem solid #eeeeee;
}
section.checkout form section.overview .delivery-details span {
font-weight: 300;
}
section.checkout form section.overview .delivery-date {
border-bottom: 0.1rem solid #eeeeee;
padding-bottom: 1.5rem;
padding-top: 1.7rem;
}
section.checkout form section.overview .delivery-date h5,
section.checkout form section.overview .delivery-date span {
display: inline;
}
section.checkout form section.overview .delivery-date span {
margin-left: 0.5rem;
font-weight: 300;
}
section.checkout .checkout__radio,
section.checkout .radio_payment_method {
max-width: 1rem;
}
section.checkout .address-details h5 {
margin: 1.6rem 0 0 0;
}
section.checkout .checkout-product {
display: grid;
grid-template-areas: "thumb name pricing" "details details details";
grid-template-columns: auto auto auto;
grid-gap: 1rem;
padding: 2rem 0;
border-top: 0.1rem solid #eeeeee;
}
@media screen and (min-width: 48em) {
section.checkout .checkout-product {
grid-template-areas: "thumb name pricing" "thumb details details";
}
}
section.checkout .checkout-product:first-of-type {
border-top: none;
}
section.checkout .checkout-product:last-of-type {
border-bottom: 0.1rem solid #eeeeee;
}
section.checkout .checkout-product figure {
grid-area: thumb;
flex-shrink: 0;
width: 6rem;
height: 6rem;
}
section.checkout .checkout-product figure img {
height: 100%;
width: 100%;
object-fit: cover;
}
section.checkout .checkout-product .checkout-product-name {
grid-area: name;
}
section.checkout .checkout-product .product-details {
grid-area: details;
flex-grow: 1;
font-weight: 300;
}
section.checkout .checkout-product .product-details dl {
margin: 1rem 0 0;
display: grid;
grid-template-columns: 1fr 2fr;
color: #a1a1a1;
}
section.checkout .checkout-product .product-details dl dt,
section.checkout .checkout-product .product-details dl dd {
margin: 0.5rem 0;
}
section.checkout .checkout-product .product-details dl dt {
margin-right: 1rem;
font-weight: 500;
color: #363636;
}
section.checkout .checkout-product .pricing {
grid-area: pricing;
flex-shrink: 0;
text-align: right;
font-size: 1.6rem;
line-height: 2rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
section.checkout .checkout-product .pricing .old-price {
text-decoration: line-through;
font-weight: 300;
}
section.checkout .checkout-product .pricing .price {
white-space: nowrap;
font-weight: 700;
}
section.checkout .checkout-product .pricing .price.discount-price {
margin-left: 1rem;
color: #ff5137;
}
section.checkout .checkout-product .pricing .price .vat {
display: block;
font-size: 1.3rem;
color: #a1a1a1;
font-weight: 300;
}
section.checkout .checkout-product.upsell {
border-top: none;
}
section.checkout .checkout-product.upsell .pricing {
color: #909090;
font-size: 1.4rem;
font-weight: 300;
}
section.checkout .address-response-field {
color: #ff5137;
margin-bottom: 1rem;
}
section.checkout .address-response-field.hidden {
display: none;
}
section.checkout .address-field-fullwidth {
width: 100%;
}
section.checkout .step1 .auth-line {
margin: 3rem 2rem 0;
padding-bottom: 0;
}
section.checkout .step1 .logout {
float: right;
color: #a1a1a1;
transition: all 75ms ease-in-out;
}
section.checkout .step1 .logout:hover {
color: #ff5137;
}
section.checkout .step1 .customer-type {
display: flex;
justify-content: space-between;
}
section.checkout .step1 .customer-type label {
display: flex;
justify-content: space-between;
align-items: center;
width: calc(50% - 1rem);
padding: 1rem 1.2rem;
border: 0.1rem solid #eeeeee;
border-radius: 0.4rem;
color: #a1a1a1;
font-size: 1.4rem;
transition: all 125ms ease-in-out;
cursor: pointer;
}
section.checkout .step1 .customer-type label i {
opacity: 0;
color: #7cc461;
font-size: 1.8rem;
transition: all 125ms ease-in-out;
}
section.checkout .step1 .customer-type input {
position: absolute;
opacity: 0;
}
section.checkout .step1 .customer-type input:checked + label {
border: 0.1rem solid #a1a1a1;
color: #000000;
}
section.checkout .step1 .customer-type input:checked + label i {
opacity: 1;
}
section.checkout .step1 .customer-data-receiver.error {
color: #ff1810;
}
section.checkout .step1 .customer-data-receiver.error.btw-error {
margin-bottom: 0.8rem;
}
section.checkout .step1 .customer-data-receiver.error.hidden {
display: none;
}
section.checkout .step2 .delivery-options {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
}
section.checkout .step2 .delivery-options .delivery-option {
width: calc(33.3333333333% - 2rem);
margin: 0 1rem 1.5rem;
text-align: center;
min-width: 14rem;
flex-grow: 1;
}
@media screen and (min-width: 27em) {
section.checkout .step2 .delivery-options .delivery-option {
flex-grow: 0;
}
}
section.checkout .step2 .delivery-options .delivery-option input {
position: absolute;
opacity: 0;
}
section.checkout .step2 .delivery-options .delivery-option input:checked + label {
border-color: #7cc461;
background: rgb(240.9944700461, 248.6921658986, 238.1078341014);
}
section.checkout .step2 .delivery-options .delivery-option label {
display: block;
padding: 1.5rem 1rem;
border: 0.1rem solid #eeeeee;
border-radius: 0.4rem;
font-weight: 400;
cursor: pointer;
transition: all 75ms ease-in-out;
}
section.checkout .step2 .delivery-options .delivery-option label:hover {
border-color: #a1a1a1;
}
section.checkout .step2 .delivery-options .delivery-option label > span {
display: block;
}
section.checkout .step2 .delivery-options .delivery-option label > span.delivery-type {
font-weight: 700;
}
section.checkout .step2 .delivery-options .delivery-option label > span.delivery-type span {
margin-bottom: 1rem;
}
section.checkout .step2 .delivery-options .delivery-option label > span.price {
margin: 0 0 1rem;
font-weight: 700;
}
section.checkout .step2 .delivery-options .delivery-option label > span.price .vat {
font-size: 90%;
font-weight: 300;
}
section.checkout .step2 .delivery-options .delivery-option label > span.delivery-date span {
display: block;
font-weight: 700;
}
section.checkout .step2 .delivery-options .delivery-option label > span span.label {
display: block;
font-weight: 300;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
section.checkout .step2 .delivery-address > p, section.checkout .step2 section.product-detail > header .page-width div.product-summary .delivery-address > div.short-description, section.product-detail > header .page-width div.product-summary section.checkout .step2 .delivery-address > div.short-description {
color: #a1a1a1;
font-weight: 700;
}
section.checkout .step2 .delivery-address > p a, section.checkout .step2 section.product-detail > header .page-width div.product-summary .delivery-address > div.short-description a, section.product-detail > header .page-width div.product-summary section.checkout .step2 .delivery-address > div.short-description a {
font-weight: 400;
margin: 0 0.5rem;
}
section.checkout .step2 .delivery-address > p a:first-of-type, section.checkout .step2 section.product-detail > header .page-width div.product-summary .delivery-address > div.short-description a:first-of-type, section.product-detail > header .page-width div.product-summary section.checkout .step2 .delivery-address > div.short-description a:first-of-type {
margin-left: 0;
}
section.checkout .step2 .button {
margin-bottom: 2rem;
}
section.checkout .step3 .payment-methods input {
position: absolute;
opacity: 0;
}
section.checkout .step3 .payment-methods input:checked + label,
section.checkout .step3 .payment-methods label:hover {
background: #f9f9f9;
border-color: #a1a1a1;
}
section.checkout .step3 .payment-methods label.payment-method {
display: block;
margin: 0 0 1.5rem;
padding: 1rem 1.2rem;
border: 0.1rem solid #eeeeee;
border-radius: 0.4rem;
cursor: pointer;
transition: all 75ms ease-in-out;
}
section.checkout .step3 .payment-methods label.payment-method .payment-method-type {
display: flex;
}
section.checkout .step3 .payment-methods label.payment-method .payment-method-type img {
margin-right: 2rem;
width: 4rem;
}
section.checkout .step3 .payment-methods label.payment-method .payment-method-type img.onaccount {
align-self: center;
padding: 0.8rem 1rem;
border: 0.1rem solid #e4e4e4;
border-radius: 0.6rem;
}
section.checkout .step3 .payment-methods label.payment-method .payment-method-type p, section.checkout .step3 .payment-methods label.payment-method .payment-method-type section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary section.checkout .step3 .payment-methods label.payment-method .payment-method-type div.short-description {
margin: 0;
}
section.checkout .step3 .payment-methods label.payment-method .payment-method-type p span, section.checkout .step3 .payment-methods label.payment-method .payment-method-type section.product-detail > header .page-width div.product-summary div.short-description span, section.product-detail > header .page-width div.product-summary section.checkout .step3 .payment-methods label.payment-method .payment-method-type div.short-description span {
display: block;
font-weight: 700;
}
.modal-design-isi .modal-body {
max-width: 90vw;
width: 100% !important;
}
.modal-design-isi .modal-body iframe {
width: 100%;
height: calc(100% - 3rem);
height: -moz-calc(100% - 3rem);
height: -webkit-calc(100% - 3rem);
}
html.macos.safari .modal-design-isi .modal-body iframe {
height: 90vh !important;
}
.modal-design-upload .modal-body {
max-width: 57rem;
}
.modal-design-upload p, .modal-design-upload section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .modal-design-upload div.short-description, .modal-design-upload label {
font-size: 1.4rem;
font-weight: 300;
color: #363636;
}
.modal-design-upload input[type=text], .modal-design-upload input[type=file], .modal-design-upload textarea {
margin-top: 1rem !important;
width: 100%;
}
.modal-design-upload input[type=file] {
margin-bottom: 1rem;
appearance: none;
}
.modal-design-upload h6 {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 1rem;
margin-top: 2rem;
}
.modal-design-upload h5 {
margin-top: 3rem;
margin-bottom: 1.6rem;
padding-bottom: 0.8rem;
border-bottom: 0.1rem solid #eeeeee;
}
.modal-design-upload small {
font-size: 1.2rem;
width: 100%;
display: block;
position: relative;
margin-bottom: 2rem;
color: #a1a1a1;
}
form.configurator-form {
flex-grow: 1;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 47.99875em) {
form.configurator-form {
padding-bottom: 15rem;
}
}
.volume-discount {
float: right;
margin-top: 0.8rem;
}
.volume-discount span {
margin-left: 1rem;
color: #7cc461;
}
.configurator {
flex-grow: 1;
display: flex;
flex-direction: column;
}
@media screen and (min-width: 48em) {
.configurator {
flex-direction: row;
}
}
.configurator .step-sku .spinner {
opacity: 0;
visibility: hidden;
width: 2rem;
height: 2rem;
vertical-align: middle;
}
.configurator .step-sku.first-step.loading .spinner {
opacity: 1;
visibility: visible;
}
.configurator section.configure {
flex-grow: 1;
padding: 5rem 7vw;
background: #f9f9f9;
}
.configurator section.configure > div {
margin: 0 auto;
width: 100%;
max-width: 62rem;
}
.configurator section.configure > div header {
position: relative;
padding-left: 3.5rem;
}
@media screen and (min-width: 48em) {
.configurator section.configure > div header {
padding: 0;
}
}
.configurator section.configure > div header a {
position: absolute;
top: 0.5rem;
left: 0;
font-size: 2.5rem;
color: #000000;
}
@media screen and (min-width: 48em) {
.configurator section.configure > div header a {
left: -5vw;
}
}
.configurator section.configure > div header a:hover {
color: #ff5137;
}
.configurator section.configure > div header h3 {
margin: 0 0 3rem;
}
@media screen and (max-width: 47.99875em) {
.configurator section.configure > div select option {
font-size: 1.6rem;
}
}
.configurator section.configure > div .modal-content img {
max-width: 100%;
}
.configurator section.configure > div .modal-content ul,
.configurator section.configure > div .modal-content ol {
margin: 1rem 0 1.5rem 3rem;
list-style: initial;
list-style-position: outside;
font-size: 1.5rem;
font-weight: 300;
}
.configurator section.configure > div .modal-content ul li,
.configurator section.configure > div .modal-content ol li {
margin: 0.6rem 0;
}
.configurator aside {
padding: 5rem 7vw;
flex-shrink: 1;
}
@media screen and (max-width: 47.99875em) {
.configurator aside {
position: fixed;
left: 0;
bottom: 0;
right: 0;
background-color: #ffffff;
z-index: 99;
padding: 3rem 7vw;
}
.configurator aside .configure-aside header, .configurator aside .configure-aside .configuration, .configurator aside .configure-aside .checkout .button-open, .configurator aside .configure-aside .customer-service {
display: none;
}
}
@media screen and (min-width: 48em) {
.configurator aside .configure-aside {
position: sticky;
top: 2rem;
}
}
@media screen and (min-width: 48em) {
.configurator aside .product-info.more-info {
display: none;
}
}
.configurator aside dl {
margin: 2rem 0;
}
@media screen and (min-width: 48em) {
.configurator aside dl {
display: block !important;
}
}
.configurator aside dl dt {
margin: 2rem 0 0.8rem;
font-size: 1.6rem;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.configurator aside dl dd {
font-weight: 300;
}
.configurator aside dl dd strong {
font-weight: 400;
color: #a1a1a1;
}
.configurator aside .product-info {
display: block;
position: absolute;
right: 8vw;
margin-top: 0.3rem;
}
@media screen and (min-width: 48em) {
.configurator aside .product-info {
display: none;
}
}
.configurator aside .prices {
display: flex;
align-items: flex-end;
margin: 3rem 0 1.5rem;
padding-top: 4rem;
width: 100%;
border-top: 0.1rem solid #eeeeee;
}
@media screen and (max-width: 47.99875em) {
.configurator aside .prices {
padding: 0;
margin: 0;
border: 0;
}
}
.configurator aside .prices .price {
font-size: 2.3rem;
}
.configurator aside .prices span.currency {
margin-right: 0.5rem;
}
.configurator aside .prices span.vat-price {
margin-left: 1.4rem;
line-height: 1.4rem;
}
.configurator aside .prices .spinner {
margin-left: 1rem;
}
.configurator aside a.pdf {
font-weight: 300;
}
.configurator aside a.pdf i {
margin-right: 0.5rem;
font-size: 2rem;
vertical-align: middle;
}
.configurator aside a.pdf span {
text-decoration: underline;
}
.configurator aside .checkout {
margin-top: 4rem;
}
.configurator aside .checkout button {
display: block;
margin-top: 2rem;
text-align: left;
white-space: nowrap;
width: 100%;
}
.configurator aside .customer-service {
margin: 3rem 0;
padding: 3rem;
background: #ffffff;
box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.15);
}
.configurator aside .customer-service h5 {
margin: 0 0 1rem;
}
.configurator aside .customer-service i {
font-size: 2rem;
vertical-align: middle;
}
.configurator .step .option-amount {
width: 97%;
}
.configurator .step .option-amount-item {
display: grid;
grid-gap: 0;
grid-template-columns: 100%;
}
.configurator .step .option-amount-item span {
font-weight: 300;
color: #a1a1a1;
}
@media screen and (min-width: 64em) {
.configurator .step .option-amount-item {
grid-gap: 1rem;
grid-template-columns: 1fr 1fr;
}
}
.configurator .step .option-amount-item label {
background: #ffffff;
position: relative;
font-weight: 400;
padding: 0;
margin-bottom: 1rem;
border-radius: 0.4rem;
width: 100%;
height: 4rem;
line-height: 4rem;
transition: all 125ms ease-in-out;
}
.configurator .step .option-amount-item label.shadow {
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
}
.configurator .step .option-amount-item label.show-for-desktop {
display: none;
}
@media screen and (min-width: 64em) {
.configurator .step .option-amount-item label.show-for-desktop {
display: initial;
}
.configurator .step .option-amount-item label.show-for-mobile {
display: none;
}
}
@media screen and (min-width: 64em) {
.configurator .step .option-amount-item label {
margin-bottom: 0;
}
}
.configurator .step .option-amount-item label img {
width: 4rem;
height: 4rem;
margin: 0 1rem;
padding: 0;
border: none;
}
.configurator .step .option-amount-item label p, .configurator .step .option-amount-item label section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .configurator .step .option-amount-item label div.short-description {
margin: 0;
padding: 0 2rem;
line-height: inherit;
border-left: 0.3rem solid transparent;
transition: all 125ms ease-in-out;
}
.configurator .step .option-amount-item label p strong, .configurator .step .option-amount-item label section.product-detail > header .page-width div.product-summary div.short-description strong, section.product-detail > header .page-width div.product-summary .configurator .step .option-amount-item label div.short-description strong {
font-size: 1.6rem;
font-weight: 700;
}
.configurator .step .option-amount-item label p span, .configurator .step .option-amount-item label section.product-detail > header .page-width div.product-summary div.short-description span, section.product-detail > header .page-width div.product-summary .configurator .step .option-amount-item label div.short-description span {
font-size: 1rem;
font-weight: 500;
color: #a1a1a1;
position: absolute;
left: 20%;
}
.configurator .step .option-amount-item label p span + strong, .configurator .step .option-amount-item label section.product-detail > header .page-width div.product-summary div.short-description span + strong, section.product-detail > header .page-width div.product-summary .configurator .step .option-amount-item label div.short-description span + strong {
text-align: right;
float: right;
}
.configurator .step .option-amount-item label p span + strong i, .configurator .step .option-amount-item label section.product-detail > header .page-width div.product-summary div.short-description span + strong i, section.product-detail > header .page-width div.product-summary .configurator .step .option-amount-item label div.short-description span + strong i {
display: inline;
font-style: normal;
font-weight: 300;
font-size: 1.4rem;
margin-right: 0.5rem;
}
@media screen and (min-width: 64em) {
.configurator .step .option-amount-item label p span + strong i, .configurator .step .option-amount-item label section.product-detail > header .page-width div.product-summary div.short-description span + strong i, section.product-detail > header .page-width div.product-summary .configurator .step .option-amount-item label div.short-description span + strong i {
display: none;
}
}
@media screen and (min-width: 80em) {
.configurator .step .option-amount-item label p span + strong i, .configurator .step .option-amount-item label section.product-detail > header .page-width div.product-summary div.short-description span + strong i, section.product-detail > header .page-width div.product-summary .configurator .step .option-amount-item label div.short-description span + strong i {
display: inline;
}
}
.configurator .step .option-amount-item label input[type=radio]:checked + p, .configurator .step .option-amount-item label section.product-detail > header .page-width div.product-summary input[type=radio]:checked + div.short-description, section.product-detail > header .page-width div.product-summary .configurator .step .option-amount-item label input[type=radio]:checked + div.short-description {
border-left-color: #ff5137;
}
.configurator .step .option-amount-item label input[type=radio]:checked + p strong, .configurator .step .option-amount-item label section.product-detail > header .page-width div.product-summary input[type=radio]:checked + div.short-description strong, section.product-detail > header .page-width div.product-summary .configurator .step .option-amount-item label input[type=radio]:checked + div.short-description strong {
color: #ff5137;
}
.configurator .step .option-amount-item label input[type=number] {
box-shadow: none;
width: inherit;
padding: 0 2rem;
outline: 0;
height: 4rem;
border: 0.1rem solid #eeeeee;
transition: all 125ms ease-in-out;
font-size: 1.6rem;
font-weight: 700;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
-moz-appearance: textfield;
}
.configurator .step .option-amount-item label input[type=number]::-webkit-input-placeholder {
color: #a1a1a1;
font-weight: 400;
font-size: 1.4rem;
}
.configurator .step .option-amount-item label input[type=number]:-moz-placeholder {
color: #a1a1a1;
font-weight: 400;
font-size: 1.4rem;
}
.configurator .step .option-amount-item label input[type=number]::-moz-placeholder {
color: #a1a1a1;
font-weight: 400;
font-size: 1.4rem;
}
.configurator .step .option-amount-item label input[type=number]:-ms-input-placeholder {
color: #a1a1a1;
font-weight: 400;
font-size: 1.4rem;
}
.configurator .step .option-amount-item label input[type=number]:focus {
color: #000000;
border-color: #ff5137;
}
.configurator .step .option-amount-item label input[type=number]::-webkit-inner-spin-button, .configurator .step .option-amount-item label input[type=number]::-webkit-outer-spin-button {
height: auto;
-webkit-appearance: none;
margin: 0;
}
.configurator .step .option-autocomplete .select2-container, .configurator .step .option-autocomplete .select2-selection {
min-width: 16rem;
}
.configurator .step .option-autocomplete .select2-container {
padding-right: 4rem;
}
.configurator .step .option-design > label {
position: relative;
display: block;
width: 97%;
margin-bottom: 3.2rem;
}
.configurator .step .option-design > label.mobile-only {
display: none;
}
@media screen and (max-width: 63.99875em) {
.configurator .step .option-design > label.mobile-only {
display: block;
}
}
.configurator .step .option-design > label.desktop-only {
display: none;
}
@media screen and (min-width: 64em) {
.configurator .step .option-design > label.desktop-only {
display: block;
}
}
@media screen and (min-width: 64em) {
.configurator .step .option-design > label {
margin-bottom: 3rem;
background-color: #ffffff;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 0.3rem;
border-left: 0.3rem solid #ffffff;
}
.configurator .step .option-design > label:hover {
border-left: 0.3rem solid #ff5137;
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15);
}
}
.configurator .step .option-design > label article {
text-align: center;
padding-bottom: 6rem;
background: none;
box-shadow: none;
}
@media screen and (min-width: 64em) {
.configurator .step .option-design > label article {
position: relative;
display: flex;
align-items: center;
padding: 4rem 10rem 5rem 3rem;
}
}
.configurator .step .option-design > label article figure {
width: 100%;
height: 12rem;
margin-bottom: 3.2rem;
min-width: 11.6rem;
}
@media screen and (max-width: 26.99875em) {
.configurator .step .option-design > label article figure:first-of-type {
display: none;
}
}
@media screen and (min-width: 64em) {
.configurator .step .option-design > label article figure {
padding-top: 0;
margin-bottom: 0;
}
}
@media screen and (min-width: 64em) {
.configurator .step .option-design > label article .text-wrapper {
margin-left: 2.25rem;
}
}
.configurator .step .option-design > label article h5 {
font-size: 1.6rem;
margin-bottom: 0.2rem;
}
@media screen and (min-width: 64em) {
.configurator .step .option-design > label article h5 {
text-align: left;
}
}
.configurator .step .option-design > label article p, .configurator .step .option-design > label article section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .configurator .step .option-design > label article div.short-description {
font-size: 1.4rem;
font-weight: 300;
line-height: 1.8rem;
min-height: 7.2rem;
padding-left: 0;
}
@media screen and (min-width: 64em) {
.configurator .step .option-design > label article p, .configurator .step .option-design > label article section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .configurator .step .option-design > label article div.short-description {
text-align: left;
}
}
.configurator .step .option-design > label article span.design-price {
display: none;
position: absolute;
top: 4.2rem;
right: 4rem;
color: #ff5137;
}
@media screen and (min-width: 64em) {
.configurator .step .option-design > label article span.design-price {
display: block;
}
}
.configurator .step .option-design > label article span.button {
margin-top: 3.2rem;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 6rem);
text-overflow: ellipsis;
white-space: nowrap;
}
@media screen and (min-width: 64em) {
.configurator .step .option-design > label article span.button {
position: relative;
left: 0;
transform: unset;
width: unset;
}
}
@media screen and (min-width: 64em) {
.configurator .step .option-design > label article span.button.mobile-only {
display: none;
}
}
.configurator .step .option-design > label .warning-block {
width: 100%;
background-color: white;
padding: 2em;
margin-bottom: -2em;
}
.configurator .step .option-design > label:hover article span.button:before {
opacity: 1;
}
.configurator .step .option-design > label:hover article span.button:after {
transform: translateX(0.5rem);
}
.configurator .step .option-design > label #configurator-design-icon-dvc {
background: url("../images/design-dvc.svg") no-repeat center center;
}
.configurator .step .option-design > label #configurator-design-icon-self {
background: url("../images/design-isi.svg") no-repeat center center;
}
.configurator .step .option-design > label #configurator-design-icon-control {
background: url("../images/design-control.svg") no-repeat center center;
}
.configurator .step .option-image {
margin: 0 5% 5% 0;
width: 45%;
}
@media screen and (min-width: 27em) {
.configurator .step .option-image {
margin: 0 3% 3% 0;
width: 30%;
}
}
@media screen and (min-width: 48em) {
.configurator .step .option-image {
margin: 0 5% 5% 0;
width: 45%;
}
}
@media screen and (min-width: 64em) {
.configurator .step .option-image {
margin: 0 3% 3% 0;
width: 22%;
}
}
.configurator .step .option-image > label {
width: 100%;
}
.configurator .step input:checked + article {
border-bottom: 0.3rem solid #ff5137;
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.15);
}
.configurator .step input:checked + article img.selected {
opacity: 1;
}
.configurator .step article {
background: #ffffff;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
border-bottom: 0.3rem solid transparent;
text-align: center;
transition: all 125ms ease-in-out;
}
.configurator .step article:checked {
border-bottom: 0.3rem solid #ff5137;
}
.configurator .step article:hover {
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.15);
}
.configurator .step article figure {
position: relative;
padding-top: 100%;
width: 100%;
}
.configurator .step article figure img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1;
transition: all 125ms ease-in-out;
}
.configurator .step article figure img.selected {
opacity: 0;
}
.configurator .step article p, .configurator .step article section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .configurator .step article div.short-description {
margin: 0;
padding: 1rem;
min-height: 4rem;
}
.configurator .step .option-sku, .configurator .step .option-upsell {
width: 100%;
}
.configurator .step .option-sku .option-image, .configurator .step .option-upsell .option-image {
display: inline-block;
position: relative;
vertical-align: top;
}
.configurator .step .option-sku .option-image article p, .configurator .step .option-sku .option-image article section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .configurator .step .option-sku .option-image article div.short-description, .configurator .step .option-upsell .option-image article p, .configurator .step .option-upsell .option-image article section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .configurator .step .option-upsell .option-image article div.short-description {
min-height: 9rem;
}
.configurator .step .option-sku.hidden, .configurator .step .option-upsell.hidden {
visibility: visible;
opacity: 1;
max-height: initial;
}
.configurator .step .option-sku, .configurator .step .option-upsell {
width: 100%;
}
.configurator .step .option-sku .option-empty, .configurator .step .option-upsell .option-empty {
display: inline-block;
position: relative;
vertical-align: top;
}
.configurator .step .option-sku.hidden, .configurator .step .option-upsell.hidden {
visibility: visible;
opacity: 1;
max-height: initial;
}
.configurator .step .option-empty {
margin: 0 0 5% 0;
}
.configurator .step .option-empty.option-empty-with-counter {
margin: 0 0 5% 0;
width: 45%;
}
@media screen and (min-width: 27em) {
.configurator .step .option-empty.option-empty-with-counter {
margin: 0 0 3% 0;
width: 30%;
}
}
@media screen and (min-width: 48em) {
.configurator .step .option-empty.option-empty-with-counter {
margin: 0 0 5% 0;
width: 45%;
}
}
@media screen and (min-width: 64em) {
.configurator .step .option-empty.option-empty-with-counter {
margin: 0 0 3% 0;
width: 30%;
}
}
@media screen and (min-width: 80em) {
.configurator .step .option-empty.option-empty-with-counter {
margin: 0 0 3% 0;
width: 22%;
}
}
.configurator .step .option-empty > label {
width: 100%;
}
.configurator .step .option-empty article p, .configurator .step .option-empty article section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .configurator .step .option-empty article div.short-description {
position: absolute;
width: 100%;
left: 0;
top: 50%;
transform: translateY(-35%);
padding: 0 1rem;
margin: 0;
text-align: center;
}
.configurator .step .option-empty article p span, .configurator .step .option-empty article section.product-detail > header .page-width div.product-summary div.short-description span, section.product-detail > header .page-width div.product-summary .configurator .step .option-empty article div.short-description span {
display: block;
position: relative;
width: 4rem;
height: 4rem;
background: linear-gradient(90deg, #ff7d55 0.51%, #ff1810 100%);
border-radius: 100%;
color: #ffffff;
text-align: center;
margin: 1rem auto 0;
}
.configurator .step .option-empty article p span i, .configurator .step .option-empty article section.product-detail > header .page-width div.product-summary div.short-description span i, section.product-detail > header .page-width div.product-summary .configurator .step .option-empty article div.short-description span i {
position: absolute;
display: block;
top: 0;
left: 0.3rem;
right: 0;
bottom: 0;
line-height: 4rem;
transition: all 125ms ease-in-out;
}
.configurator .step .option-empty article:hover p span i, .configurator .step .option-empty article:hover section.product-detail > header .page-width div.product-summary div.short-description span i, section.product-detail > header .page-width div.product-summary .configurator .step .option-empty article:hover div.short-description span i {
top: 0.2rem;
}
.configurator .step .option-empty article figure {
margin-bottom: 6.5rem;
}
.configurator .step .option-empty.option-empty-with-counter article figure {
margin-bottom: 10.7rem;
}
.configurator .step .option-empty.option-image article figure {
margin-bottom: 7rem;
}
.configurator .step .option-empty .checked article {
border-bottom: 0.3rem solid #ff5137;
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.15);
}
.configurator .step .option-empty.disabled article {
cursor: pointer;
background: none;
border: 0.1rem solid #eeeeee;
text-align: center;
transition: none;
box-shadow: none;
position: relative;
}
.configurator .step .option-empty.disabled article figure {
margin-bottom: 6.5rem;
}
.configurator .step .option-empty.disabled article:hover p span i, .configurator .step .option-empty.disabled article:hover section.product-detail > header .page-width div.product-summary div.short-description span i, section.product-detail > header .page-width div.product-summary .configurator .step .option-empty.disabled article:hover div.short-description span i {
top: 0;
}
.configurator .step .option-empty.disabled article p, .configurator .step .option-empty.disabled article section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .configurator .step .option-empty.disabled article div.short-description {
color: #a1a1a1;
}
.configurator .step .option-empty.disabled article p span, .configurator .step .option-empty.disabled article section.product-detail > header .page-width div.product-summary div.short-description span, section.product-detail > header .page-width div.product-summary .configurator .step .option-empty.disabled article div.short-description span {
background: #cccccc;
}
.configurator .step .option-empty.disabled article p span i, .configurator .step .option-empty.disabled article section.product-detail > header .page-width div.product-summary div.short-description span i, section.product-detail > header .page-width div.product-summary .configurator .step .option-empty.disabled article div.short-description span i {
color: #f9f9f9;
}
.configurator .step .option-empty.disabled.option-empty-with-counter article figure {
margin-bottom: 8.3rem;
}
.configurator .step .option-list {
margin: 0 0 3% 0;
width: 97%;
}
.configurator .step .option-list input:checked + article {
border-bottom: 0.3rem solid #ff5137;
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.15);
}
.configurator .step .option-list input:checked + article > div, .configurator .step .option-list input:checked + article > div * {
color: #ff5137;
}
@media screen and (min-width: 64em) {
.configurator .step .option-list input:checked + article {
border-bottom: 0;
}
.configurator .step .option-list input:checked + article:before {
background: #ff5137;
}
}
.configurator .step .option-list input:checked + article img.selected {
opacity: 1;
}
.configurator .step .option-list article {
background: #ffffff;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
text-align: center;
overflow: hidden;
transition: all 125ms ease-in-out;
position: relative;
border-bottom: 0.3rem solid transparent;
}
@media screen and (min-width: 64em) {
.configurator .step .option-list article {
min-height: 22rem;
border-bottom: 0;
}
.configurator .step .option-list article:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0.3rem;
background: transparent;
transition: all 125ms ease-in-out;
z-index: 2;
}
}
.configurator .step .option-list article:hover {
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.15);
}
.configurator .step .option-list article figure {
position: relative;
padding-top: 94%;
width: 100%;
}
@media screen and (min-width: 64em) {
.configurator .step .option-list article figure {
width: 40%;
padding-top: 64%;
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
}
.configurator .step .option-list article figure img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: inherit;
max-height: 22rem;
bottom: 0;
object-fit: cover;
opacity: 1;
transition: all 125ms ease-in-out;
}
@media screen and (min-width: 64em) {
.configurator .step .option-list article figure img {
object-fit: contain;
object-position: bottom left;
}
}
.configurator .step .option-list article figure img.selected {
opacity: 0;
}
.configurator .step .option-list article > div {
margin: 0 0 0 1rem;
padding: 2rem 2rem 2rem 1rem;
text-align: left;
}
.configurator .step .option-list article > div * {
color: #000000;
}
@media screen and (min-width: 64em) {
.configurator .step .option-list article > div {
margin-left: 40%;
width: 59%;
padding: 2rem;
}
}
.configurator .step .option-list article > div ul {
list-style-type: disc;
margin-left: 2rem;
}
.configurator .step .option-list article > div p, .configurator .step .option-list article > div section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .configurator .step .option-list article > div div.short-description {
font-weight: 400;
}
.configurator .step .option-list article > div p:last-of-type, .configurator .step .option-list article > div section.product-detail > header .page-width div.product-summary div.short-description:last-of-type, section.product-detail > header .page-width div.product-summary .configurator .step .option-list article > div div.short-description:last-of-type {
margin-bottom: 0;
}
.configurator .step .option-rent {
width: 97%;
}
.configurator .step .option-rent .datepicker {
width: 100%;
}
@media screen and (min-width: 64em) {
.configurator .step .option-rent .datepicker {
width: 63%;
display: inline-block;
}
}
.configurator .step .option-rent aside {
display: none;
}
@media screen and (min-width: 64em) {
.configurator .step .option-rent aside {
width: 30%;
display: block;
position: relative;
float: right;
top: 0;
padding: 2rem 0 0;
}
}
.configurator .step .option-rent aside p, .configurator .step .option-rent aside section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .configurator .step .option-rent aside div.short-description {
font-size: 1.4rem;
}
.configurator .step .choice-info {
display: inline-block;
position: relative;
width: 32rem;
vertical-align: top;
margin: 2rem 0;
color: #a1a1a1;
max-width: calc(100% - 2rem);
}
@media screen and (min-width: 80em) {
.configurator .step .choice-info {
margin-left: 2rem;
width: 28rem;
margin-top: 1rem;
}
}
.configurator .step .free-format + .choice-info {
margin: 2rem 0;
padding: 0;
width: 100%;
}
.configurator .step .option-select {
position: relative;
max-width: 100%;
}
.configurator .step .option-select > span {
position: relative;
display: block;
}
.configurator .step .option-select > span i.fa-chevron-down {
content: "\F107";
font: var(--fa-font-solid);
font-size: 1.6rem;
position: absolute;
display: block;
width: 2rem;
height: 2rem;
top: 1.4rem;
margin: 0;
text-align: right;
left: 23rem;
pointer-events: none;
}
@media screen and (min-width: 27em) {
.configurator .step .option-select > span i.fa-chevron-down {
left: 26rem;
}
}
@media screen and (min-width: 64em) {
.configurator .step .option-select > span i.fa-chevron-down {
left: 29rem;
}
}
.configurator .step .option-select > span select {
width: 27rem;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: #ffffff;
font-weight: 400;
padding: 0 4rem 0 2rem;
text-align: left;
border-radius: 0.4rem;
height: 4.3rem;
outline: 0;
border: 0.1rem solid transparent;
line-height: 4.3rem;
transition: all 125ms ease-in-out;
}
@media screen and (min-width: 27em) {
.configurator .step .option-select > span select {
width: 30rem;
}
}
@media screen and (min-width: 64em) {
.configurator .step .option-select > span select {
width: 32.5rem;
}
}
.ff .configurator .step .option-select > span select {
text-align: left;
}
.configurator .step .option-select > span select:focus {
border-color: #ff5137;
}
.configurator .step .option-select > span div.free-format {
margin: 2rem 0 0;
}
.configurator .step .option-select > span div.free-format label {
display: inline-block;
font-weight: 700;
margin: 0 2rem 0 0;
width: 27rem;
}
@media screen and (min-width: 27em) {
.configurator .step .option-select > span div.free-format label {
width: 14rem;
}
}
@media screen and (min-width: 64em) {
.configurator .step .option-select > span div.free-format label {
width: 15rem;
}
}
.configurator .step .option-select > span div.free-format .option-text-value {
display: block;
position: relative;
margin: 1rem 0 0 0;
width: auto;
font-weight: 400;
width: 100%;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
.configurator .step .option-select > span div.free-format label + label {
margin: 0;
}
.configurator .step .option-send {
width: 97%;
}
.configurator .step .option-send-item {
display: block;
background: #ffffff;
position: relative;
font-weight: 400;
padding: 0;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
margin-bottom: 1rem;
border-radius: 0.4rem;
width: 100%;
height: 12.5rem;
transition: all 125ms ease-in-out;
}
@media screen and (min-width: 80em) {
.configurator .step .option-send-item {
height: 9.5rem;
}
}
.configurator .step .option-send-item > span {
display: block;
position: relative;
float: left;
width: 9rem;
border-left: 0.3rem solid transparent;
transition: all 125ms ease-in-out;
height: 12.5rem;
}
@media screen and (min-width: 80em) {
.configurator .step .option-send-item > span {
height: 9.5rem;
}
}
.configurator .step .option-send-item i {
display: block;
position: relative;
float: left;
height: 4rem;
font-size: 4.5rem;
line-height: 1;
color: #000000;
padding: 2.6rem;
}
.configurator .step .option-send-item p, .configurator .step .option-send-item section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .configurator .step .option-send-item div.short-description {
float: left;
font-size: 1.6rem;
padding-top: 3rem;
font-weight: 500;
color: #000000;
}
.configurator .step .option-send-item p small, .configurator .step .option-send-item section.product-detail > header .page-width div.product-summary div.short-description small, section.product-detail > header .page-width div.product-summary .configurator .step .option-send-item div.short-description small {
margin: 0;
font-size: 1.4rem;
font-weight: 300;
display: block;
position: relative;
width: 100%;
color: #000000;
}
.configurator .step .option-send-item p small span, .configurator .step .option-send-item section.product-detail > header .page-width div.product-summary div.short-description small span, section.product-detail > header .page-width div.product-summary .configurator .step .option-send-item div.short-description small span {
display: none;
}
@media screen and (min-width: 27em) {
.configurator .step .option-send-item p small span, .configurator .step .option-send-item section.product-detail > header .page-width div.product-summary div.short-description small span, section.product-detail > header .page-width div.product-summary .configurator .step .option-send-item div.short-description small span {
display: initial;
}
}
@media screen and (min-width: 48em) {
.configurator .step .option-send-item p small span, .configurator .step .option-send-item section.product-detail > header .page-width div.product-summary div.short-description small span, section.product-detail > header .page-width div.product-summary .configurator .step .option-send-item div.short-description small span {
display: none;
}
}
@media screen and (min-width: 64em) {
.configurator .step .option-send-item p small span, .configurator .step .option-send-item section.product-detail > header .page-width div.product-summary div.short-description small span, section.product-detail > header .page-width div.product-summary .configurator .step .option-send-item div.short-description small span {
display: initial;
}
}
.configurator .step .option-send-item p strong, .configurator .step .option-send-item section.product-detail > header .page-width div.product-summary div.short-description strong, section.product-detail > header .page-width div.product-summary .configurator .step .option-send-item div.short-description strong {
display: block;
position: absolute;
right: 2.6rem;
bottom: 2rem;
}
.configurator .step .option-send-item input:checked ~ span {
border-left-color: #ff5137;
}
.configurator .step .option-send-item input:checked ~ span i, .configurator .step .option-send-item input:checked ~ strong, .configurator .step .option-send-item input:checked ~ p, .configurator .step .option-send-item section.product-detail > header .page-width div.product-summary input:checked ~ div.short-description, section.product-detail > header .page-width div.product-summary .configurator .step .option-send-item input:checked ~ div.short-description, .configurator .step .option-send-item input:checked ~ p small, .configurator .step .option-send-item section.product-detail > header .page-width div.product-summary input:checked ~ div.short-description small, section.product-detail > header .page-width div.product-summary .configurator .step .option-send-item input:checked ~ div.short-description small {
color: #ff5137 !important;
}
.configurator .step .option-text label {
position: relative;
}
.configurator .step .option-text-value {
display: block;
position: relative;
background: #ffffff;
font-weight: 400;
padding: 0 2rem 0 2rem;
text-align: left;
border-radius: 0.4rem;
width: 100%;
height: 4.3rem;
outline: 0;
border: 0.1rem solid #ff5137;
line-height: 4.3rem;
transition: all 125ms ease-in-out;
}
.configurator .step .option-upsell .option-upsell-item {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 64em) {
.configurator .step .option-upsell .option-upsell-item {
width: 30%;
}
}
@media screen and (min-width: 80em) {
.configurator .step .option-upsell .option-upsell-item {
width: 22%;
}
}
.configurator .step .option-upsell .option-upsell-item label {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.configurator .step .option-upsell .option-upsell-item label article {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.configurator .step .option-upsell .option-upsell-item label article p, .configurator .step .option-upsell .option-upsell-item label article section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .configurator .step .option-upsell .option-upsell-item label article div.short-description {
flex-grow: 1;
}
.configurator .step .option-upsell p, .configurator .step .option-upsell section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .configurator .step .option-upsell div.short-description {
text-align: left;
font-size: 1.4rem;
padding-bottom: 0.5rem;
display: block;
overflow: hidden;
}
.configurator .step .option-upsell p strong small, .configurator .step .option-upsell section.product-detail > header .page-width div.product-summary div.short-description strong small, section.product-detail > header .page-width div.product-summary .configurator .step .option-upsell div.short-description strong small {
font-weight: 300;
}
.configurator .step .option-upsell .option-upsell-item.checked p strong, .configurator .step .option-upsell .option-upsell-item.checked section.product-detail > header .page-width div.product-summary div.short-description strong, section.product-detail > header .page-width div.product-summary .configurator .step .option-upsell .option-upsell-item.checked div.short-description strong {
color: #ff5137;
}
.configurator .step .option-upsell .option-upsell-item.checked article {
border-bottom: 0.3rem solid #ff5137;
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.15);
}
.configurator .step .option-upsell .info {
z-index: 2;
display: block;
position: absolute;
right: 0.5rem;
top: 1.5rem;
}
.configurator .step .option-upsell .info i {
font-size: 2rem;
}
.configurator .step .option-upsell .info span {
display: none;
}
.configurator .step .option-upsell .info + div.info-hover {
visibility: hidden;
opacity: 0;
position: absolute;
display: block;
top: 4rem;
width: 200%;
left: 1rem;
z-index: 3;
padding: 2rem;
border-radius: 0.6rem;
background: #ffffff;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
text-align: left;
}
.configurator .step .option-upsell .info + div.info-hover ul {
list-style-type: disc;
list-style-position: outside;
}
.configurator .step .option-upsell .option-upsell-item.even .info + div.info-hover {
left: auto;
right: 1rem;
}
@media screen and (min-width: 27em) {
.configurator .step .option-upsell .option-upsell-item.even .info + div.info-hover {
left: 1rem;
right: auto;
}
}
@media screen and (min-width: 27em) {
.configurator .step .option-upsell .option-upsell-item.thirth .info + div.info-hover {
left: auto;
right: 1rem;
}
}
@media screen and (min-width: 48em) {
.configurator .step .option-upsell .option-upsell-item.thirth .info + div.info-hover {
left: 1rem;
right: auto;
}
}
.configurator .step .option-upsell .quantity-counter {
padding: 0 0.8rem 0.8rem;
margin-top: 0;
}
.configurator .step .option-upsell .quantity-counter input {
width: calc(100% - 8rem);
font-size: 1.2rem;
height: 3rem;
line-height: 3rem;
}
.ios .configurator .step .option-upsell .quantity-counter input {
font-size: 1.6rem;
}
.configurator .step .option-upsell .upsell-options-confirm {
width: 100%;
margin-top: -2rem;
}
@media screen and (min-width: 27em) {
.configurator .step .option-upsell .upsell-options-confirm {
width: 60%;
}
}
@media screen and (min-width: 48em) {
.configurator .step .option-upsell .upsell-options-confirm {
width: 80%;
}
}
@media screen and (min-width: 64em) {
.configurator .step .option-upsell .upsell-options-confirm {
width: 60%;
}
}
@media screen and (min-width: 80em) {
.configurator .step .option-upsell .upsell-options-confirm {
width: 48%;
}
}
.configurator .step .option-upsell .upsell-options-confirm .button {
width: 100%;
}
.configurator .step .option-upsell .upsell-options-confirm .button.hidden {
transition: none;
}
html:not(.touch) .configurator .step .option-upsell .info:hover + div.info-hover {
visibility: visible;
opacity: 1;
}
html.touch .configurator .step .option-upsell label.more-info-opened .info + div.info-hover {
visibility: visible;
opacity: 1;
}
html.touch .configurator .step .option-upsell label.more-info-opened .info:before {
content: "";
display: block;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0);
}
.configurator .modal-body {
width: 100%;
}
@media screen and (min-width: 48em) {
.configurator .modal-body {
width: 50rem;
}
}
.configurator .step {
position: relative;
}
.configurator .step h4 {
margin: 2rem 0;
padding: 0 0 1.5rem;
border-bottom: 0.1rem solid #eeeeee;
font-size: 2rem;
}
.configurator .step h4 i {
margin-left: 0.5rem;
color: #7cc461;
font-size: 1.8rem;
}
.configurator .step a.more-info {
position: absolute;
right: 0;
top: 0.6rem;
}
.configurator .step label {
display: block;
}
.configurator .step .options {
display: flex;
flex-wrap: wrap;
margin: 0 -5% 3rem 0;
}
@media screen and (min-width: 27em) {
.configurator .step .options {
margin-right: -3%;
}
}
@media screen and (min-width: 48em) {
.configurator .step .options {
margin-right: -5%;
}
}
@media screen and (min-width: 64em) {
.configurator .step .options {
margin-right: -3%;
}
}
.configurator .step .options.hidden {
display: none;
}
.configurator .step .options .option.hidden {
display: none;
}
.configurator .step .options .option label {
cursor: pointer;
}
.configurator .step .options .option label input[type=radio], .configurator .step .options .option label input[type=checkbox] {
position: absolute;
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
opacity: 0;
}
section.content-page .page-width {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 48em) {
section.content-page .page-width {
flex-direction: row;
}
}
section.content-page .page-width > aside {
margin: 0 0 3rem;
}
@media screen and (min-width: 48em) {
section.content-page .page-width > aside {
margin: 0 8vw 3rem 0;
}
}
section.content-page .page-width > section {
flex-grow: 1;
margin-bottom: 5vh;
}
@media screen and (min-width: 48em) {
section.content-page .page-width > section {
padding-right: 8vw;
}
}
section.content-page .page-width > section h1 {
font-size: 3.8rem;
line-height: 4.5rem;
}
section.content-page .page-width > section .video {
position: relative;
height: 0;
padding-top: 56.25%;
width: 100%;
}
section.content-page .page-width > section .video iframe {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
section.customer-service {
padding: 6rem 0;
background: #f9f9f9;
}
@media screen and (min-width: 48em) {
section.customer-service {
padding: 8rem 0;
}
}
section.customer-service section {
margin-bottom: 5rem;
}
section.customer-service-single .page-width {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 48em) {
section.customer-service-single .page-width {
flex-direction: row;
}
}
section.customer-service-single .page-width > aside {
margin: 0 0 3rem;
}
@media screen and (min-width: 48em) {
section.customer-service-single .page-width > aside {
margin: 0 8vw 3rem 0;
}
}
section.customer-service-single .page-width > section {
flex-grow: 1;
}
@media screen and (min-width: 48em) {
section.customer-service-single .page-width > section {
padding-right: 8vw;
}
}
section.customer-service-single .page-width > section h1 {
font-size: 3.8rem;
line-height: 4.5rem;
}
section.customer-service-single .page-width > section .customer-service-texts {
margin: 4rem 0 3rem;
}
@media screen and (min-width: 48em) {
section.customer-service-single .page-width > section .customer-service-texts {
margin: 8rem 0 5rem;
}
}
section.customer-service-single .page-width > section .customer-service-texts .contact-options {
margin-top: 2.5rem;
}
.modal-customer-service .button {
margin: 2rem 0;
}
body.error {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #ffffff;
background: #242935;
}
@media screen and (max-width: 47.99875em) {
body.error {
background: #242935 url("/images/sterren.svg") no-repeat;
background-size: 150% auto;
background-position: 6% -1rem;
text-align: center;
}
}
body.error div.page-width {
padding-left: 10vw;
padding-right: 10vw;
flex-grow: 0;
}
@media screen and (min-width: 48em) {
body.error div.page-width {
padding-left: 10vh;
padding-right: 10vh;
}
}
body.error div.page-width section {
padding-top: 20vh;
padding-bottom: 20vh;
}
@media screen and (min-width: 48em) {
body.error div.page-width section {
display: flex;
justify-content: center;
background: url("/images/sterren.svg") no-repeat;
background-size: 100% auto;
background-position: top center;
}
}
body.error div.page-width section div.code {
margin: 0 0 5vh 0;
color: #ffffff;
font-size: 15vmax;
line-height: 13vmax;
font-weight: 700;
}
@media screen and (min-width: 48em) {
body.error div.page-width section div.code {
margin: 0 5vw 0 0;
}
}
body.error div.page-width section div.message {
font-weight: 500;
}
body.error div.page-width section div.message h1 {
margin: 0 0 1.5rem;
color: #ffffff;
}
body.error div.page-width section div.message p, body.error div.page-width section.product-detail > header div.message .page-width div.product-summary div.short-description, body.error div.page-width section.product-detail > header .page-width div.product-summary div.message div.short-description {
margin: 0 0 3rem;
}
section.reviews {
position: relative;
margin-bottom: 26rem;
text-align: center;
background: #f9f9f9;
}
section.reviews h2 {
padding: 3rem 2rem 0;
position: relative;
z-index: 2;
}
section.reviews section {
padding: 3rem 0 2rem;
background: #f9f9f9;
}
@media screen and (max-width: 47.99875em) {
section.reviews section:first-of-type {
padding: 2rem 0 0;
}
}
section.reviews section > div.page-width {
display: flex;
overflow-x: scroll;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
margin-bottom: -17.2rem;
padding: 0 0 2rem;
}
@media screen and (min-width: 48em) {
section.reviews section > div.page-width {
padding: 0 10rem;
overflow-x: visible;
}
}
section.reviews section > div.page-width article.review {
position: relative;
z-index: 3rem;
min-width: 29rem;
max-width: 39rem;
padding: 0 1rem;
}
section.reviews section > div.page-width article.review:first-child {
padding-left: 2rem;
}
section.reviews section > div.page-width article.review:last-child {
padding-right: 2rem;
}
@media screen and (min-width: 64em) {
section.reviews section > div.page-width article.review:last-child {
margin-right: 0;
}
section.reviews section > div.page-width article.review:first-child:before, section.reviews section > div.page-width article.review:last-child:before {
content: "";
position: absolute;
z-index: 1;
display: block;
opacity: 0.3;
width: 30rem;
height: 24rem;
background: url("../images/raster.svg") no-repeat top left;
}
section.reviews section > div.page-width article.review:first-child:before {
left: -8rem;
top: -7rem;
}
section.reviews section > div.page-width article.review:last-child:before {
right: -5.5rem;
bottom: -6.7rem;
}
}
section.reviews section > div.page-width article.review .content {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 2;
height: 100%;
background: #ffffff;
border-radius: 0.6rem;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
}
section.reviews section > div.page-width article.review .content .rating {
padding: 4rem 3rem 2rem;
}
@media screen and (min-width: 64em) {
section.reviews section > div.page-width article.review .content .rating {
padding: 5rem 5rem 3rem;
}
}
section.reviews section > div.page-width article.review .content .rating img {
max-width: 15rem;
}
section.reviews section > div.page-width article.review .content p, section.reviews section.product-detail > header section > div.page-width article.review .content div.product-summary div.short-description, section.product-detail > header section.reviews section > div.page-width article.review .content div.product-summary div.short-description, section.reviews section.product-detail > header section > div.page-width div.product-summary article.review .content div.short-description, section.product-detail > header section.reviews section > div.page-width div.product-summary article.review .content div.short-description {
padding: 0 3rem 1rem;
font-weight: 500;
}
@media screen and (min-width: 64em) {
section.reviews section > div.page-width article.review .content p, section.reviews section.product-detail > header section > div.page-width article.review .content div.product-summary div.short-description, section.product-detail > header section.reviews section > div.page-width article.review .content div.product-summary div.short-description, section.reviews section.product-detail > header section > div.page-width div.product-summary article.review .content div.short-description, section.product-detail > header section.reviews section > div.page-width div.product-summary article.review .content div.short-description {
padding: 0 5rem 4rem;
}
}
section.reviews section > div.page-width article.review .content footer {
position: relative;
padding: 2.5rem 2rem;
font-size: 1.6rem;
border-top: 0.1rem solid #eeeeee;
color: #a1a1a1;
}
section.reviews section > div.page-width article.review .content footer:before {
content: "";
position: absolute;
top: -0.1rem;
left: calc(50% - 3.25rem);
display: block;
margin: 0 auto;
height: 0.2rem;
width: 6.5rem;
background: linear-gradient(90deg, #ff7d55 0.51%, #ff1810 100%);
}
section.reviews > .page-width > a {
position: relative;
margin-top: 3rem;
bottom: -16rem;
}
@media screen and (min-width: 48em) {
section.reviews > .page-width > a {
bottom: -17rem;
}
}
.order-success-text {
margin: 6rem auto 2rem;
display: block;
position: relative;
text-align: center;
max-width: 64rem;
}
.order-success-text .blog {
position: relative;
margin: 2rem auto;
}
@media screen and (min-width: 48em) {
section.product-category .page-width {
display: flex;
flex-direction: row;
}
}
section.product-category .page-width aside {
flex-shrink: 0;
margin-right: 8rem;
padding-top: 2rem;
width: 22rem;
border-top: 0.1rem solid #eeeeee;
}
@media screen and (max-width: 47.99875em) {
section.product-category .page-width aside {
display: none;
position: fixed;
z-index: 99;
overflow-y: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 3rem;
width: 100%;
background: white;
}
section.product-category .page-width aside.active {
display: block;
}
}
section.product-category .page-width aside header {
display: none;
}
@media screen and (max-width: 47.99875em) {
section.product-category .page-width aside header {
display: block;
}
}
section.product-category .page-width aside header h4 {
display: flex;
justify-content: space-between;
margin: 0;
}
section.product-category .page-width aside .link-list {
margin-bottom: 3rem;
}
@media screen and (max-width: 47.99875em) {
section.product-category .page-width aside .link-list {
display: none;
}
}
section.product-category .page-width aside .select2 {
width: 100% !important;
}
section.product-category .category-banner {
display: flex;
align-items: flex-end;
margin-bottom: 4.8rem;
min-height: 22rem;
}
section.product-category .category-banner + section.paragraph p, section.product-category .category-banner + section.paragraph section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary section.product-category .category-banner + section.paragraph div.short-description {
font-size: 1.4rem;
line-height: 2.1rem;
}
section.product-category .category-banner .category-title {
padding: 1.6rem 4.8rem 1.6rem 2.4rem;
background: linear-gradient(90deg, #ff7d55 0.51%, #ff1810 100%);
box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.15);
}
section.product-category .category-banner .category-title h1 {
margin: 0;
color: #ffffff;
font-size: 2.2rem;
line-height: 2.4rem;
}
@media screen and (max-width: 47.99875em) {
section.product-category section.product-category-description {
display: none;
}
}
section.product-category div.mobile-filters {
width: 100%;
}
@media screen and (min-width: 48em) {
section.product-category div.mobile-filters {
display: none;
}
}
section.product-category div.mobile-filters:after {
content: "\F00B";
}
section.product-category section.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin: 4rem 0 2rem;
}
section.product-category section.toolbar label.checkbox {
padding-left: 1rem;
}
section.product-category section.product-category-text {
padding: 5rem 0;
}
section.product-category .selected-filter {
display: inline-block;
position: relative;
background: #eeeeee;
padding: 1rem;
margin: 0 0.6rem 1rem 0;
border-radius: 0.4rem;
line-height: 1;
font-weight: 300;
vertical-align: middle;
cursor: pointer;
}
section.product-category .selected-filter i {
vertical-align: middle;
display: inline;
margin-left: 0.4rem;
font-size: 2rem;
}
section.product-category .selected-filter:hover i {
color: #ff5137;
}
section.product-detail > header .page-width {
margin-top: 2rem;
min-height: 40rem;
}
@media screen and (min-width: 48em) {
section.product-detail > header .page-width {
display: flex;
}
}
section.product-detail > header .page-width div.carousel {
margin: 0 0 3rem;
}
@media screen and (min-width: 48em) {
section.product-detail > header .page-width div.carousel {
margin: 0 8% 0 0;
width: 45%;
max-width: 45rem;
}
}
section.product-detail > header .page-width .out-of-order {
font-size: 1.8rem;
color: #ff5137;
font-weight: 700;
}
@media screen and (min-width: 48em) {
section.product-detail > header .page-width div.product-summary {
width: 47%;
max-width: 70rem;
}
}
section.product-detail > header .page-width div.product-summary h1 {
margin: 0 0 2rem;
padding-bottom: 0;
font-size: 3rem;
line-height: 3.4rem;
}
@media screen and (min-width: 48em) {
section.product-detail > header .page-width div.product-summary h1 {
font-size: 3.8rem;
line-height: 4.2rem;
}
}
section.product-detail > header .page-width div.product-summary .ratings {
display: flex;
margin: 0 0 3rem;
}
section.product-detail > header .page-width div.product-summary .ratings figure {
margin-right: 1.5rem;
font-size: 1.6rem;
}
section.product-detail > header .page-width div.product-summary .ratings a {
color: #a1a1a1;
font-weight: 300;
font-size: 1.3rem;
}
section.product-detail > header .page-width div.product-summary div.prices {
margin-bottom: 1.6rem;
}
section.product-detail > header .page-width div.product-summary h5,
section.product-detail > header .page-width div.product-summary span.product-note {
margin-bottom: 2rem;
}
section.product-detail > header .page-width div.product-summary div.short-description {
margin-bottom: 0;
}
section.product-detail > header .page-width div.product-summary div.short-description > span {
display: block;
position: relative;
max-height: 35rem;
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
transition: all 125ms ease-in-out;
}
section.product-detail > header .page-width div.product-summary div.short-description:not(.open) > span {
max-height: 6.9rem;
line-height: 2.3rem;
}
section.product-detail > header .page-width div.product-summary div.short-description a.more-info {
display: block;
position: relative;
margin-top: 0.5rem;
color: #a1a1a1;
}
section.product-detail > header .page-width div.product-summary div.short-description a.more-info:hover {
text-decoration: underline;
}
section.product-detail > header .page-width div.product-summary span.product-note {
display: block;
margin-top: 4rem;
position: relative;
color: #ff5137;
}
section.product-detail > header .page-width div.product-summary span.product-note * {
font-style: normal !important;
font-weight: 400 !important;
}
section.product-detail > header .page-width div.product-summary span.product-note ul,
section.product-detail > header .page-width div.product-summary span.product-note ol {
list-style-position: inside;
}
section.product-detail > header .page-width div.product-summary span.product-note ul {
list-style-type: disc;
}
section.product-detail > header .page-width div.product-summary .button {
margin-top: 1rem;
}
section.product-detail .characteristics {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
section.product-detail .characteristics .characteristic {
margin: 0 0 1.5rem 0;
width: 100%;
}
@media screen and (min-width: 27em) {
section.product-detail .characteristics .characteristic {
width: 45%;
}
}
@media screen and (min-width: 48em) {
section.product-detail .characteristics .characteristic {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
section.product-detail .characteristics .characteristic .label {
padding-right: 2rem;
font-size: 1.6rem;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
word-break: break-all;
hyphens: auto;
}
section.product-detail .characteristics .characteristic .value {
font-weight: 300;
}
@media screen and (min-width: 48em) {
section.product-detail .review-average {
margin-right: 8vw;
}
}
section.product-detail .review-average > div {
margin-bottom: 3rem;
padding: 3rem;
background: #ffffff;
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
text-align: center;
}
section.product-detail .review-average > div .average {
font-size: 6.4rem;
line-height: 7rem;
font-weight: 700;
}
section.product-detail .review-average > div .rating-stars {
margin: 1rem 0;
font-size: 1.8rem;
}
section.product-detail .review-average > div .review-count {
margin: 2rem 0;
color: #a1a1a1;
font-weight: 300;
}
section.product-detail .review-average > div .review-count i {
margin-right: 0.5rem;
}
section.product-detail section.product-detail-text {
margin: 0 0 8rem;
}
section.product-detail section.product-detail-text .paragraph {
margin: 0 auto;
}
#quotation_id + div#error_message_container {
margin-bottom: 2.2rem;
}
section.product-detail .tabs {
margin: 5rem 0;
}
section.product-detail .tabs .page-width {
display: flex;
flex-wrap: wrap;
}
section.product-detail .tabs input {
position: absolute;
visibility: hidden;
}
@media screen and (min-width: 48em) {
section.product-detail .tabs input[type=checkbox] {
display: none;
}
}
@media screen and (max-width: 47.99875em) {
section.product-detail .tabs input[type=radio] {
display: none;
}
}
section.product-detail .tabs label {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
width: 100%;
border-bottom: 0.1rem solid #eeeeee;
font-size: 1.7rem;
transition: all 125ms ease-in-out;
font-weight: 700;
cursor: pointer;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
@media screen and (min-width: 48em) {
section.product-detail .tabs label {
margin: 0 5rem 0 0;
padding: 2.5rem 0;
width: auto;
font-size: 2.8rem;
border-bottom: 0.3rem solid transparent;
}
}
section.product-detail .tabs label:after {
content: "\F107";
margin-left: 0.3rem;
font: var(--fa-font-solid);
font-size: 2.3rem;
transition: all 125ms ease-in-out;
}
@media screen and (min-width: 48em) {
section.product-detail .tabs label:after {
display: none;
}
}
section.product-detail .tabs label.active:after {
content: "\F106";
}
section.product-detail .tabs label.active + .content {
display: block;
}
@media screen and (min-width: 48em) {
section.product-detail .tabs label.active + .content {
display: flex;
}
}
section.product-detail .tabs label i {
font-size: 1.3rem;
}
@media screen and (min-width: 48em) {
section.product-detail .tabs label i {
display: none;
}
}
@media screen and (min-width: 48em) {
section.product-detail .tabs input:checked + label, section.product-detail .tabs input:checked + input + label {
border-bottom: 0.3rem solid #ff5137;
}
section.product-detail .tabs input:checked + label + .content, section.product-detail .tabs input:checked + input + label + .content {
display: flex;
}
}
section.product-detail .tabs .content {
display: none;
position: relative;
padding: 2rem 0;
width: 100%;
background: #f9f9f9;
}
@media screen and (min-width: 48em) {
section.product-detail .tabs .content {
background: none;
}
}
section.product-detail .tabs .content:before {
content: "";
position: absolute;
display: block;
z-index: -1;
top: 0;
bottom: 0;
width: calc(100% + 4rem);
left: -2rem;
height: 100%;
background: #f9f9f9;
}
@media screen and (min-width: 48em) {
section.product-detail .tabs .content:before {
width: 300%;
left: -100%;
}
}
@media screen and (min-width: 48em) {
section.product-detail .tabs .content {
order: 99;
padding: 5rem 0;
}
}
section.product-detail .tabs .content .long-description {
margin: 0 5vw 3rem 0;
max-width: 50rem;
font-weight: 300;
}
@media screen and (min-width: 48em) {
section.product-detail .tabs .content .long-description {
margin-bottom: 0;
}
}
section.product-detail .tabs .content .long-description h2 {
margin: 3rem 0 1rem;
font-size: 2rem;
line-height: 2.5rem;
}
section.product-detail .tabs .content .long-description h2:first-child {
margin-top: 0;
}
section.product-detail .tabs .content .media {
width: 100%;
}
@media screen and (min-width: 48em) {
section.product-detail .tabs .content .media {
flex-shrink: 3;
height: 100%;
}
}
section.product-detail .tabs .content .media img {
width: 100%;
object-fit: contain;
object-position: top;
}
section.product-detail .tabs .content .media .video {
position: relative;
height: 0;
padding-top: 56.25%;
width: 100%;
}
section.product-detail .tabs .content .media .video iframe {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
section.search {
margin-bottom: 6rem;
}
.sitemap-page .content {
display: block;
position: relative;
width: inherit;
}
.sitemap-page .content .content-side {
position: relative;
width: 100%;
}
@media screen and (min-width: 64em) {
.sitemap-page .content .content-side {
width: 50%;
position: absolute;
left: 0;
top: 0;
}
}
@media screen and (min-width: 64em) {
.sitemap-page .content .content-side.content-right {
right: 0;
left: auto;
}
}
.sitemap-page .faqitem {
margin: 0.5rem 0;
padding-right: 0;
display: inline-block;
position: relative;
width: 100%;
}
.sitemap-page .faqitem:before {
bottom: auto !important;
top: 5rem !important;
}
.sitemap-page .faqitem > span {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
.sitemap-page .faqitem .collapsible-content .content-inner ul {
margin-left: 2rem;
list-style: none;
}
.sitemap-page .faqitem .collapsible-content .content-inner ul .faqitem {
width: 100% !important;
margin-right: 0 !important;
}
.sitemap-page .faqitem input[type=checkbox]:checked ~ div.collapsible-content {
display: block;
position: absolute;
background: #ffffff;
width: 100%;
margin-top: 1.3rem;
padding-top: 0;
z-index: 2;
}
section.subcategory-grid {
padding: 5rem 0;
background: #f9f9f9;
}
@media screen and (max-width: 47.99875em) {
section.subcategory-grid {
padding: 3rem 0;
}
}
section.subcategory-grid + .subcategory-imageslider {
margin-top: 5rem;
}
section.subcategory-grid .page-width section {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 47.99875em) {
section.subcategory-grid .page-width section {
justify-content: space-between;
}
}
section.subcategory-grid .page-width section a {
display: block;
margin: 1rem;
min-width: 17rem;
width: calc(16.6666666667% - 2rem);
}
@media screen and (max-width: 47.99875em) {
section.subcategory-grid .page-width section a {
display: flex;
align-items: center;
width: calc(50% - 0.5rem);
margin: 0 0 1rem;
padding: 1rem 1.5rem;
background: #ffffff;
box-shadow: 0.2rem 0.5rem 1rem 0 rgba(0, 0, 0, 0.05);
min-width: 0;
}
section.subcategory-grid .page-width section a figure {
display: none;
}
}
section.subcategory-grid .page-width section a h5 {
margin: 0;
hyphens: auto;
word-break: break-word;
line-height: 2rem;
}
@media screen and (max-width: 47.99875em) {
section.subcategory-grid .page-width section a h5 {
font-size: 1.5rem;
}
}
section.subcategory-text {
padding: 5rem 0;
}
section.subcategory-text + .subcategory-text {
padding-top: 0;
}
section.subcategory-text .page-width {
max-width: 70rem;
}
body.temp {
background: #f9f9f9;
}
body.temp .content {
align-items: center;
padding: 2rem 2rem 0;
}
body.temp .content section {
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 5vh 0;
}
body.temp .content section img {
max-width: 10rem;
}
body.temp .content section p, body.temp .content section.product-detail > header .page-width div.product-summary div.short-description {
margin: 3rem 0;
}
body.temp .content > img {
max-width: 100%;
border-top-right-radius: 0.6rem;
border-top-left-radius: 0.6rem;
}
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--tw-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--tw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--tw-color-red-200: oklch(88.5% 0.062 18.334);
--tw-color-red-400: oklch(70.4% 0.191 22.216);
--tw-color-red-600: oklch(57.7% 0.245 27.325);
--tw-color-green-400: oklch(79.2% 0.209 151.711);
--tw-color-green-600: oklch(62.7% 0.194 149.214);
--tw-color-sky-100: oklch(95.1% 0.026 236.824);
--tw-color-slate-500: oklch(55.4% 0.046 257.417);
--tw-color-gray-100: oklch(96.7% 0.003 264.542);
--tw-color-gray-200: oklch(92.8% 0.006 264.531);
--tw-color-gray-300: oklch(87.2% 0.01 258.338);
--tw-color-gray-600: oklch(44.6% 0.03 256.802);
--tw-color-zinc-50: oklch(98.5% 0 0);
--tw-color-zinc-200: oklch(92% 0.004 286.32);
--tw-color-neutral-400: oklch(70.8% 0 0);
--tw-color-neutral-500: oklch(55.6% 0 0);
--tw-color-black: #000;
--tw-color-white: #fff;
--tw-spacing: 0.25rem;
--tw-breakpoint-lg: 64rem;
--tw-breakpoint-xl: 80rem;
--tw-breakpoint-2xl: 96rem;
--tw-container-xs: 20rem;
--tw-container-xl: 36rem;
--tw-container-2xl: 42rem;
--tw-container-4xl: 56rem;
--tw-text-sm: 0.875rem;
--tw-text-sm--line-height: calc(1.25 / 0.875);
--tw-text-base: 1rem;
--tw-text-base--line-height: calc(1.5 / 1);
--tw-text-lg: 1.125rem;
--tw-text-lg--line-height: calc(1.75 / 1.125);
--tw-text-2xl: 1.5rem;
--tw-text-2xl--line-height: calc(2 / 1.5);
--tw-text-4xl: 2.25rem;
--tw-text-4xl--line-height: calc(2.5 / 2.25);
--tw-text-6xl: 3.75rem;
--tw-text-6xl--line-height: 1;
--tw-font-weight-normal: 400;
--tw-font-weight-medium: 500;
--tw-font-weight-bold: 700;
--tw-tracking-wide: 0.025em;
--tw-leading-relaxed: 1.625;
--tw-radius-md: 0.375rem;
--tw-radius-lg: 0.5rem;
--tw-radius-xl: 0.75rem;
--tw-animate-spin: spin 1s linear infinite;
--tw-default-transition-duration: 150ms;
--tw-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--tw-default-font-family: var(--tw-font-sans);
--tw-default-mono-font-family: var(--tw-font-mono);
--tw-color-red-dvc: #ff5137;
--tw-text-size-header: 2rem;
}
}
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--tw-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--tw-default-font-feature-settings, normal);
font-variation-settings: var(--tw-default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code {
font-family: var(--tw-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--tw-default-mono-font-feature-settings, normal);
font-variation-settings: var(--tw-default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
outline: auto;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, iframe, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
}
@supports (color: color-mix(in lab, red, red)) {
::placeholder {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type=button], [type=reset], [type=submit]), ::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden=until-found])) {
display: none !important;
}
}
@layer utilities {
.tw\:invisible {
visibility: hidden !important;
}
.tw\:relative {
position: relative !important;
}
.tw\:float-left {
float: left !important;
}
.tw\:float-right {
float: right !important;
}
.tw\:m-0 {
margin: calc(var(--tw-spacing) * 0) !important;
}
.tw\:ms-4 {
margin-inline-start: calc(var(--tw-spacing) * 4) !important;
}
.tw\:mt-2 {
margin-top: calc(var(--tw-spacing) * 2) !important;
}
.tw\:mt-6 {
margin-top: calc(var(--tw-spacing) * 6) !important;
}
.tw\:mt-8 {
margin-top: calc(var(--tw-spacing) * 8) !important;
}
.tw\:mt-12 {
margin-top: calc(var(--tw-spacing) * 12) !important;
}
.tw\:mr-4 {
margin-right: calc(var(--tw-spacing) * 4) !important;
}
.tw\:mb-2 {
margin-bottom: calc(var(--tw-spacing) * 2) !important;
}
.tw\:mb-4 {
margin-bottom: calc(var(--tw-spacing) * 4) !important;
}
.tw\:mb-6 {
margin-bottom: calc(var(--tw-spacing) * 6) !important;
}
.tw\:mb-8 {
margin-bottom: calc(var(--tw-spacing) * 8) !important;
}
.tw\:mb-10 {
margin-bottom: calc(var(--tw-spacing) * 10) !important;
}
.tw\:block {
display: block !important;
}
.tw\:flex {
display: flex !important;
}
.tw\:grid {
display: grid !important;
}
.tw\:hidden {
display: none !important;
}
.tw\:inline-flex {
display: inline-flex !important;
}
.tw\:size-6 {
width: calc(var(--tw-spacing) * 6) !important;
height: calc(var(--tw-spacing) * 6) !important;
}
.tw\:h-1 {
height: calc(var(--tw-spacing) * 1) !important;
}
.tw\:h-5 {
height: calc(var(--tw-spacing) * 5) !important;
}
.tw\:h-6 {
height: calc(var(--tw-spacing) * 6) !important;
}
.tw\:h-8 {
height: calc(var(--tw-spacing) * 8) !important;
}
.tw\:h-60 {
height: calc(var(--tw-spacing) * 60) !important;
}
.tw\:w-1\/2 {
width: 50% !important;
}
.tw\:w-5 {
width: calc(var(--tw-spacing) * 5) !important;
}
.tw\:w-6 {
width: calc(var(--tw-spacing) * 6) !important;
}
.tw\:w-8 {
width: calc(var(--tw-spacing) * 8) !important;
}
.tw\:w-full {
width: 100% !important;
}
.tw\:max-w-4xl {
max-width: var(--tw-container-4xl) !important;
}
.tw\:max-w-xs {
max-width: var(--tw-container-xs) !important;
}
.tw\:flex-grow {
flex-grow: 1 !important;
}
.tw\:animate-spin {
animation: var(--tw-animate-spin) !important;
}
.tw\:cursor-auto {
cursor: auto !important;
}
.tw\:cursor-pointer {
cursor: pointer !important;
}
.tw\:list-none {
list-style-type: none !important;
}
.tw\:grid-flow-col {
grid-auto-flow: column !important;
}
.tw\:grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.tw\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.tw\:grid-rows-10 {
grid-template-rows: repeat(10, minmax(0, 1fr)) !important;
}
.tw\:flex-col {
flex-direction: column !important;
}
.tw\:flex-wrap {
flex-wrap: wrap !important;
}
.tw\:place-items-center {
place-items: center !important;
}
.tw\:items-center {
align-items: center !important;
}
.tw\:justify-between {
justify-content: space-between !important;
}
.tw\:justify-center {
justify-content: center !important;
}
.tw\:gap-2 {
gap: calc(var(--tw-spacing) * 2) !important;
}
.tw\:gap-3 {
gap: calc(var(--tw-spacing) * 3) !important;
}
.tw\:gap-4 {
gap: calc(var(--tw-spacing) * 4) !important;
}
:where(.tw\:divide-y > :not(:last-child)) {
--tw-divide-y-reverse: 0 !important;
border-bottom-style: var(--tw-border-style) !important;
border-top-style: var(--tw-border-style) !important;
border-top-width: calc(1px * var(--tw-divide-y-reverse)) !important;
border-bottom-width: calc(1px * (1 - var(--tw-divide-y-reverse))) !important;
}
:where(.tw\:divide-zinc-200\/75 > :not(:last-child)) {
border-color: var(--tw-color-zinc-200) !important;
}
@supports (color: color-mix(in lab, red, red)) {
:where(.tw\:divide-zinc-200\/75 > :not(:last-child)) {
border-color: color-mix(in oklab, var(--tw-color-zinc-200) 75%, transparent) !important;
}
}
.tw\:overflow-hidden {
overflow: hidden !important;
}
.tw\:scroll-smooth {
scroll-behavior: smooth !important;
}
.tw\:rounded {
border-radius: 0.25rem !important;
}
.tw\:rounded-full {
border-radius: calc(infinity * 1px) !important;
}
.tw\:rounded-lg {
border-radius: var(--tw-radius-lg) !important;
}
.tw\:rounded-md {
border-radius: var(--tw-radius-md) !important;
}
.tw\:rounded-xl {
border-radius: var(--tw-radius-xl) !important;
}
.tw\:border {
border-style: var(--tw-border-style) !important;
border-width: 1px !important;
}
.tw\:border-3 {
border-style: var(--tw-border-style) !important;
border-width: 3px !important;
}
.tw\:border-r-10 {
border-right-style: var(--tw-border-style) !important;
border-right-width: 10px !important;
}
.tw\:border-gray-100 {
border-color: var(--tw-color-gray-100) !important;
}
.tw\:border-gray-200 {
border-color: var(--tw-color-gray-200) !important;
}
.tw\:border-red-600 {
border-color: var(--tw-color-red-600) !important;
}
.tw\:border-red-dvc {
border-color: var(--tw-color-red-dvc) !important;
}
.tw\:border-transparent {
border-color: transparent !important;
}
.tw\:border-white {
border-color: var(--tw-color-white) !important;
}
.tw\:border-t-transparent {
border-top-color: transparent !important;
}
.tw\:border-r-transparent {
border-right-color: transparent !important;
}
.tw\:bg-gray-200 {
background-color: var(--tw-color-gray-200) !important;
}
.tw\:bg-red-400 {
background-color: var(--tw-color-red-400) !important;
}
.tw\:bg-red-dvc {
background-color: var(--tw-color-red-dvc) !important;
}
.tw\:bg-zinc-50 {
background-color: var(--tw-color-zinc-50) !important;
}
.tw\:fill-current {
fill: currentcolor !important;
}
.tw\:object-cover {
object-fit: cover !important;
}
.tw\:p-1 {
padding: calc(var(--tw-spacing) * 1) !important;
}
.tw\:p-2 {
padding: calc(var(--tw-spacing) * 2) !important;
}
.tw\:p-3 {
padding: calc(var(--tw-spacing) * 3) !important;
}
.tw\:p-5 {
padding: calc(var(--tw-spacing) * 5) !important;
}
.tw\:px-4 {
padding-inline: calc(var(--tw-spacing) * 4) !important;
}
.tw\:px-12 {
padding-inline: calc(var(--tw-spacing) * 12) !important;
}
.tw\:py-2 {
padding-block: calc(var(--tw-spacing) * 2) !important;
}
.tw\:py-3 {
padding-block: calc(var(--tw-spacing) * 3) !important;
}
.tw\:pe-10 {
padding-inline-end: calc(var(--tw-spacing) * 10) !important;
}
.tw\:pt-4 {
padding-top: calc(var(--tw-spacing) * 4) !important;
}
.tw\:pt-6 {
padding-top: calc(var(--tw-spacing) * 6) !important;
}
.tw\:pt-8 {
padding-top: calc(var(--tw-spacing) * 8) !important;
}
.tw\:pr-4 {
padding-right: calc(var(--tw-spacing) * 4) !important;
}
.tw\:pb-4 {
padding-bottom: calc(var(--tw-spacing) * 4) !important;
}
.tw\:pl-2 {
padding-left: calc(var(--tw-spacing) * 2) !important;
}
.tw\:pl-4 {
padding-left: calc(var(--tw-spacing) * 4) !important;
}
.tw\:text-center {
text-align: center !important;
}
.tw\:text-left {
text-align: left !important;
}
.tw\:text-2xl {
font-size: var(--tw-text-2xl) !important;
line-height: var(--tw-leading, var(--tw-text-2xl--line-height)) !important;
}
.tw\:text-4xl {
font-size: var(--tw-text-4xl) !important;
line-height: var(--tw-leading, var(--tw-text-4xl--line-height)) !important;
}
.tw\:text-6xl {
font-size: var(--tw-text-6xl) !important;
line-height: var(--tw-leading, var(--tw-text-6xl--line-height)) !important;
}
.tw\:text-lg {
font-size: var(--tw-text-lg) !important;
line-height: var(--tw-leading, var(--tw-text-lg--line-height)) !important;
}
.tw\:text-sm\/relaxed {
font-size: var(--tw-text-sm) !important;
line-height: var(--tw-leading-relaxed) !important;
}
.tw\:text-size-header {
font-size: var(--tw-text-size-header) !important;
}
.tw\:font-bold {
--tw-font-weight: var(--tw-font-weight-bold) !important;
font-weight: var(--tw-font-weight-bold) !important;
}
.tw\:font-medium {
--tw-font-weight: var(--tw-font-weight-medium) !important;
font-weight: var(--tw-font-weight-medium) !important;
}
.tw\:font-normal {
--tw-font-weight: var(--tw-font-weight-normal) !important;
font-weight: var(--tw-font-weight-normal) !important;
}
.tw\:tracking-wide {
--tw-tracking: var(--tw-tracking-wide) !important;
letter-spacing: var(--tw-tracking-wide) !important;
}
.tw\:text-black {
color: var(--tw-color-black) !important;
}
.tw\:text-gray-300 {
color: var(--tw-color-gray-300) !important;
}
.tw\:text-neutral-400 {
color: var(--tw-color-neutral-400) !important;
}
.tw\:text-neutral-500 {
color: var(--tw-color-neutral-500) !important;
}
.tw\:text-red-dvc {
color: var(--tw-color-red-dvc) !important;
}
.tw\:text-slate-500 {
color: var(--tw-color-slate-500) !important;
}
.tw\:text-white {
color: var(--tw-color-white) !important;
}
.tw\:line-through {
text-decoration-line: line-through !important;
}
.tw\:shadow-md {
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !important;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}
.tw\:transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events !important;
transition-timing-function: var(--tw-ease, var(--tw-default-transition-timing-function)) !important;
transition-duration: var(--tw-duration, var(--tw-default-transition-duration)) !important;
}
.tw\:group-open\:rotate-180:is(:where(.tw\:group):is([open], :popover-open, :open) *) {
rotate: 180deg !important;
}
@media (hover: hover) {
.tw\:hover\:border-red-200:hover {
border-color: var(--tw-color-red-200) !important;
}
}
.tw\:focus\:ring-3:focus {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}
.tw\:focus\:outline-hidden:focus {
--tw-outline-style: none !important;
outline-style: none !important;
}
@media (forced-colors: active) {
.tw\:focus\:outline-hidden:focus {
outline: 2px solid transparent !important;
outline-offset: 2px !important;
}
}
.tw\:focus\:outline-none:focus {
--tw-outline-style: none !important;
outline-style: none !important;
}
.tw\:disabled\:cursor-not-allowed:disabled {
cursor: not-allowed !important;
}
.tw\:disabled\:border-gray-600:disabled {
border-color: var(--tw-color-gray-600) !important;
}
.tw\:disabled\:opacity-75:disabled {
opacity: 75% !important;
}
@media (hover: hover) {
.tw\:disabled\:hover\:border-gray-600:disabled:hover {
border-color: var(--tw-color-gray-600) !important;
}
}
@media (width >= 40rem) {
.tw\:sm\:block {
display: block !important;
}
}
@media (width >= 48rem) {
.tw\:md\:hidden {
display: none !important;
}
}
@media (width >= 48rem) {
.tw\:md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (width >= 48rem) {
.tw\:md\:grid-rows-5 {
grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
}
}
@media (width >= 64rem) {
.tw\:lg\:hidden {
display: none !important;
}
}
@media (width >= 80rem) {
.tw\:xl\:hidden {
display: none !important;
}
}
@media (width >= 96rem) {
.tw\:2xl\:hidden {
display: none !important;
}
}
}
@layer base {
ul, ol {
list-style: revert;
}
}
@layer components {
.tw_ul_style ul {
list-style-type: disc !important;
list-style-position: inside !important;
}
.tw_styles_accordion {
font-size: 1.5rem !important;
line-height: 2rem !important;
font-weight: 300 !important;
}
.tw_styles_accordion ul {
list-style-type: disc !important;
list-style-position: inside !important;
margin-bottom: 1.5rem !important;
}
.tw_styles_accordion h2 {
font-size: 1.5rem !important;
line-height: 3.5rem !important;
}
.tw_style_shortDescription {
font-weight: 300 !important;
}
.tw_style_productNote {
color: #ff5137;
}
.tw_style_productNote p, .tw_style_productNote section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .tw_style_productNote div.short-description {
font-weight: 500 !important;
}
.tw_style_productNote span {
font-weight: 500 !important;
}
}
@property --tw-divide-y-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-border-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-font-weight {
syntax: "*";
inherits: false;
}
@property --tw-tracking {
syntax: "*";
inherits: false;
}
@property --tw-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 rgba(0, 0, 0, 0);
}
@property --tw-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-shadow-alpha {
syntax: "
";
inherits: false;
initial-value: 100%;
}
@property --tw-inset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 rgba(0, 0, 0, 0);
}
@property --tw-inset-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-shadow-alpha {
syntax: "";
inherits: false;
initial-value: 100%;
}
@property --tw-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 rgba(0, 0, 0, 0);
}
@property --tw-inset-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 rgba(0, 0, 0, 0);
}
@property --tw-ring-inset {
syntax: "*";
inherits: false;
}
@property --tw-ring-offset-width {
syntax: "";
inherits: false;
initial-value: 0px;
}
@property --tw-ring-offset-color {
syntax: "*";
inherits: false;
initial-value: #fff;
}
@property --tw-ring-offset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 rgba(0, 0, 0, 0);
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-divide-y-reverse: 0;
--tw-border-style: solid;
--tw-font-weight: initial;
--tw-tracking: initial;
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-shadow-alpha: 100%;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-inset-shadow-alpha: 100%;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
}
}
}
#chat-application {
-index: 9997 !important;
}
#chat-application iframe {
z-index: 9998 !important;
}
@media screen and (min-width: 64em) {
section.portfolio .banner {
height: 40vh;
}
}
section.portfolio section.portfolio-overview {
padding: 6rem 0;
}
section.portfolio section.portfolio-overview .categories {
list-style: none;
display: block;
position: relative;
padding-bottom: 5rem;
}
section.portfolio section.portfolio-overview .categories li {
display: inline-block;
margin-right: 1rem;
position: relative;
font-weight: 300;
text-align: center;
}
section.portfolio section.portfolio-overview .categories li a {
display: block;
position: relative;
width: 13rem;
height: 13rem;
background: #eeeeee;
color: #252934;
transition: all 125ms ease-in-out;
border-bottom: 0.3rem solid rgba(0, 0, 0, 0);
}
section.portfolio section.portfolio-overview .categories li a span {
display: block;
position: absolute;
bottom: 2rem;
text-align: center;
width: 100%;
transition: all 125ms ease-in-out;
}
section.portfolio section.portfolio-overview .categories li a i {
font-size: 5.4rem;
line-height: 10rem;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all 125ms ease-in-out;
}
section.portfolio section.portfolio-overview .categories li a.active, section.portfolio section.portfolio-overview .categories li a:hover {
background: #ffffff;
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.15);
color: #ff5137;
border-bottom: 0.3rem solid #ff5137;
}
section.portfolio section.portfolio-overview .categories li a.active i, section.portfolio section.portfolio-overview .categories li a:hover i {
top: -0.2rem;
}
section.portfolio section.portfolio-overview .categories li a.active span, section.portfolio section.portfolio-overview .categories li a:hover span {
bottom: 2.2rem;
}
section.portfolio section.portfolio-overview .portfolio-items {
display: grid;
grid-gap: 2rem;
grid-template-columns: 1fr;
}
@media screen and (min-width: 48em) {
section.portfolio section.portfolio-overview .portfolio-items {
grid-gap: 3rem;
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: 64em) {
section.portfolio section.portfolio-overview .portfolio-items {
grid-template-columns: 1fr 1fr 1fr;
}
}
section.portfolio section.portfolio-overview .portfolio-items article {
border-radius: 0.6rem;
transition: all 125ms ease-in-out;
transform: translateY(0);
overflow: hidden;
}
@media screen and (min-width: 27em) {
section.portfolio section.portfolio-overview .portfolio-items article {
box-shadow: 0.2rem 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1);
}
}
@media screen and (min-width: 48em) {
section.portfolio section.portfolio-overview .portfolio-items article:hover {
box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.15);
transform: translateY(-0.1rem);
}
section.portfolio section.portfolio-overview .portfolio-items article:hover h5 {
color: #ff5137;
}
}
@media screen and (min-width: 64em) {
section.portfolio section.portfolio-overview .portfolio-items article.wide-left {
grid-column: 1/span 2;
}
section.portfolio section.portfolio-overview .portfolio-items article.wide-right {
grid-column: 2/span 2;
}
}
section.portfolio section.portfolio-overview .portfolio-items article a {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
section.portfolio section.portfolio-overview .portfolio-items article a figure {
border-radius: 0.6rem;
overflow: hidden;
max-height: 23rem;
}
@media screen and (min-width: 27em) {
section.portfolio section.portfolio-overview .portfolio-items article a figure {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
section.portfolio section.portfolio-overview .portfolio-items article a figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
section.portfolio section.portfolio-overview .portfolio-items article a figure .corner-right {
display: block;
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
section.portfolio section.portfolio-overview .portfolio-items article a figure .corner-right i, section.portfolio section.portfolio-overview .portfolio-items article a figure .corner-right:before {
display: block;
position: absolute;
}
section.portfolio section.portfolio-overview .portfolio-items article a figure .corner-right i {
color: #ffffff;
left: -3.1rem;
font-size: 2rem;
top: 0.8rem;
}
section.portfolio section.portfolio-overview .portfolio-items article a figure .corner-right:before {
content: "";
width: 20rem;
height: 20rem;
top: -13rem;
left: -5rem;
transform: rotate(45deg);
background: #252934;
transition: all 125ms ease-in-out;
}
section.portfolio section.portfolio-overview .portfolio-items article a .content {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 1.5rem 0;
}
@media screen and (min-width: 27em) {
section.portfolio section.portfolio-overview .portfolio-items article a .content {
justify-content: space-between;
padding: 2rem 2.5rem;
background: #ffffff;
border-bottom-left-radius: 0.6rem;
border-bottom-right-radius: 0.6rem;
}
}
section.portfolio section.portfolio-overview .portfolio-items article a .content h4 {
margin: 0;
transition: all 125ms ease-in-out;
}
section.portfolio section.portfolio-overview .portfolio-items article a .content span {
float: right;
line-height: 2.5rem;
font-size: 1.8rem;
color: #ff1810;
}
section.portfolio section.portfolio-overview .portfolio-items article a .content span strong {
font-size: 100%;
}
@media screen and (min-width: 48em) {
section.portfolio section.portfolio-overview .portfolio-items article a .content span {
line-height: 3rem;
}
}
section.portfolio section.portfolio-overview .portfolio-items article a:hover figure .corner-right:before {
background: #ff5137;
}
section.portfolio section.portfolio-overview .portfolio-items article a:hover .content span {
color: #ff5137;
}
.template__app--portfolio .slbOverlay {
background: #ffffff;
opacity: 1;
}
.template__app--portfolio .slbElement .slbImageWrap:after {
box-shadow: none;
}
.template__app--portfolio .slbImage {
padding: 0;
margin: 9rem 0 3rem;
box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.15);
width: 100%;
max-width: 76.8rem;
}
.template__app--portfolio .slbCloseBtn:after, .template__app--portfolio .slbCaption {
color: #000000;
}
.template__app--portfolio .slbArrow:before {
text-shadow: none;
color: #000000;
font-size: 4rem;
}
.template__app--portfolio .slbCaption {
text-align: left;
position: relative;
margin: 0;
padding: 0;
text-overflow: initial;
white-space: initial;
width: 100%;
max-width: 76.8rem;
}
.template__app--portfolio .slbCaption p, .template__app--portfolio .slbCaption section.product-detail > header .page-width div.product-summary div.short-description, section.product-detail > header .page-width div.product-summary .template__app--portfolio .slbCaption div.short-description {
font-size: 1.8rem;
line-height: 3rem;
}
.template__app--portfolio .slbCaption span {
float: right;
line-height: 4.1rem;
color: #ff1810;
font-size: 1.6rem;
}