HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div id="mySprdFooter" class="SprdMain">
</div>
<div>
my content
</div>
<div id="mySprdHeader" class="SprdMain">
</div>
<div id="mySprdBody" class="SprdMain">
</div>
.SprdMain .sprd-disabled {
opacity: .5;
cursor: not-allowed;
pointer-events: none
}
.SprdMain .sprd-bc-transp {
border-color: transparent
}
.SprdMain input::-ms-clear {
display: none
}
.SprdMain .sprd-big-loading-spinner,
.SprdMain .sprd-detail-cta__button__spinner,
.SprdMain .sprd-detail-suggestions__loading-spinner,
.SprdMain .sprd-img-spinner__spinner,
.SprdMain .sprd-mobilefilter__spinner {
border-style: solid;
border-top-color: transparent !important;
border-radius: 50%;
animation: sprd-loader 1s linear infinite, sprd-loader-fadein .5s
}
@keyframes sprd-loader {
0% {
transform: rotate(0deg)
}
to {
transform: rotate(1turn)
}
}
@keyframes sprd-loader-fadein {
0% {
opacity: 0
}
50% {
opacity: 0
}
to {
opacity: 1
}
}
.SprdMain #impressumCustomer .sprd-email-image {
display: inline-block;
vertical-align: text-bottom;
margin-left: .25em
}
.SprdMain .sprd-imprint {
margin: 20px 32px 0
}
.SprdMain .sprd-imprint .sprd-breadcrumb {
font-size: .875em
}
.SprdMain .sprd-about {
padding: 3em;
min-height: 400px
}
.SprdMain .sprd-about-info {
flex: 0 0 0;
max-width: 60%;
margin: 0 auto
}
@media screen and (max-width:767px) {
.SprdMain .sprd-about-info {
min-width: 100%
}
}
.SprdMain .sprd-about-info__caption,
.SprdMain .sprd-about-info__sub-caption {
text-align: center
}
.SprdMain .sprd-about-info__text {
line-height: 1.6
}
@media screen and (max-width:767px) {
.SprdMain .sprd-about-info__text {
font-size: .875em;
line-height: 1.35
}
}
.SprdMain .sprd-about-info__media {
display: flex;
margin: 3em 0;
align-items: center;
justify-content: center
}
@media screen and (max-width:767px) {
.SprdMain .sprd-about-info__media {
flex-flow: column
}
}
.SprdMain .sprd-about-info__backbtn {
margin-top: 1.5em;
text-align: center
}
.SprdMain .sprd-about-breadcrumb-wrapper {
padding-top: 20px;
padding-left: 32px;
font-size: .875em
}
.sprd-message-inactive {
background-color: #f2f2f2;
box-sizing: border-box;
display: flex;
width: 100vw;
height: 100vh;
max-width: 1400px;
margin: 0 auto;
justify-content: center;
align-items: center
}
.sprd-message-inactive * {
box-sizing: border-box
}
.sprd-message-inactive__modal {
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2.5em
}
.sprd-message-inactive__description,
.sprd-message-inactive__headline {
margin: 0 0 1em
}
.sprd-message-inactive__button-shopping {
text-decoration: none;
color: #fff;
background-color: #00b2a5;
border-radius: .2em;
padding: .65em 2.5em;
margin: 0 0 2em
}
.sprd-message-inactive__button-shopping:hover {
text-decoration: underline
}
.sprd-message-inactive__button-open-shop {
text-decoration: none;
color: #00b2a5
}
.sprd-message-inactive__button-open-shop:hover {
text-decoration: underline
}
.SprdMain .sprd__caption {
margin: 1em 0;
font-size: 1.5em
}
.SprdMain .sprd__caption-link {
color: inherit;
text-decoration: none
}
.SprdMain .sprd__sub-caption {
margin: 0 0 .5em;
font-size: 1em;
font-weight: 600
}
.SprdMain .sprd__cta-link {
padding: .571em 0;
color: inherit;
font-size: .875em;
font-weight: 700;
text-decoration: underline
}
.SprdMain .sprd__cta-link:visited {
color: inherit
}
.SprdMain .sprd__text {
white-space: pre-line;
font-size: .875em;
line-height: 1.3em
}
@media screen and (min-width:768px) {
.SprdMain .sprd__caption {
font-size: 1.75em
}
.SprdMain .sprd__sub-caption {
font-size: 1.125em;
margin-bottom: .444em
}
.SprdMain .sprd__cta-link {
padding: .5em 0;
font-size: 1em
}
.SprdMain .sprd__text {
font-size: 1em;
line-height: 1.5em
}
}
.SprdMain .sprd-error-message {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 20px 32px 5em
}
.SprdMain .sprd-error-message__ghost {
flex: 1 1 0;
align-self: flex-start;
color: red;
max-width: 50%
}
@media screen and (max-width:767px) {
.SprdMain .sprd-error-message__ghost {
max-width: 100%;
min-width: 100%
}
}
.SprdMain .sprd-error-message__sorry {
flex: 1 1 0;
min-width: 50%
}
.SprdMain .sprd-error-message__technical-mumbo-jumbo {
width: 100%;
margin-top: 4em;
font-size: .875em
}
.SprdMain .sprd-error-message__techinfo {
display: flex;
flex-wrap: wrap;
flex-direction: column
}
.SprdMain .sprd-error-message__techinfo-row {
display: flex;
flex-wrap: wrap;
padding: 3px
}
.SprdMain .sprd-error-message__techinfo-row div:first-child {
font-weight: 700;
width: 8em;
flex: 0 1 auto
}
.SprdMain .sprd-error-message__techinfo-row div {
flex: 1 0 0;
max-width: 100%
}
#sprd-main {
z-index: 1;
position: relative;
height: auto;
min-height: 100vh;
box-sizing: border-box;
font-size: 1rem
}
.SprdMain {
max-width: 1400px;
width: 100%
}
.SprdMain img {
display: block;
max-width: none
}
@media (min-width:1400px) {
.SprdMain--standalone {
margin-left: calc(50vw - 700px)
}
}
.SprdMain--jsIntegrated {
margin: 0 auto
}
.SprdMain__noscript-message {
padding: 1em;
background-color: red;
color: #fff;
font-weight: 700;
text-align: center
}
.SprdMain h1 {
font-size: 2em
}
@media screen and (max-width:767px) {
.SprdMain h1 {
font-size: 1.43em
}
}
.SprdMain .sprd-overlay,
.SprdMain .sprd-overlay .sprd-background {
top: 0;
bottom: 0;
left: 0;
right: 0
}
.SprdMain .sprd-overlay {
position: fixed;
overflow: hidden;
z-index: 30;
display: flex;
align-items: center;
justify-content: center;
text-align: center
}
.SprdMain .sprd-overlay .sprd-background {
position: absolute;
background-color: #333;
opacity: .7
}
.SprdMain .sprd-overlay h2,
.SprdMain .sprd-overlay h3,
.SprdMain .sprd-overlay h4 {
font-size: 1.5em
}
.SprdMain .sprd-overlay h1,
.SprdMain .sprd-overlay h2,
.SprdMain .sprd-overlay h3,
.SprdMain .sprd-overlay h4 {
text-align: left
}
.SprdMain .sprd-overlay .sprd-Wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 90vw;
max-width: 450px;
padding: 24px;
overflow: hidden;
border-radius: 2px;
box-shadow: 0 0 5px #404040;
box-sizing: border-box;
-webkit-overflow-scrolling: touch
}
.SprdMain .sprd-overlay .sprd-Wrapper>.sprd-content {
padding: .5em 1em;
overflow: auto;
-webkit-overflow-scrolling: touch
}
.SprdMain .sprd-overlay .sprd-loading {
position: relative
}
.SprdMain .sprd-overlay-title {
font-size: 130%;
font-weight: 700
}
.SprdMain .sprd-overlay-message,
.SprdMain .sprd-overlay-title {
text-align: center;
margin-bottom: 1.5em
}
.SprdMain .sprd-overlay-buttons {
display: flex;
flex-direction: column
}
.SprdMain .sprd-overlay-buttons .sprd-button {
display: inline-block;
margin-bottom: 1em
}
.SprdMain .sprd-overlay-buttons .sprd-button:last-child {
margin-bottom: 0
}
.SprdMain .sprd-overlay__close {
position: absolute;
top: 0;
right: 0;
width: 3.625em;
height: 3.875em;
font-size: 1em;
background: none;
border: 0;
cursor: pointer
}
.SprdMain .sprd-overlay__close:focus {
outline: none
}
.SprdMain .sprd-overlay__close-icon {
width: 1.2em;
height: 1.2em
}
.SprdMain .sprd-overlay__close+.sprd-content {
margin-top: 1.5em
}
.SprdMain .sprd-appearance-list--listpage {
margin: .25em 0 0;
max-height: 28px;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: center
}
@media screen and (min-width:768px) {
.SprdMain .sprd-appearance-list {
max-height: 24px
}
}
@media screen and (max-width:767px) {
.SprdMain .sprd-appearance-list {
max-height: 18px
}
}
.SprdMain .sprd-appearance-list__appearance {
border: none;
margin: 0;
padding: 0;
width: auto;
overflow: visible;
background: transparent;
cursor: pointer
}
.SprdMain .sprd-appearance-list__appearance:focus {
outline: none
}
.SprdMain .sprd-appearance-list__appearance svg {
width: 28px;
height: 28px
}
@media screen and (min-width:768px) {
.SprdMain .sprd-appearance-list__appearance svg {
width: 24px;
height: 24px
}
}
@media screen and (max-width:767px) {
.SprdMain .sprd-appearance-list__appearance svg {
width: 18px;
height: 18px
}
}
.SprdMain .sprd-appearance-list__appearance--large,
.SprdMain .sprd-appearance-list__appearance--large svg {
width: 48px;
height: 48px
}
.SprdMain .sprd-appearance-list__appearance--stockout {
pointer-events: none;
opacity: .25
}
.SprdMain .sprd-slider--1items .sprd-slider__content .sprd-slider__item {
width: 100%
}
.SprdMain .sprd-slider--2items .sprd-slider__content .sprd-slider__item {
width: 50%
}
.SprdMain .sprd-slider--3items .sprd-slider__content .sprd-slider__item {
width: 33.33333%
}
.SprdMain .sprd-slider--4items .sprd-slider__content .sprd-slider__item {
width: 25%
}
.SprdMain .sprd-slider--5items .sprd-slider__content .sprd-slider__item {
width: 20%
}
.SprdMain .sprd-slider--6items .sprd-slider__content .sprd-slider__item {
width: 16.66667%
}
.SprdMain .sprd-slider {
display: flex;
flex: 1 0 auto;
position: relative;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 100%
}
.SprdMain .sprd-slider a {
color: inherit;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center
}
.SprdMain .sprd-slider__button {
display: flex;
border: none;
padding: 0;
background: transparent;
align-self: center
}
.SprdMain .sprd-slider__button:focus {
outline: none
}
.SprdMain .sprd-slider__button--prev svg {
transform: rotate(90deg)
}
.SprdMain .sprd-slider__button--next svg {
transform: rotate(-90deg)
}
.SprdMain .sprd-slider__button[disabled] {
opacity: .1
}
.SprdMain .sprd-slider__button__icon {
align-self: center;
transition: opacity .5s ease-in-out;
cursor: pointer;
width: 28px;
height: 28px;
border-radius: 100%;
border: 2px solid transparent
}
@media screen and (max-width:767px) {
.SprdMain .sprd-slider__button__icon {
width: 18px;
height: 18px
}
}
.SprdMain .sprd-slider__main {
width: 100%;
position: relative;
display: flex
}
.SprdMain .sprd-slider__wrapper {
width: 100%;
overflow: hidden
}
.SprdMain .sprd-slider__content {
position: relative;
display: flex
}
.SprdMain .sprd-slider__item {
display: flex;
flex-shrink: 0;
height: 100%;
justify-content: center
}
.SprdMain .sprd-slider__dots {
position: absolute;
top: calc(100% + .75em);
left: 0;
right: 0;
display: flex;
flex-direction: row;
justify-content: center
}
.SprdMain .sprd-slider__dot {
width: .75em;
height: .75em;
margin: .2em;
border-radius: 100%;
transition: background-color .5s ease-in-out;
cursor: pointer
}
.SprdMain .sprd-slider__show-more {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 150px;
max-width: 150px;
font-weight: 700
}
.SprdMain .sprd-slider__show-more-caret {
transform: rotate(-90deg);
width: 1.2em;
height: 1.2em
}
.SprdMain .sprd-link {
display: inline-block;
text-decoration: none;
color: inherit;
border-bottom: 2px solid transparent;
transition: border-bottom-color .25s ease-in-out;
height: 1.6em;
cursor: pointer
}
.SprdMain .sprd-link:hover {
border-color: inherit
}
.SprdMain .sprd-link--selected {
border-color: inherit;
font-weight: 700
}
.SprdMain .sprd-link-2,
.SprdMain .sprd-slider__show-more {
text-decoration: underline;
cursor: pointer;
font-weight: 700
}
.SprdMain .sprd-caret-link__icon {
transform: rotate(-90deg);
vertical-align: middle;
width: 1em;
height: 1em
}
.SprdMain .sprd-big-loading-spinner,
.SprdMain .sprd-detail-suggestions__loading-spinner {
width: 5em;
height: 5em;
border-width: .5em;
border-color: inherit
}
.SprdMain .sprd-big-loading-spinner {
margin: 10em auto
}
.SprdMain .sprd-ghost__ghost {
animation: sprd-ghost-float 2s ease-in-out infinite;
transform-origin: 50% 50%
}
.SprdMain .sprd-ghost__hanger {
opacity: .5;
fill: none;
stroke-width: 4px;
stroke-miterlimit: 10
}
.SprdMain .sprd-ghost__outline {
fill: none;
stroke-width: 3px;
stroke-linejoin: round;
stroke-miterlimit: 10
}
.SprdMain .sprd-ghost__shadow {
opacity: .05
}
.SprdMain .sprd-ghost__floor {
opacity: .2
}
.SprdMain .sprd-search-ghost__magnifier {
transform-origin: 85% 45%;
transform: rotate(-50deg);
animation: sprd-search-ghost-move 2s ease-in-out infinite
}
.SprdMain .sprd-search-ghost__left-eye {
animation: sprd-search-ghost-left-eye-move 2s ease-in-out infinite
}
.SprdMain .sprd-search-ghost__right-eye {
animation: sprd-search-ghost-right-eye-move 2s ease-in-out infinite
}
@keyframes sprd-ghost-float {
0% {
transform: translate(0)
}
50% {
transform: translateY(10px)
}
}
@keyframes sprd-search-ghost-move {
10% {
transform: rotate(-50deg)
}
50%,
60% {
transform: rotate(10deg)
}
}
@keyframes sprd-search-ghost-left-eye-move {
10% {
transform: translate(0)
}
50%,
60% {
transform: translate(3%, 3%)
}
}
@keyframes sprd-search-ghost-right-eye-move {
10% {
transform: translate(0)
}
50%,
60% {
transform: translateY(1.7%)
}
}
@media screen and (max-width:767px) {
.SprdMain .sprd-blurry-slider {
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
overflow-y: hidden
}
.SprdMain .sprd-blurry-slider:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 24px;
z-index: 1
}
}
@media screen and (max-width:767px) {
.SprdMain .sprd-blurry-slider__filler {
min-width: 24px
}
}
.SprdMain .sprd-button:not(.sprd-item):active {
box-shadow: 0 1px 0 0;
text-decoration: none;
position: relative;
top: 1px
}
.SprdMain .sprd-button {
font-family: inherit;
box-sizing: border-box;
text-align: center;
display: inline-block;
vertical-align: middle;
cursor: pointer;
padding: .7em 1.2em;
font-size: 1em;
text-decoration: none
}
.SprdMain .sprd-button:focus {
outline: none
}
.SprdMain .sprd-button-secondary-cta-ghost {
font-family: inherit;
padding: 0 .7em;
margin: 0 .8em .8em 0;
min-height: 2.75em;
border-width: 1px;
border-style: solid;
cursor: pointer;
background-color: transparent
}
.SprdMain .sprd-button-secondary-cta-ghost:focus {
outline: none
}
.SprdMain .sprd-button-secondary-cta-ghost:hover {
box-shadow: inset 0 0 0 1px
}
.SprdMain .sprd-img-spinner {
position: relative;
width: 100%
}
.SprdMain .sprd-img-spinner__spinner {
width: 1.5em;
height: 1.5em;
box-sizing: border-box;
border-width: .2em;
border-color: inherit;
position: absolute;
top: 50%;
left: 50%;
margin: -.75em 0 0 -.75em
}
.SprdMain .sprd-img-spinner__image {
color: transparent;
transition: opacity .2s ease-in .25s;
opacity: 1;
-webkit-transform: translateZ(0)
}
.SprdMain .sprd-img-spinner__image--loading {
opacity: 0
}
.SprdMain .sprd-customer-reviews {
width: 100%;
display: flex
}
@media screen and (max-width:767px) {
.SprdMain .sprd-customer-reviews {
flex-direction: column
}
}
@media screen and (min-width:768px) {
.SprdMain .sprd-customer-reviews__left {
margin-right: 2em;
flex: 0 0 auto
}
}
.SprdMain .sprd-customer-reviews__right {
flex: 1 1 auto
}
.SprdMain .sprd-customer-reviews__sub-title {
display: flex;
align-items: center
}
.SprdMain .sprd-customer-reviews__sub-title svg {
width: 24px;
height: 24px
}
.SprdMain .sprd-customer-reviews__sub-title p {
margin-left: .5em;
overflow: hidden
}
.SprdMain .sprd-customer-reviews__review-entry {
margin: 0 0 1.5em
}
@media screen and (max-width:767px) {
.SprdMain .sprd-customer-reviews__review-entry {
margin: 0 0 .5em
}
}
.SprdMain .sprd-customer-reviews__review-text {
overflow-wrap: break-word;
word-wrap: break-word
}
.SprdMain .sprd-customer-reviews__histogram {
margin: .75em 0 3em
}
.SprdMain .sprd-customer-reviews__histogram-row {
display: flex;
justify-content: flex-end;
margin: .5em 0 0
}
.SprdMain .sprd-customer-reviews__histogram-row button {
font-size: 1em;
cursor: pointer;
border-style: none;
background-color: transparent;
overflow: hidden;
flex: 0 1 auto;
max-width: 10em
}
.SprdMain .sprd-customer-reviews__histogram-row button:focus {
outline: none
}
.SprdMain .sprd-customer-reviews__histogram-row>div:last-child {
flex: 0 0 auto;
width: calc(100% - 20em);
min-width: 4em
}
.SprdMain .sprd-customer-reviews__histogram-bar {
border: 1px solid;
width: 10em;
flex: 0 0 auto;
height: 1em;
margin: 0 1em
}
@media screen and (max-width:767px) {
.SprdMain .sprd-customer-reviews__histogram-bar {
width: calc(100% - 14em);
max-width: 10em
}
}
.SprdMain .sprd-customer-reviews__nav {
display: flex;
flex-direction: column
}
.SprdMain .sprd-customer-reviews__sort-title {
margin-bottom: .7em;
font-size: 1.125em;
overflow-wrap: break-word
}
@media screen and (min-width:768px) {
.SprdMain .sprd-customer-reviews__sort-container {
flex-direction: column;
display: flex;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
}
.SprdMain .sprd-customer-reviews__sort-btn {
overflow-wrap: break-word;
font-size: 1em;
font-weight: 700
}
@media screen and (min-width:768px) {
.SprdMain .sprd-customer-reviews__sort-btn {
min-width: 13em
}
}
.SprdMain .sprd-customer-reviews__pagination {
width: 100%;
display: flex;
margin: 2em 0 0;
justify-content: center
}
.SprdMain .sprd-customer-reviews__pagination-btn {
width: 40px;
height: 40px;
background: none;
border-width: 1px;
border-style: solid;
border-radius: 50%;
margin: 0 5px;
cursor: pointer
}
.SprdMain .sprd-customer-reviews__pagination-btn:focus {
outline: none
}
.SprdMain .sprd-customer-reviews__pagination-btn svg {
margin-top: 7px;
height: 26px;
width: 26px
}
.SprdMain .sprd-customer-reviews__pagination-text {
line-height: 40px;
text-align: center;
margin-right: 14px;
margin-left: 14px;
flex: 0 1 auto;
overflow: hidden;
white-space: nowrap
}
.SprdMain .sprd-customer-reviews__pagination-text--firstpage {
margin-left: 114px
}
.SprdMain .sprd-customer-reviews__pagination-text--lastpage {
margin-right: 114px
}
.SprdMain .sprd-customer-reviews--loading {
pointer-events: none;
opacity: .2
}
.SprdMain .sprd-cookie-banner {
display: flex;
align-items: center;
flex-wrap: nowrap;
width: 100%;
max-width: 1400px;
line-height: 1.5em;
background-color: rgba(0, 0, 0, .8);
color: #fff;
animation: sprd-cookie-banner-fadein .75s;
position: fixed;
z-index: 2147483647;
bottom: 0;
left: 0;
padding: .75em 1em;
box-sizing: border-box
}
@media screen and (min-width:768px) {
.SprdMain .sprd-cookie-banner {
font-size: .75em
}
}
@media screen and (max-width:767px) {
.SprdMain .sprd-cookie-banner {
font-size: .625em
}
}
@media (min-width:1400px) {
.SprdMain .sprd-cookie-banner {
margin-left: calc(50vw - 700px)
}
}
.SprdMain .sprd-cookie-banner__firstline {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%
}
@media screen and (max-width:767px) {
.SprdMain .sprd-cookie-banner__firstline {
margin: 0 0 5px
}
}
.SprdMain .sprd-cookie-banner__icon {
display: flex;
margin: 0 1em 0 0
}
.SprdMain .sprd-cookie-banner__icon svg {
width: 2em;
height: 2em
}
.SprdMain .sprd-cookie-banner__headline {
flex: 1 0 auto;
font-size: 1.125em;
font-weight: 700
}
.SprdMain .sprd-cookie-banner__text {
margin: 5px 0 0
}
@media screen and (min-width:768px) {
.SprdMain .sprd-cookie-banner__text {
margin: 5px 2em 0 0
}
}
.SprdMain .sprd-cookie-banner__text a {
color: inherit
}
.SprdMain .sprd-cookie-banner__desktop-btn {
display: none;
align-self: center;
white-space: nowrap;
font-size: 14px;
padding: 11px 1em;
margin: 0 0 0 auto
}
@media screen and (min-width:768px) {
.SprdMain .sprd-cookie-banner__desktop-btn {
display: flex
}
}
.SprdMain .sprd-cookie-banner__mobile-btn {
display: none;
margin: 0;
align-self: center;
white-space: nowrap;
font-size: 12px;
padding: 5px 1em
}
@media screen and (max-width:767px) {
.SprdMain .sprd-cookie-banner__mobile-btn {
display: flex
}
}
@keyframes sprd-cookie-banner-fadein {
0% {
opacity: 0
}
to {
opacity: 1
}
}
.SprdMain .sprd-ghost-page {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
margin: 20px 32px 0
}
.SprdMain .sprd-ghost-page #sprd-ghost {
flex: 1 1 0;
max-width: 50%
}
@media screen and (max-width:767px) {
.SprdMain .sprd-ghost-page #sprd-ghost {
min-width: 100%
}
}
.SprdMain .sprd-ghost-page__block {
flex: 1 1 0;
min-width: 50%
}
@media screen and (max-width:767px) {
.SprdMain .sprd-ghost-page__block {
text-align: center
}
}
.SprdMain .sprd-ghost-page__block p {
margin: 2em 0
}
.SprdMain .sprd-ghost-page .sprd-detail-suggestions {
flex: 1 1 0;
min-width: 100%;
margin: 2em 0
}
.SprdMain .sprd-ghost-page .sprd-button {
text-decoration: none
}
.SprdMain .sprd-media__image {
margin-bottom: 2em
}
@media screen and (min-width:768px) {
.SprdMain .sprd-media__image {
flex: 1 1 0%;
min-width: 200px;
margin-bottom: 0;
margin-right: 1em
}
}
.SprdMain .sprd-media__image img {
max-width: 100%;
max-height: 250px;
margin: 0 auto
}
@media screen and (min-width:768px) {
.SprdMain .sprd-media__image img {
max-height: 300px
}
}
.SprdMain .sprd-media__image img[src$=".svg"] {
height: 100%
}
.SprdMain .sprd-media__video {
margin-bottom: 2em;
position: relative
}
.SprdMain .sprd-media__video:before {
content: "";
display: block;
padding-top: 56.25%
}
.SprdMain .sprd-media__video-embed {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%
}
@media screen and (min-width:768px) {
.SprdMain .sprd-media__video {
flex: 0 1 640px;
margin-bottom: 0;
margin-right: 1em
}
}
.SprdMain .sprd-info-banner {
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
padding: .45em 1.75em;
background-color: #b32d38;
color: #fff
}
.SprdMain .sprd-info-banner__icon {
flex: 0 0 auto;
width: 1.25em;
height: 1.25em;
margin-right: .5em
}
@media screen and (min-width:768px) {
.SprdMain .sprd-info-banner__icon {
width: 1.5em;
height: 1.5em
}
}
.SprdMain .sprd-info-banner__text {
line-height: 1.25;
text-align: center
}
.SprdMain .sprd-info-banner__text--desktop {
display: none;
font-size: .875em
}
@media screen and (min-width:768px) {
.SprdMain .sprd-info-banner__text--desktop {
display: flex
}
}
.SprdMain .sprd-info-banner__text--mobile {
display: flex;
font-size: .75em
}
@media screen and (min-width:768px) {
.SprdMain .sprd-info-banner__text--mobile {
display: none
}
}
.SprdMain .sprd-info-banner__link {
display: flex;
flex: 0 0 auto;
align-items: center;
color: inherit;
text-decoration: none;
margin-left: .5em
}
.SprdMain .sprd-info-banner__link-text {
border-bottom: 1px solid
}
.SprdMain .sprd-info-banner__link__icon {
width: 1em;
height: 1em;
transform: rotate(-90deg)
}
.SprdMain .sprd-info-banner__link--desktop {
display: none;
font-size: .875em
}
@media screen and (min-width:768px) {
.SprdMain .sprd-info-banner__link--desktop {
display: flex
}
}
.SprdMain .sprd-info-banner__link--mobile {
display: flex;
font-size: .75em
}
@media screen and (min-width:768px) {
.SprdMain .sprd-info-banner__link--mobile {
display: none
}
}
.sprd-social-bar {
flex-wrap: wrap;
padding: .5em 0 0
}
.sprd-social-bar,
.sprd-social-bar__icon {
display: flex;
justify-content: center;
align-items: center
}
.sprd-social-bar__icon {
max-width: 2em;
max-height: 2em;
padding: .4em;
margin: 1em .5em;
border-radius: 100%
}
.sprd-social-bar__icon svg {
width: 1.6em;
height: 1.6em
}
.sprd-social-bar--burger .sprd-social-bar__icon,
.sprd-social-bar--header .sprd-social-bar__icon {
max-width: 1.6em;
max-height: 1.6em;
margin: 4px;
padding: 3px
}
.sprd-social-bar--burger .sprd-social-bar__icon svg,
.sprd-social-bar--header .sprd-social-bar__icon svg {
width: 1em;
height: 1em
}
.sprd-social-bar--burger .sprd-social-bar__icon:first-child,
.sprd-social-bar--header .sprd-social-bar__icon:first-child {
padding-left: 1em
}
.sprd-social-bar--burger {
padding: 0
}
.sprd-social-bar--header {
justify-content: flex-end;
flex-wrap: nowrap;
padding: 0 18px;
font-size: .875em
}
@media screen and (max-width:767px) {
.sprd-social-bar--header {
display: none
}
}
.sprd-social-bar__link {
margin-right: 2.5em;
color: inherit;
text-decoration: none
}
.sprd-footer .sprd-social-bar {
padding-top: 0
}
.sprd-footer .sprd-social-bar__icon {
margin-top: 0;
margin-bottom: 0
}
.SprdMain .sprd-header-custom-html {
background: no-repeat bottom;
overflow: hidden;
text-align: center;
max-width: 100%
}
.SprdMain .sprd-header-custom-html img {
max-width: 100%
}
.SprdMain .sprd-basket {
display: flex;
position: relative
}
.SprdMain .sprd-basket--open {
align-self: center
}
.SprdMain .sprd-basket .sprd-indicator {
left: 2.5em;
right: auto
}
.SprdMain .sprd-basket__button {
display: flex;
align-items: center;
margin-right: 10px;
padding-bottom: 3px;
position: relative;
cursor: pointer
}
.SprdMain .sprd-basket__button--open {
padding: 6px 0;
border-bottom-width: 3px;
border-bottom-style: solid
}
@media screen and (min-width:1000px) {
.SprdMain .sprd-basket__button {
margin-right: 20px
}
}
.SprdMain .sprd-basket__icon-count-wrapper {
position: relative
}
.SprdMain .sprd-basket__icon {
display: flex;
align-items: center;
width: 1.5em;
height: 1.5em;
margin: 0 .5em
}
@media screen and (min-width:768px) {
.SprdMain .sprd-basket__icon {
width: 2em;
height: 2em
}
}
.SprdMain .sprd-basket__count {
display: flex;
justify-content: center;
position: absolute;
top: 0;
right: 0;
font-size: .75em;
font-weight: 700;
line-height: 1;
min-height: 1em;
min-width: 1em;
padding: .25em;
border-radius: .75em
}
.SprdMain .sprd-basket__dropdown {
width: 30em;
position: absolute;
top: 100%;
right: 0;
z-index: 10;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
border-width: 1px;
border-style: solid
}
.SprdMain .sprd-basket__heading {
margin: 0;
padding: .25em;
font-size: 1.5em;
font-weight: 600;
text-align: left
}
.SprdMain .sprd-basket__content {
display: flex;
flex-direction: column;
align-items: stretch
}
.SprdMain .sprd-basket-empty__text {
text-align: center;
padding: 2em;
margin: 0 0 1.25em
}
.SprdMain .sprd-basket-empty__button {
display: flex;
justify-content: center;
font-size: 1em;
margin: 0 0 3em
}
.SprdMain .sprd-basket-footer {
display: flex;
flex-direction: column;
padding: 2em .5em .5em;
border-top-width: 1px;
border-top-style: solid
}
.SprdMain .sprd-basket-footer__total {
display: flex;
justify-content: space-between;
align-items: flex-end
}
.SprdMain .sprd-basket-footer__price {
font-size: 1.5em
}
.SprdMain .sprd-basket-footer__info {
font-size: .75em;
margin: .25em 0 1em
}
.SprdMain .sprd-basket-footer__vat a {
text-decoration: none;
color: inherit
}
.SprdMain .sprd-basket-footer__vat a:hover {
text-decoration: underline
}
.SprdMain .sprd-basket-footer__shipping {
text-decoration: none;
margin-left: .25em;
color: inherit
}
.SprdMain .sprd-basket-footer__shipping:hover {
text-decoration: underline
}
.SprdMain .sprd-basket-footer__button {
padding: 1em;
margin: 0 0 .75em
}
.SprdMain .sprd-basket-footer__delivery {
font-size: .75em;
text-decoration: none;
color: inherit
}
.SprdMain .sprd-basket-footer__delivery:hover {
text-decoration: underline
}
.SprdMain .sprd-basket-item {
display: flex;
margin: .5em;
padding: 1em 0 0
}
.SprdMain .sprd-basket-item:not(:first-child) {
border-top-width: 1px;
border-top-style: solid
}
.SprdMain .sprd-basket-item__image {
display: flex;
width: 40%;
height: 100%;
overflow: hidden;
position: relative
}
.SprdMain .sprd-basket-item__image .sprd-img-spinner {
position: absolute;
top: 0;
bottom: 0;
left: 0
}
.SprdMain .sprd-basket-item__image img {
width: 100%;
height: 100%
}
.SprdMain .sprd-basket-item__image:before {
content: "";
display: table;
padding-top: 100%
}
.SprdMain .sprd-basket-item__info {
width: 60%;
margin-left: 1em;
display: flex;
flex-direction: column;
align-items: flex-start
}
.SprdMain .sprd-basket-item__product-type {
text-decoration: none;
color: inherit;
overflow: hidden;
width: 100%;
text-overflow: ellipsis
}
.SprdMain .sprd-basket-item__product-type:hover {
text-decoration: underline
}
.SprdMain .sprd-basket-item__appearance,
.SprdMain .sprd-basket-item__size {
font-size: .75em;
margin: .75em 0 0
}
.SprdMain .sprd-basket-item__price {
font-size: 1.25em
}
.SprdMain .sprd-basket-prices {
padding: 1em .5em 0;
border-top-width: 1px;
border-top-style: solid;
display: flex;
flex-direction: column
}
.SprdMain .sprd-basket-prices__row {
display: flex;
justify-content: space-between;
margin: 1em 0 0
}
.SprdMain .sprd-basket-prices__row:first-child {
margin: 0
}
.SprdMain .sprd-basket-prices__row:last-child {
margin-bottom: 1em
}
.SprdMain .sprd-basket-prices__promo {
margin: 1em 0;
font-weight: 700;
font-size: .9em
}
.SprdMain .sprd-basket-notification {
position: absolute;
top: 100%;
right: 0;
z-index: 10;
width: 25em;
box-sizing: border-box;
padding: .75em 3em .75em 1.5em;
white-space: normal;
text-align: left;
line-height: 1.5
}
@media screen and (max-width:25em) {
.SprdMain .sprd-basket-notification {
width: 100vw
}
}
.SprdMain .sprd-basket-notification:before {
content: "";
position: absolute;
right: calc(20px + 1em);
bottom: 100%;
border: .5em solid transparent;
border-top-width: 0;
border-bottom-color: inherit
}
.SprdMain .sprd-basket-page {
max-width: 50em;
width: 100%;
margin: 0 auto
}
.SprdMain .sprd-quantity-control {
display: flex;
align-items: center;
max-width: 120px;
border-width: 1px;
border-style: solid;
margin: .75em 0
}
.SprdMain .sprd-quantity-control__button {
padding: .5em;
display: flex;
line-height: 1;
border: none;
background-color: transparent;
color: inherit;
cursor: pointer;
font-size: 1em
}
.SprdMain .sprd-quantity-control__button svg {
width: 1em;
height: 1em
}
.SprdMain .sprd-quantity-control__button:first-child {
border-right: 1px solid
}
.SprdMain .sprd-quantity-control__button:last-child {
border-left: 1px solid
}
.SprdMain .sprd-quantity-control__input {
flex: 1 1 1.75em;
min-width: 0;
height: 100%;
padding: 0 .25em;
font-size: 1em;
text-align: center;
border: none;
box-sizing: border-box
}
.SprdMain .sprd-quantity-control__input:focus {
outline: none
}
.SprdMain .sprd-search {
display: flex;
position: relative
}
.SprdMain .sprd-search--open {
align-self: center
}
.SprdMain .sprd-search__button {
display: flex;
flex-direction: column;
justify-content: center;
padding-bottom: 3px;
cursor: pointer
}
.SprdMain .sprd-search__button--open {
padding: 6px 0;
border-bottom-width: 3px;
border-bottom-style: solid
}
.SprdMain .sprd-search__icon {
display: flex;
align-items: center;
width: 1.5em;
height: 1.5em;
margin: 0 .5em
}
@media screen and (min-width:768px) {
.SprdMain .sprd-search__icon {
width: 2em;
height: 2em
}
}
.SprdMain .sprd-search-form {
z-index: 11;
display: flex;
width: 100vw;
max-width: 400px;
height: 3em;
position: absolute;
top: 100%;
right: calc(-100% - 10px);
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12)
}
@media screen and (min-width:768px) {
.SprdMain .sprd-search-form {
right: calc(-100% - 20px)
}
}
.SprdMain .sprd-search-form__wrapper {
height: 100%;
display: flex;
flex: 1;
position: relative
}
.SprdMain .sprd-search-form__input {
font-size: 1em;
padding: 0 2em 0 1em;
border: 0;
outline: none;
height: 100%;
width: 100%;
font: unset
}
.SprdMain .sprd-search-form__clear {
position: absolute;
right: .5em;
top: 50%;
transform: translateY(-50%);
background-color: #bbb;
padding: .5em;
border-radius: 100%;
line-height: 0;
cursor: pointer
}
.SprdMain .sprd-search-form__submit {
display: flex;
align-items: center;
border: 0;
padding: 1em;
cursor: pointer
}
.SprdMain .sprd-search-form__submit svg {
width: 1em;
height: 1em;
transform: rotate(180deg)
}
.SprdMain .sprd-navigation {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
white-space: nowrap
}
@media screen and (max-width:999px) {
.SprdMain .sprd-navigation--hide-on-touchdevs {
display: none
}
}
.SprdMain .sprd-department-filter {
display: flex;
flex-direction: row;
white-space: nowrap;
height: 3em;
flex: 1 0 0;
outline-width: 0
}
@media screen and (max-width:999px) {
.SprdMain .sprd-department-filter {
overflow-x: auto
}
}
.SprdMain .sprd-department-filter__openmenu {
display: flex
}
.SprdMain .sprd-department-filter__openmenu>.sprd-nav-link {
font-weight: 600;
padding-right: .6em;
padding-left: .6em
}
.SprdMain .sprd-department-filter__openmenu:hover>.sprd-nav-link {
padding-bottom: 0;
border-bottom: 3px solid
}
.SprdMain .sprd-department-filter__openmenu:hover>.sprd-nav-link .sprd-caret {
transform: rotate(-180deg)
}
.SprdMain .sprd-department-filter__designer-icon {
display: block;
margin-right: 5px
}
.SprdMain .sprd-department-filter__entry {
text-decoration: none
}
.SprdMain .sprd-promo-header {
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: .875em
}
@media screen and (max-width:767px) {
.SprdMain .sprd-promo-header {
font-size: .75em
}
}
.SprdMain .sprd-promo-header .sprd-button {
display: inline-flex;
align-items: center;
font-size: 1.14em
}
@media screen and (max-width:767px) {
.SprdMain .sprd-promo-header .sprd-button {
font-size: 1.33em
}
}
.SprdMain .sprd-promo-header .sprd-button svg {
width: 1.25em;
height: 1.25em;
margin-right: .5em
}
.SprdMain .sprd-promo-header .sprd-button.sprd-disabled {
pointer-events: none
}
.SprdMain .sprd-promo-expander {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
min-height: 2.5em;
padding: .55em 2em .5em;
text-align: center;
cursor: pointer;
box-sizing: border-box
}
.SprdMain .sprd-promo-countdown {
font-weight: 700
}
.SprdMain .sprd-promo-countdown-icon {
width: 1.143em;
height: 1.143em;
margin-right: .3em
}
.SprdMain .sprd-promo-shorttext {
margin: 0 .3em
}
.SprdMain .sprd-promo-redeem,
.SprdMain .sprd-promo-redeemed {
border-bottom: 1px solid;
font-weight: 700
}
.SprdMain .sprd-promo-box {
position: absolute;
overflow: hidden;
z-index: 11;
text-align: center;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
max-width: 25em;
width: 50%;
border-width: 1px;
border-style: solid;
border-top: 0
}
@media screen and (max-width:767px) {
.SprdMain .sprd-promo-box {
max-width: 100%;
width: 100%;
border-right: 0;
border-left: 0
}
}
.SprdMain .sprd-promo-caret {
width: 1.25em;
height: 1.25em
}
.SprdMain .sprd-promo-code {
padding: 1.43em 0;
font-weight: 700
}
.SprdMain .sprd-promo-description {
padding: 1.43em 1.14em .57em;
white-space: normal
}
.SprdMain .sprd-promo-header.sprd-opened .sprd-promo-caret {
transform: rotate(180deg)
}
.SprdMain .sprd-promo-header.sprd-opened .sprd-promo-box {
padding-bottom: 1em;
max-height: 500px;
box-sizing: border-box
}
.SprdMain .sprd-nav-link {
box-sizing: border-box;
text-decoration: none;
display: flex;
align-items: center;
padding-top: 3px;
padding-bottom: 3px
}
.SprdMain .sprd-nav-link svg {
margin-left: .2em;
width: 1em;
height: 1em
}
@media screen and (max-width:999px) {
.SprdMain .sprd-nav-link svg {
display: none
}
}
.SprdMain .sprd-nav-link--active {
padding-bottom: 0;
border-bottom-width: 3px;
border-bottom-style: solid
}
.SprdMain .sprd-burgermenu {
position: fixed;
height: 100%;
width: 100%;
left: -100%;
top: 0;
z-index: 30;
overflow: scroll;
transition: left .3s ease-in-out;
font-size: .875em
}
.SprdMain .sprd-burgermenu__content {
margin: 0 20px 40px
}
.SprdMain .sprd-burgermenu__header {
display: flex;
justify-content: space-between;
font-weight: 700;
font-size: 1.286em;
margin: 20px 20px 0;
padding-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
align-items: center
}
.SprdMain .sprd-burgermenu__header svg {
height: 1.25em;
cursor: pointer
}
.SprdMain .sprd-burgermenu__close {
padding-left: 1em
}
.SprdMain .sprd-burgermenu__title {
font-weight: 700;
vertical-align: middle;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-decoration: none;
color: inherit;
flex: 1 1 auto
}
.SprdMain .sprd-burgermenu__title img {
max-width: 100%;
max-height: 50px
}
.SprdMain .sprd-burgermenu__navigation {
list-style: none;
padding: 0;
margin: 0;
line-height: 2em
}
.SprdMain .sprd-burgermenu__item {
border-bottom-width: 1px;
border-bottom-style: solid;
padding: 1em 0;
font-weight: 600
}
.SprdMain .sprd-burgermenu__item--active .sprd-burgermenu__menu-toggle {
transform: rotate(180deg)
}
.SprdMain .sprd-burgermenu__menu-title {
display: flex;
justify-content: space-between
}
.SprdMain .sprd-burgermenu__menu-toggle {
height: 1.8em;
width: 1.8em
}
.SprdMain .sprd-burgermenu__subitem {
padding: 5px 0 0 1em;
font-weight: 400
}
.SprdMain .sprd-burgermenu__footer {
list-style: none;
padding: 0;
margin: 0;
line-height: 2em
}
.SprdMain .sprd-burgermenu__footer-item {
padding: 1em 0;
display: flex
}
.SprdMain .sprd-header {
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.SprdMain .sprd-header__burgerbutton {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 10px;
cursor: pointer
}
@media screen and (min-width:1000px) {
.SprdMain .sprd-header__burgerbutton {
display: none
}
}
.SprdMain .sprd-header__burgerbutton__bar {
border-radius: 1px;
width: 24px;
height: 3px;
margin-top: 4px
}
.SprdMain .sprd-header__burgerbutton__bar:first-child {
margin-top: 0
}
.SprdMain .sprd-header__title {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
color: inherit;
font-weight: 700;
font-size: 1.25em;
line-height: 58px;
vertical-align: middle;
text-overflow: ellipsis
}
@media screen and (min-width:768px) {
.SprdMain .sprd-header__title {
font-size: 1.5em
}
}
@media screen and (min-width:1000px) {
.SprdMain .sprd-header__title {
padding-left: 20px;
font-size: 1.75em
}
}
.SprdMain .sprd-header__image {
display: flex;
flex: 1;
justify-content: center;
padding: 10px 0
}
@media screen and (min-width:1000px) {
.SprdMain .sprd-header__image {
justify-content: flex-start;
padding-left: 20px
}
}
.SprdMain .sprd-header__image>img {
max-width: 100%;
max-height: 34px;
object-fit: scale-down;
object-position: left
}
@media screen and (min-width:1000px) {
.SprdMain .sprd-header__image>img {
max-height: 68px
}
}
.SprdMain .sprd-header__actions {
display: flex
}
.SprdMain .sprd-startpage {
position: relative;
margin-bottom: 2em
}
.SprdMain .sprd-startpage .sprd__caption,
.SprdMain .sprd-startpage .sprd__cta-link {
text-align: center
}
.SprdMain .sprd-startpage .sprd__text {
display: flex;
justify-content: center
}
.SprdMain .sprd-startpage .sprd-button {
min-width: 12em
}
@media screen and (max-width:767px) {
.SprdMain .sprd-startpage .sprd-button {
font-size: .875em
}
}
.SprdMain .sprd-startpage__spinner {
transition: opacity .35s ease-in-out .25s;
transition-delay: .5s
}
.SprdMain .sprd-startpage-teaser {
position: relative;
overflow: hidden
}
.SprdMain .sprd-startpage-teaser__link {
display: block;
color: inherit;
text-decoration: none;
cursor: pointer
}
.SprdMain .sprd-startpage-teaser__plain-image {
display: block;
max-width: 100%;
margin: 0 auto
}
.SprdMain .sprd-startpage-teaser__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: no-repeat 50%/cover
}
.SprdMain .sprd-startpage-teaser__content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
min-height: 20em;
padding: 0 2.125em
}
.SprdMain .sprd-startpage-teaser__caption {
margin: 0;
font-size: 2em;
text-align: center
}
@media screen and (min-width:768px) {
.SprdMain .sprd-startpage-teaser__caption {
font-size: 2.813em
}
}
.SprdMain .sprd-startpage-teaser__subcaption {
margin-top: 1em;
font-weight: 600;
line-height: 1.4;
text-align: center
}
.SprdMain .sprd-startpage-teaser__cta {
margin-top: 1.5em
}
.SprdMain .sprd-startpage-teaser__cta:first-child {
margin-top: 0
}
.SprdMain .sprd-startpage-collection-preview {
margin: 3.5em 2em 2em
}
.SprdMain .sprd-startpage-collection-preview:first-child {
margin-top: 0
}
@media screen and (max-width:767px) {
.SprdMain .sprd-startpage-collection-preview {
margin: 3.125em 1em 2em
}
}
.SprdMain .sprd-startpage-collection-preview__cta {
margin-top: .5em;
text-align: center
}
.SprdMain .sprd-startpage-cols {
display: flex;
flex-wrap: wrap;
justify-content: space-between
}
.SprdMain .sprd-startpage-col {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 1em
}
@media screen and (min-width:768px) {
.SprdMain .sprd-startpage-col {
width: calc(50% - 9px)
}
}
@media screen and (min-width:1000px) {
.SprdMain .sprd-startpage-col {
width: calc(33.33333% - 18px)
}
}
.SprdMain .sprd-startpage-col__name {
text-align: center
}
.SprdMain .sprd-startpage-col__image {
display: block;
position: relative
}
.SprdMain .sprd-startpage-col__image:before {
content: "";
display: block;
padding-top: 100%
}
.SprdMain .sprd-startpage-col__image img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%
}
.SprdMain .sprd-startpage-col__small-col {
display: flex;
margin-top: 9px
}
.SprdMain .sprd-startpage-col__small-col .sprd-startpage-col__image {
width: calc(33.3333% - 6px)
}
.SprdMain .sprd-startpage-col__small-col .sprd-startpage-col__image+.sprd-startpage-col__image {
margin-left: 9px
}
.SprdMain .sprd-startpage-col__designCount {
border: 0
}
.SprdMain .sprd-startpage-col__designCount:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
opacity: .7
}
.SprdMain .sprd-startpage-col__designCountLabel {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 1.75em;
font-weight: 700;
white-space: nowrap
}
@media screen and (min-width:768px) {
.SprdMain .sprd-startpage-col__link {
font-size: 1em
}
}
.SprdMain .sprd-startpage-preview-tiles {
margin: 3.5em 2em 2em
}
.SprdMain .sprd-startpage-preview-tiles:first-child {
margin-top: 0
}
@media screen and (max-width:767px) {
.SprdMain .sprd-startpage-preview-tiles {
margin: 3.125em 1em 2em
}
}
.SprdMain .sprd-startpage-preview-tiles__caption {
flex: 0 1 auto;
word-break: break-word
}
.SprdMain .sprd-startpage-preview-tiles__previews {
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: relative;
margin: 0 -.5em .5em
}
.SprdMain .sprd-startpage-preview-tiles__cta {
text-align: center
}
.SprdMain .sprd-startpage-preview-tiles__preview {
width: 50%;
box-sizing: border-box;
padding: 0 .5em;
margin-bottom: 1em;
color: inherit;
text-decoration: none
}
@media screen and (min-width:1000px) {
.SprdMain .sprd-startpage-preview-tiles__preview--5row {
width: 20%
}
.SprdMain .sprd-startpage-preview-tiles__preview--5row:nth-child(6) {
display: none
}
}
@media screen and (min-width:768px) and (max-width:999px) {
.SprdMain .sprd-startpage-preview-tiles__preview--5row {
width: 33%
}
.SprdMain .sprd-startpage-preview-tiles__preview--5row:nth-child(10) {
display: none
}
}
@media screen and (min-width:1000px) {
.SprdMain .sprd-startpage-preview-tiles__preview--4row {
width: 25%
}
}
@media screen and (min-width:768px) and (max-width:999px) {
.SprdMain .sprd-startpage-preview-tiles__preview--4row {
width: 33%
}
.SprdMain .sprd-startpage-preview-tiles__preview--4row:nth-child(n+7) {
display: none
}
}
.SprdMain .sprd-startpage-preview-tiles__image {
display: flex
}
.SprdMain .sprd-startpage-preview-tiles__image:before {
content: "";
display: table;
padding-top: 100%
}
.SprdMain .sprd-startpage-preview-tiles__image img {
width: 100%;
height: 100%
}
.SprdMain .sprd-startpage-preview-tiles__text {
margin-top: .5em;
font-size: .875em;
line-height: 1.5;
text-align: center
}
@media screen and (min-width:768px) {
.SprdMain .sprd-startpage-preview-tiles__text {
font-size: 1em
}
}
.SprdMain .sprd-startpage-preview-tiles__name {
overflow: hidden;
max-height: 4.5em;
word-break: break-word
}
.SprdMain .sprd-startpage-about-us {
padding-top: 2em;
margin: 3.5em 2em 2em
}
.SprdMain .sprd-startpage-about-us:first-child {
margin-top: 0
}
@media screen and (max-width:767px) {
.SprdMain .sprd-startpage-about-us {
margin: 3.125em 1em 2em
}
}
@media screen and (min-width:768px) {
.SprdMain .sprd-startpage-about-us {
display: flex;
align-items: center
}
}
.SprdMain .sprd-startpage-about-us__caption {
margin: 0
}
.SprdMain .sprd-startpage-about-us__textsection {
max-width: 35em;
margin: 0 auto;
padding: 0
}
.SprdMain .sprd-startpage-about-us__textsection:first-child {
text-align: center
}
@media screen and (min-width:768px) {
.SprdMain .sprd-startpage-about-us__textsection {
flex: 0 1 35em;
min-width: 22em;
max-width: none;
padding: 0 2em 0 1em
}
}
.SprdMain .sprd-startpage-about-us__cta {
margin-top: 1.5em;
text-align: center
}
.SprdMain .sprd-startpage-trust-elements {
margin: 3.5em 2em 2em
}
.SprdMain .sprd-startpage-trust-elements:first-child {
margin-top: 0
}
@media screen and (max-width:767px) {
.SprdMain .sprd-startpage-trust-elements {
margin: 3.125em 1em 2em
}
}
.SprdMain .sprd-startpage-trust-elements__section {
display: flex;
align-items: center
}
.SprdMain .sprd-startpage-trust-elements__section+.sprd-startpage-trust-elements__section {
margin-top: .875em
}
.SprdMain .sprd-startpage-trust-elements__textsection {
margin-left: 1.5em
}
.SprdMain .sprd-startpage-trust-elements__image svg {
height: 4.325em;
width: 4.325em
}
.SprdMain .sprd-startpage-trust-elements__subcaption {
margin-bottom: .25em
}
.SprdMain .sprd-startpage-trust-elements__text {
font-size: .875em;
line-height: 1.4
}
@media screen and (min-width:768px) {
.SprdMain .sprd-startpage-trust-elements__sections {
display: flex
}
.SprdMain .sprd-startpage-trust-elements__section {
display: block;
flex: 1;
text-align: center
}
.SprdMain .sprd-startpage-trust-elements__section+.sprd-startpage-trust-elements__section {
margin-top: 0
}
.SprdMain .sprd-startpage-trust-elements__textsection {
max-width: 300px;
margin: 0 auto;
padding: 0 1em
}
.SprdMain .sprd-startpage-trust-elements__subcaption {
margin: .889em 0 .444em;
text-align: center
}
.SprdMain .sprd-startpage-trust-elements__text {
font-size: 1em
}
}
.SprdMain .sprd-startpage-product-type-categories {
margin: 3.5em 2em 2em
}
.SprdMain .sprd-startpage-product-type-categories:first-child {
margin-top: 0
}
@media screen and (max-width:767px) {
.SprdMain .sprd-startpage-product-type-categories {
margin: 3.125em 1em 2em
}
}
.SprdMain .sprd-startpage-product-type-categories__caption {
word-break: break-word
}
.SprdMain .sprd-startpage-product-type-categories__list {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: center;
width: 100%
}
.SprdMain .sprd-startpage-product-type-categories__category {
flex: 0 1 auto;
width: 100%;
max-width: 500px;
display: flex;
flex-direction: column;
margin-bottom: 1em;
color: inherit;
text-decoration: none
}
@media screen and (min-width:350px) {
.SprdMain .sprd-startpage-product-type-categories__category {
width: calc(50% - 1em)
}
.SprdMain .sprd-startpage-product-type-categories__category:nth-child(2n) {
margin-left: 2em
}
}
@media screen and (min-width:768px) {
.SprdMain .sprd-startpage-product-type-categories__category {
width: calc(33% - 1.33em)
}
.SprdMain .sprd-startpage-product-type-categories__category:nth-child(3n+3) {
margin-left: 2em
}
}
@media screen and (min-width:1200px) {
.SprdMain .sprd-startpage-product-type-categories__category {
width: calc(25% - 1.5em)
}
}
@media screen and (min-width:768px) {
.SprdMain .sprd-startpage-product-type-categories__list--items4 .sprd-startpage-product-type-categories__category {
width: calc(25% - 1.5em)
}
}
.SprdMain .sprd-startpage-product-type-categories__sub-caption {
text-align: center
}
.SprdMain .sprd-startpage-product-type-categories__department,
.SprdMain .sprd-startpage-product-type-categories__name {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.SprdMain .sprd-startpage-product-type-categories__image {
display: block;
position: relative
}
.SprdMain .sprd-startpage-product-type-categories__image:before {
content: "";
display: block;
padding-top: 100%
}
.SprdMain .sprd-startpage-product-type-categories__image .sprd-img-spinner {
position: absolute;
left: 0;
bottom: 0
}
.SprdMain .sprd-startpage-product-type-categories__image img {
width: 100%;
height: 100%
}
.SprdMain .sprd-startpage-product-type-categories__link {
text-align: center
}
.SprdMain .sprd-startpage-product-type-categories__link__icon {
width: 1em;
height: 1em;
vertical-align: middle;
transform: rotate(-90deg)
}
.SprdMain .sprd-startpage-product-type-categories__cta {
text-align: center
}
.SprdMain .sprd-startpage-dewipro {
margin: 3.5em 2em 2em
}
.SprdMain .sprd-startpage-dewipro:first-child {
margin-top: 0
}
@media screen and (max-width:767px) {
.SprdMain .sprd-startpage-dewipro {
margin: 3.125em 1em 2em
}
}
.SprdMain .sprd-startpage-dewipro__section {
max-width: 1270px;
margin: 0 auto
}
.SprdMain .sprd-startpage-dewipro__section+.sprd-startpage-dewipro__section {
margin-top: 2em
}
.SprdMain .sprd-startpage-dewipro__images {
display: flex;
flex-wrap: wrap
}
.SprdMain .sprd-startpage-dewipro__design {
flex: 1 0 calc(40% + 0.5em);
margin-bottom: 1em;
box-sizing: border-box
}
.SprdMain .sprd-startpage-dewipro__products {
flex: 1 0 calc(60% - 0.5em);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: space-between;
justify-content: space-between;
margin: -1em 0 1em
}
.SprdMain .sprd-startpage-dewipro__large-img {
display: block;
min-width: 270px;
max-width: 500px
}
.SprdMain .sprd-startpage-dewipro__large-img img {
width: 100%;
height: 100%
}
.SprdMain .sprd-startpage-dewipro__img {
flex: 0 0 calc(50% - 0.6666em);
min-width: 125px;
margin-top: 1em
}
.SprdMain .sprd-startpage-dewipro__img img {
width: 100%
}
.SprdMain .sprd-startpage-dewipro__more {
align-items: center;
justify-content: center;
display: flex
}
.SprdMain .sprd-startpage-dewipro__more:before {
content: "";
display: block;
padding-top: 100%
}
.SprdMain .sprd-startpage-dewipro__more-link {
font-size: .875em;
text-decoration: none;
color: inherit;
cursor: pointer;
text-align: center
}
.SprdMain .sprd-startpage-dewipro__more-link:hover {
border-color: inherit
}
.SprdMain .sprd-startpage-dewipro__more-count,
.SprdMain .sprd-startpage-dewipro__more-prefix,
.SprdMain .sprd-startpage-dewipro__more-suffix {
display: block
}
.SprdMain .sprd-startpage-dewipro__more-prefix {
font-size: 1.25em
}
.SprdMain .sprd-startpage-dewipro__more-count {
padding-bottom: .125em;
font-weight: 700;
font-size: 1.25em
}
.SprdMain .sprd-startpage-dewipro__more-icon {
display: block;
border-radius: 100%;
width: 3em;
height: 3em;
margin: 1em auto 0
}
.SprdMain .sprd-startpage-dewipro__button {
margin-top: .5em;
text-align: center
}
@media screen and (min-width:479px) {
.SprdMain .sprd-startpage-dewipro__img {
flex: 0 0 calc(33.3333% - 0.6666em)
}
}
@media screen and (min-width:549px) {
.SprdMain .sprd-startpage-dewipro__design {
padding-right: 1em
}
}
@media screen and (min-width:1000px) {
.SprdMain .sprd-startpage-dewipro__more-prefix {
font-size: 1.5em
}
.SprdMain .sprd-startpage-dewipro__more-count {
font-size: 2em
}
}
.SprdMain .sprd-startpage-follow-us {
margin: 3.5em 2em 2em
}
.SprdMain .sprd-startpage-follow-us:first-child {
margin-top: 0
}
@media screen and (max-width:767px) {
.SprdMain .sprd-startpage-follow-us {
margin: 3.125em 1em 2em
}
}
.SprdMain .sprd-startpage-follow-us .sprd-social-bar {
padding: 0
}
.SprdMain .sprd-startpage-follow-us__text {
max-width: 50em;
margin: 0 auto;
text-align: center
}
.SprdMain .sprd-startpage-cyo-intro {
margin: 3.5em 2em 2em
}
.SprdMain .sprd-startpage-cyo-intro:first-child {
margin-top: 0
}
@media screen and (max-width:767px) {
.SprdMain .sprd-startpage-cyo-intro {
margin: 3.125em 1em 2em
}
}
.SprdMain .sprd-startpage-cyo-intro__text {
max-width: 50em;
margin: 0 auto;
text-align: center
}
.SprdMain .sprd-startpage-cyo-intro__steps {
display: flex;
flex-wrap: wrap;
justify-content: space-between
}
.SprdMain .sprd-startpage-cyo-intro__step {
width: 100%;
max-width: 500px;
margin: 0 auto
}
.SprdMain .sprd-startpage-cyo-intro__step__text {
margin: .5em 10% 1em
}
@media screen and (min-width:768px) {
.SprdMain .sprd-startpage-cyo-intro__step {
width: calc(50% - 1em)
}
.SprdMain .sprd-startpage-cyo-intro__step:first-child,
.SprdMain .sprd-startpage-cyo-intro__step:nth-child(2) {
margin: 0
}
}
@media screen and (min-width:1000px) {
.SprdMain .sprd-startpage-cyo-intro__step {
width: calc(33.333% - 1em)
}
.SprdMain .sprd-startpage-cyo-intro__step:nth-child(3) {
margin: 0
}
}
.SprdMain .sprd-startpage-cyo-intro__icon {
display: block;
background: #fff
}
.SprdMain .sprd-startpage-cyo-intro__button-section {
text-align: center
}
.SprdMain .sprd-breadcrumb {
list-style: none;
overflow: hidden;
text-transform: uppercase;
font-size: 1em;
padding: 0;
margin: 0;
line-height: normal
}
@media screen and (max-width:767px) {
.SprdMain .sprd-breadcrumb {
font-size: .857em;
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
overflow-y: hidden
}
}
.SprdMain .sprd-breadcrumb__item {
float: left
}
@media screen and (max-width:767px) {
.SprdMain .sprd-breadcrumb__item {
white-space: nowrap
}
}
.SprdMain .sprd-breadcrumb__item a {
text-decoration: none
}
.SprdMain .sprd-breadcrumb__item:after {
content: ">";
padding: .5em
}
.SprdMain .sprd-breadcrumb__item:last-child:after {
content: "";
padding: 0
}
.SprdMain .sprd-listpage {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
padding: 20px 0;
font-size: .875em
}
@media screen and (max-width:767px) {
.SprdMain .sprd-listpage {
padding: 1em 0
}
}
.SprdMain .sprd-listpage__header {
box-sizing: border-box;
width: 100%;
padding-left: 20px;
padding-right: 20px
}
@media screen and (max-width:767px) {
.SprdMain .sprd-listpage__header {
padding-left: 10px;
padding-right: 10px
}
}
.SprdMain .sprd-listpage__title {
width: 100%;
font-weight: 700;
margin-top: .67em;
margin-bottom: .67em;
padding: 0;
line-height: normal
}
@media screen and (max-width:767px) {
.SprdMain .sprd-listpage__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
}
.SprdMain .sprd-listpage .sprd-button {
font-size: 1.14em
}
.SprdMain .sprd-activefilters-lp {
box-sizing: border-box;
flex: 0 0 100%;
display: flex;
flex-wrap: wrap;
line-height: 1.5;
padding: 0 10px
}
@media screen and (max-width:767px) {
.SprdMain .sprd-activefilters-lp {
font-size: .857em;
justify-content: space-between
}
}
@media screen and (max-width:767px) {
.SprdMain .sprd-activefilters-lp__title {
display: none
}
}
.SprdMain .sprd-activefilters-lp__item {
display: flex;
margin-left: 1em;
text-decoration: none;
color: inherit
}
@media screen and (max-width:767px) {
.SprdMain .sprd-activefilters-lp__item {
width: 48%;
margin: 0 0 .75em
}
}
.SprdMain .sprd-activefilters-lp__item svg {
width: 1.5em;
height: 1.5em;
margin-left: .25em;
vertical-align: text-top
}
.SprdMain .sprd-activefilters-lp__itemtext {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%
}
.SprdMain .sprd-activefilters-lp__reset {
text-decoration: underline;
color: inherit;
margin-left: 2em
}
@media screen and (max-width:767px) {
.SprdMain .sprd-activefilters-lp__reset {
width: 48%;
margin: 0 0 .75em
}
}
.SprdMain .sprd-activefilters-lp__reset:hover {
text-decoration: underline
}
.SprdMain .sprd-activefilters-mobile {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
padding-top: 1.25em;
padding-bottom: .5em;
border-bottom-width: 1px;
border-bottom-style: solid;
line-height: 1.5
}
.SprdMain .sprd-activefilters-mobile__item {
display: flex;
margin: 0 0 .75em;
width: 48%
}
.SprdMain .sprd-activefilters-mobile__item svg {
width: 1.5em;
min-width: 1.5em;
height: 1.5em;
margin-left: .25em;
vertical-align: text-top
}
.SprdMain .sprd-activefilters-mobile__itemtext {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%
}
.SprdMain .sprd-activefilters-mobile__reset {
text-decoration: underline;
color: inherit;
margin: 0 0 .75em;
width: 48%
}
.SprdMain .sprd-activefilters-mobile__reset:hover {
text-decoration: underline
}
.SprdMain .sprd-listpage-size-filter {
list-style: none;
flex-grow: 0;
border: 1px solid;
border-color: inherit;
min-width: calc(25% - 12px);
margin: 0 10px 10px 0;
align-items: flex-start;
justify-content: flex-start
}
@media screen and (max-width:1100px) {
.SprdMain .sprd-listpage-size-filter {
min-width: calc(33% - 12px)
}
}
.SprdMain .sprd-listpage-size-filter--full-width {
min-width: calc(100% - 12px)
}
.SprdMain .sprd-listpage-size-filter:hover {
box-shadow: inset 0 0 0 1px
}
.SprdMain .sprd-listpage-size-filter__link {
text-decoration: none;
color: inherit;
display: block;
text-align: center;
width: 100%
}
.SprdMain .sprd-listpage-color-filter {
list-style: none;
flex-grow: 0;
align-items: flex-start;
justify-content: flex-start
}
.SprdMain .sprd-listpage-color-filter .sprd-single-color-circle {
width: 30px;
height: 30px
}
.SprdMain .sprd-filterpane {
flex: 0 0 20%;
padding-right: 1em;
padding-left: 20px
}
@media screen and (max-width:767px) {
.SprdMain .sprd-filterpane {
display: none
}
}
.SprdMain .sprd-filterpane__filterlist {
list-style: none;
padding: 0;
margin: 0;
line-height: 2em
}
.SprdMain .sprd-filterpane__colorlist,
.SprdMain .sprd-filterpane__sizelist {
display: flex;
flex-direction: row;
flex-flow: wrap;
padding: 0;
margin: 0
}
.SprdMain .sprd-filterpane-section {
line-height: 2em;
border-bottom-width: 1px;
border-bottom-style: solid
}
.SprdMain .sprd-filterpane-section:first-child {
border-top-width: 1px;
border-top-style: solid
}
.SprdMain .sprd-filterpane-section__toggle {
height: 1.5em;
width: 1.5em
}
.SprdMain .sprd-filterpane-section--expanded .sprd-filterpane-section__toggle {
transform: rotate(180deg)
}
.SprdMain .sprd-filterpane-section__title {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1em 0;
font: inherit;
font-weight: 700;
background: none;
border: 0
}
.SprdMain .sprd-filterpane-section__title:focus {
outline: none
}
.SprdMain .sprd-filterpane-section__filters {
padding-bottom: 1em
}
.SprdMain .sprd-filterpane-section__level1 {
margin: 0
}
.SprdMain .sprd-filterpane-section__level2 {
margin: 0 1em
}
.SprdMain .sprd-filterpane-section__level2:first-child {
margin-top: .25em
}
.SprdMain .sprd-filterpane-section__level2:last-child {
margin-bottom: .25em
}
@media screen and (max-width:767px) {
.SprdMain .sprd-mobilefilter {
padding-right: 0;
width: 100%;
min-width: 100%;
max-width: 100%;
flex: 0 1 auto
}
}
.SprdMain .sprd-mobilefilter--loading .sprd-activefilters-mobile,
.SprdMain .sprd-mobilefilter--loading .sprd-mobilefilter-section__filters {
pointer-events: none
}
.SprdMain .sprd-mobilefilter__filterlist {
list-style: none;
padding: 0;
margin: 0;
line-height: 2em
}
.SprdMain .sprd-mobilefilter__open-btns {
display: flex;
justify-content: center;
margin-bottom: 1em
}
.SprdMain .sprd-mobilefilter__open-btn {
min-width: 10em;
font-weight: 600;
display: none;
justify-content: center;
text-decoration: none
}
@media screen and (max-width:767px) {
.SprdMain .sprd-mobilefilter__open-btn {
display: inherit
}
}
.SprdMain .sprd-mobilefilter__open-btn svg {
width: 1.2em;
height: 1.2em;
margin-right: .5em
}
.SprdMain .sprd-mobilefilter__modal {
position: fixed;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: 30;
overflow: scroll
}
.SprdMain .sprd-mobilefilter__header {
display: flex;
justify-content: space-between;
font-weight: 700;
font-size: 1.25em;
padding-bottom: .75em;
border-bottom-width: 1px;
border-bottom-style: solid
}
.SprdMain .sprd-mobilefilter__header svg {
height: 1.25em
}
.SprdMain .sprd-mobilefilter__spinner {
width: .5em;
height: .5em;
align-self: center;
flex: none;
border-color: inherit;
border-width: 2.5px
}
.SprdMain .sprd-mobilefilter__header-close {
display: flex;
width: 100%;
justify-content: flex-end
}
.SprdMain .sprd-mobilefilter__scroll {
margin: 20px 20px 8em
}
.SprdMain .sprd-mobilefilter__footer {
width: 100%;
position: fixed;
bottom: 0;
box-shadow: 0 -2px 5px rgba(0, 0, 0, .12), 0 -1px 2px rgba(0, 0, 0, .16)
}
.SprdMain .sprd-mobilefilter__close-btn {
position: relative;
margin: 1.25em 1em;
width: calc(100% - 2em);
min-height: 2.75em;
text-decoration: none;
display: flex;
justify-content: center
}
.SprdMain .sprd-mobilefilter-section {
line-height: 2em;
border-bottom-width: 1px;
border-bottom-style: solid
}
.SprdMain .sprd-mobilefilter-section__toggle {
height: 1.5em;
width: 1.5em;
margin-left: .5em
}
.SprdMain .sprd-mobilefilter-section__title {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1em 0;
font: inherit;
text-align: left;
background: none;
border: 0
}
.SprdMain .sprd-mobilefilter-section__title:focus {
outline: none
}
.SprdMain .sprd-mobilefilter-section__label {
flex: 1;
font-weight: 700;
width: 100%;
font-size: 1em;
margin: 0
}
.SprdMain .sprd-mobilefilter-section__subtitle {
font-size: .857em;
margin-left: .5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.SprdMain .sprd-mobilefilter-section__filters {
padding-bottom: 1em
}
.SprdMain .sprd-mobilefilter-section__level1 {
margin: 0;
min-height: 2.2em
}
.SprdMain .sprd-mobilefilter-section__level2 {
margin: 0 1em;
min-height: 2.2em
}
.SprdMain .sprd-mobilefilter-section__level2:first-child {
margin-top: .25em
}
.SprdMain .sprd-mobilefilter-section__level2:last-child {
margin-bottom: .25em
}
.SprdMain .sprd-mobilefilter-section .sprd-single-color-circle {
width: 48px;
height: 48px
}
.SprdMain .sprd-product-list {
flex: 1 1 1px;
display: flex;
min-height: 70vh;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
position: relative
}
@media screen and (max-width:767px) {
.SprdMain .sprd-product-list {
padding: 5px
}
}
.SprdMain .sprd-product-list__empty-shop {
margin: 5em 0 15em;
flex: 1;
text-align: center
}
@media (max-width:767px) {
.SprdMain .sprd-product-list__empty-shop {
font-size: .875em;
padding: 30px
}
}
.SprdMain .sprd-product-list__empty-shop a {
text-decoration: none
}
.SprdMain .sprd-product-list__empty-shop a:hover {
text-decoration: underline
}
.SprdMain .sprd-product-list__empty-shop svg {
width: 350px;
margin: .5em 0 2em
}
@media (max-width:767px) {
.SprdMain .sprd-product-list__empty-shop svg {
width: 250px
}
}
.SprdMain .sprd-product-list__no-search-result {
margin: 5em 0;
height: 20vh;
flex: 1;
text-align: center
}
.SprdMain .sprd-product-list--loading .sprd-product-list-item {
pointer-events: none;
opacity: 0
}
.SprdMain .sprd-product-list--loading .sprd-product-list__spinner {
opacity: 1
}
.SprdMain .sprd-product-list__spinner {
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 100%;
transition: opacity .35s ease-in-out;
transition-delay: .5s
}
.SprdMain .sprd-product-list-item {
margin: 0 10px 20px;
padding: 10px;
border: 1px solid transparent;
box-sizing: border-box;
transition: border, box-shadow .2s ease-out, opacity .25s ease-in-out .35s
}
@media screen and (max-width:349px) {
.SprdMain .sprd-product-list-item {
width: 100%
}
}
@media screen and (min-width:350px) {
.SprdMain .sprd-product-list-item {
width: calc(50% - 10px)
}
}
@media screen and (max-width:767px) {
.SprdMain .sprd-product-list-item {
margin: 0 5px 20px;
padding: 5px
}
}
@media screen and (min-width:768px) {
.SprdMain .sprd-product-list-item {
width: calc(33% - 20px)
}
}
@media screen and (min-width:1200px) {
.sprd-product-list--4cols .sprd-product-list-item {
width: calc(25% - 20px)
}
}
.SprdMain .sprd-product-list-item__hoverarea {
width: 100%;
position: relative
}
.SprdMain .sprd-product-list-item--hover {
box-shadow: 3px 3px 8px rgba(0, 0, 0, .12), 0 1px 4px rgba(0, 0, 0, .16);
transition: .1s ease-in
}
.SprdMain .sprd-product-list-item--hover .sprd-product-list-item__sizes {
opacity: 1
}
.SprdMain .sprd-product-list-item--stockout {
pointer-events: none;
position: relative
}
.SprdMain .sprd-product-list-item--stockout .sprd-product-list-item__image,
.SprdMain .sprd-product-list-item--stockout .sprd-product-list-item__price,
.SprdMain .sprd-product-list-item--stockout .sprd-product-list-item__title {
opacity: .5
}
.SprdMain .sprd-product-list-item--stockout .sprd-appearance-list__appearance {
pointer-events: all
}
.SprdMain .sprd-product-list-item__link {
display: block;
width: 100%;
text-decoration: none;
color: inherit;
margin-bottom: .25em
}
.SprdMain .sprd-product-list-item__image {
display: flex;
width: 100%;
overflow: hidden
}
.SprdMain .sprd-product-list-item__image img {
width: 100%;
height: 100%
}
.SprdMain .sprd-product-list-item__image:before {
content: "";
display: table;
padding-top: 100%
}
.SprdMain .sprd-product-list-item__new-badge {
position: absolute;
top: 0;
left: 0;
padding: .5em .7em;
font-size: .857em;
font-weight: 700
}
.SprdMain .sprd-product-list-item__sizes {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-weight: 400;
font-size: .857em;
list-style: none;
width: 100%;
padding: 0;
margin: .25em 0;
opacity: 0;
transition: opacity .25s ease-in-out
}
@media screen and (max-width:767px) {
.SprdMain .sprd-product-list-item__sizes {
display: none
}
}
@media (hover:none) {
.SprdMain .sprd-product-list-item__sizes {
display: none
}
}
.SprdMain .sprd-product-list-item__size {
margin: 0 .4em;
white-space: nowrap
}
.SprdMain .sprd-product-list-item__size:focus {
outline: none
}
.SprdMain .sprd-product-list-item__size--stockout {
text-decoration: line-through
}
.SprdMain .sprd-product-list-item__title {
margin: .25em 0;
text-align: center;
flex: 1 0 auto;
line-height: 1.428em;
text-overflow: ellipsis;
overflow: hidden;
width: 100%
}
.SprdMain .sprd-product-list-item__stockout {
padding: .5em;
margin: 1em;
font-weight: 700;
text-align: center;
color: #e2122f;
background-color: #f9bac3
}
.SprdMain .sprd-product-list-item__stockout--current-appearance {
position: absolute;
bottom: 0;
right: 1em;
left: 1em;
margin: 0
}
.SprdMain .sprd-product-list-item__num-products {
opacity: .4;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
text-align: center;
margin: .5em 0 0
}
.SprdMain .sprd-product-list-item__price {
font-weight: 700;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
text-align: center;
margin: .25em 0
}
.SprdMain .sprd-pagination {
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 60px 15px 80px;
justify-content: center
}
@media screen and (max-width:500px) {
.SprdMain .sprd-pagination {
justify-content: space-evenly
}
}
.SprdMain .sprd-pagination--hidden {
opacity: 0;
pointer-events: none;
cursor: pointer
}
.SprdMain .sprd-pagination--firstlastpage {
display: none
}
@media screen and (max-width:767px) {
.SprdMain .sprd-pagination--firstlastpage {
display: inline
}
}
.SprdMain .sprd-pagination__pages {
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content: center
}
@media screen and (max-width:767px) {
.SprdMain .sprd-pagination__pages {
display: none
}
}
.SprdMain .sprd-pagination__left-button {
width: 40px;
height: 40px;
border-width: 1px;
border-style: solid;
border-radius: 50%;
line-height: 40px;
text-align: center;
vertical-align: middle;
text-decoration: none;
align-content: flex-start;
margin: 0 5px
}
.SprdMain .sprd-pagination__left-button svg {
margin-top: 7px;
height: 26px;
width: 26px
}
.SprdMain .sprd-pagination__right-button {
width: 40px;
height: 40px;
border-width: 1px;
border-style: solid;
border-radius: 50%;
line-height: 40px;
text-align: center;
vertical-align: middle;
text-decoration: none;
align-content: flex-end;
margin: 0 5px
}
.SprdMain .sprd-pagination__right-button svg {
margin-top: 7px;
height: 26px;
width: 26px
}
.SprdMain .sprd-pagination__page {
width: 40px;
height: 40px;
border-width: 1px;
border-style: solid;
border-radius: 50%;
line-height: 40px;
text-align: center;
vertical-align: middle;
text-decoration: none;
margin: 0 5px
}
.SprdMain .sprd-pagination__page svg {
margin-top: 7px;
height: 26px;
width: 26px
}
.SprdMain .sprd-pagination__page--dots {
border-color: transparent
}
.SprdMain .sprd-pagination__page--dots svg {
width: 16px
}
.SprdMain .sprd-pagination__page--current {
font-weight: 700
}
.SprdMain .sprd-pagination__page-counter {
display: none;
line-height: 40px;
text-align: center;
vertical-align: middle;
flex: 1
}
@media screen and (max-width:767px) {
.SprdMain .sprd-pagination__page-counter {
display: inline
}
}
@media screen and (max-width:500px) {
.SprdMain .sprd-pagination__page-counter {
display: inline;
width: 100%;
order: -2;
flex: auto;
margin-bottom: .75em
}
}
.SprdMain .sprd-detail-page {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
min-height: 70vh;
margin: 20px 32px 0;
padding-bottom: 4em;
font-size: .875em
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-page {
margin: 10px 16px 0
}
}
.SprdMain .sprd-detail-block {
display: flex;
margin-top: 1em;
width: 100%;
flex-direction: row
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-block {
flex-direction: column;
margin-top: .5em
}
}
.SprdMain .sprd-detail-block__images {
position: relative;
width: 60%
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-block__images {
width: 100%
}
}
.SprdMain .sprd-detail-block__detail-info {
width: 40%
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-block__detail-info {
width: 100%
}
}
.SprdMain .sprd-detail-block__spinner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: opacity .35s ease-in-out;
transition-delay: .5s
}
.SprdMain .sprd-detail-info {
display: flex;
flex-direction: column;
max-width: 32em;
padding: 0 1em;
box-sizing: border-box
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-info {
max-width: none;
padding: 0
}
}
.SprdMain .sprd-detail-info__heading {
word-wrap: break-word;
margin-bottom: 0
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-info__heading {
display: none
}
}
.SprdMain .sprd-detail-info__subheading {
display: flex;
width: 100%;
font-size: 1em;
font-weight: 400;
padding: 0 0 .857em;
margin-top: 4px;
border-bottom: 1px solid #999
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-info__subheading {
display: none
}
}
.SprdMain .sprd-detail-info__subheading-title {
margin-right: 2em
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-info__subheading-title {
font-size: .875em
}
}
.SprdMain .sprd-detail-info__subheading-reviews {
display: flex;
align-items: center;
height: 1em;
cursor: pointer
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-info__subheading-reviews {
font-size: .875em
}
}
.SprdMain .sprd-detail-info__subheading-reviews svg {
height: 1.2em;
width: 1.2em
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-info__subheading-reviews svg {
height: 1em;
width: 1em
}
}
.SprdMain .sprd-detail-info__appearances {
display: flex;
margin: 1em 0 0;
font-size: 1.5em;
position: relative
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-info__appearances {
margin-top: .75em
}
}
.SprdMain .sprd-detail-info__text {
margin: 1em 0 0;
line-height: 1.5em
}
.SprdMain .sprd-detail-info__text p:first-child {
margin: 0
}
.SprdMain .sprd-detail-info__further-details {
display: flex;
justify-content: center;
margin: 1em 0 0
}
.SprdMain .sprd-detail-info__further-details-btn {
cursor: pointer;
border-width: 1px;
border-style: solid;
padding: 1em;
line-height: 1em;
background-color: transparent;
font-size: 1em;
font-family: inherit
}
.SprdMain .sprd-detail-info__further-details-btn:focus {
outline: none
}
.SprdMain .sprd-detail-info__stockout {
margin: .5em 0 0;
font-size: 1.25em;
padding: 1em;
bottom: 100%;
position: relative
}
.SprdMain .sprd-detail-info__stockout:before {
content: "";
position: absolute;
transform: rotate(45deg);
width: 1em;
height: 1em;
top: -.5em;
left: 1em;
background-color: inherit
}
.SprdMain .sprd-detail-mobile-caption {
display: none
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-mobile-caption {
display: block
}
}
.SprdMain .sprd-detail-mobile-caption__heading {
word-wrap: break-word;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.SprdMain .sprd-detail-mobile-caption__subheading {
width: 100%;
font-size: 1em;
font-weight: 400;
padding: 0 0 .857em;
margin-top: 4px
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-mobile-caption__subheading {
display: flex;
margin-bottom: 0;
justify-content: space-between;
padding: 0 0 .429em
}
}
.SprdMain .sprd-detail-images {
display: flex;
padding: 0 1em;
box-sizing: border-box
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-images {
padding: 0
}
}
.SprdMain .sprd-detail-images__large-images {
width: 100%;
max-width: 700px;
height: 100%;
margin: 0 auto
}
.SprdMain .sprd-detail-images__large-images .sprd-slider__content {
align-items: center
}
.SprdMain .sprd-detail-images__new-badge {
position: absolute;
top: 0;
left: 0;
padding: .5em .7em;
font-weight: 700
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-images__new-badge {
font-size: .857em
}
}
.SprdMain .sprd-detail-images__large-image {
display: flex;
width: 100%;
overflow: hidden;
position: relative
}
.SprdMain .sprd-detail-images__large-image:before {
content: "";
display: table;
padding-top: 100%
}
.SprdMain .sprd-detail-images__large-image img {
width: 100%;
height: 100%
}
.SprdMain .sprd-detail-images__views {
display: flex;
margin-top: 1em;
justify-content: center;
align-items: center;
flex: 1 0 100%
}
.SprdMain .sprd-detail-images__view {
display: flex;
border: 1px solid;
box-sizing: border-box;
flex: 0 1 15%;
max-width: 80px;
padding: 3px;
margin: 0 6px 0 0;
transition: border .3s ease-in-out;
overflow: hidden
}
.SprdMain .sprd-detail-images__view img {
cursor: pointer;
width: 100%;
height: 100%
}
.SprdMain .sprd-detail-images__view:hover {
box-shadow: inset 0 0 0 1px
}
.SprdMain .sprd-detail-images__view:before {
content: "";
display: table;
padding-top: 100%
}
.SprdMain .sprd-design-edit-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%
}
.SprdMain .sprd-design-edit-tile:after,
.SprdMain .sprd-design-edit-tile:before {
box-sizing: inherit
}
.SprdMain .sprd-design-edit-tile__caption {
font-size: 1.571em
}
.SprdMain .sprd-design-edit-tile__preview {
display: flex;
border: 1px solid;
box-sizing: border-box;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 80px;
cursor: pointer;
padding: .25em;
margin: 0 6px 0 0;
transition: border .3s ease-in-out
}
.SprdMain .sprd-design-edit-tile__preview:hover {
box-shadow: inset 0 0 0 1px
}
.SprdMain .sprd-design-edit-tile__preview svg {
width: 28px;
height: 28px
}
.SprdMain .sprd-design-edit-tile__header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 1em
}
@media screen and (max-width:767px) {
.SprdMain .sprd-design-edit-tile__header span {
font-size: .875em
}
}
.SprdMain .sprd-design-edit-tile__header h2 {
margin-bottom: .5em;
margin-top: 0
}
@media screen and (max-width:767px) {
.SprdMain .sprd-design-edit-tile__header h2 {
font-size: 1.125em
}
}
.SprdMain .sprd-design-edit-tile__header h3 {
margin-top: 0
}
.SprdMain .sprd-design-edit-tile__image {
display: flex;
flex-grow: 1;
position: relative;
width: 50%;
height: 50%
}
.SprdMain .sprd-design-edit-tile__image img {
opacity: .25;
width: 100%;
height: 100%;
margin: 1em auto;
object-fit: contain
}
.SprdMain .sprd-design-edit-tile__image svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
cursor: pointer
}
.SprdMain .sprd-design-edit-tile__button {
width: 60%;
margin-bottom: 2em;
line-height: 1em;
padding: 1em;
font-weight: 700
}
@media screen and (max-width:767px) {
.SprdMain .sprd-design-edit-tile__button {
width: auto;
margin-bottom: 0;
padding: .75em
}
}
.SprdMain .sprd-detail-price {
font-size: 2em;
font-weight: 700;
display: flex;
flex-direction: column;
align-items: center;
margin: .2em 0 0
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-price {
font-size: 1.715em
}
}
.SprdMain .sprd-detail-price__tax {
font-size: .5em;
font-weight: 400
}
.SprdMain .sprd-detail-price a {
height: 100%
}
.SprdMain .sprd-detail-sizes {
margin: 1em 0 0;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
position: relative
}
.SprdMain .sprd-detail-sizes--stockout {
pointer-events: none;
opacity: .25
}
.SprdMain .sprd-detail-sizes__size {
font-size: 1.15em
}
@media screen and (min-width:768px) {
.SprdMain .sprd-detail-sizes__size {
min-width: 4em
}
}
.SprdMain .sprd-detail-sizes__size--stockout {
pointer-events: none;
opacity: .25
}
.SprdMain .sprd-detail-sizes__hint {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: .25em
}
.SprdMain .sprd-detail-sizes__hint__ruler {
width: 1.5em;
height: 1.5em;
margin-right: .5em
}
.SprdMain .sprd-detail-sizes__hint__size_table_btn {
font-size: 1em;
font-family: inherit;
margin: 0 1em;
overflow: visible;
width: auto;
padding: 0;
background: none;
border: 0;
cursor: pointer
}
.SprdMain .sprd-detail-sizes__hint__size_reference_link,
.SprdMain .sprd-detail-sizes__hint__size_table_btn {
color: inherit;
font-weight: 700;
text-decoration: underline
}
.SprdMain .sprd-detail-sizes__cta {
font-size: 1.143em;
padding: .75em;
position: absolute;
bottom: calc(100% + 4px);
left: 0
}
.SprdMain .sprd-detail-sizes__cta:before {
content: "";
position: absolute;
transform: rotate(45deg);
width: 1em;
height: 1em;
bottom: -.5em;
left: 1em;
background-color: inherit
}
.SprdMain .sprd-detail-cta {
margin: 1.5em 0 0;
display: flex;
align-items: stretch
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-cta {
margin-top: .5em
}
}
.SprdMain .sprd-detail-cta--stockout {
pointer-events: none;
opacity: .25
}
.SprdMain .sprd-detail-cta__button {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 3.2em;
font-size: 1.14em;
transition: background-color .25s ease-in-out
}
.SprdMain .sprd-detail-cta__button__spinner {
width: 1em;
height: 1em;
border-width: 4px;
border-color: #fff
}
.SprdMain .sprd-detail-cta__cart_icon {
overflow: initial;
margin: .25em .5em 0 0
}
.SprdMain .sprd-detail-suggestions {
margin: 2em 0 0;
width: 100%
}
.SprdMain .sprd-detail-suggestions__caption {
font-size: 1.571em
}
.SprdMain .sprd-detail-suggestions__image {
display: flex;
width: 100%;
max-width: 150px;
max-height: 150px;
position: relative;
overflow: hidden
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-suggestions__image {
max-height: 100px;
max-width: 100px
}
}
.SprdMain .sprd-detail-suggestions__image:before {
content: "";
display: table;
padding-top: 100%
}
.SprdMain .sprd-detail-suggestions__image img {
width: 100%;
height: 100%
}
.SprdMain .sprd-detail-suggestions__name {
text-align: center;
padding: .5em;
width: 150px;
overflow: hidden;
text-overflow: ellipsis
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-suggestions__name {
width: 100px
}
}
.SprdMain .sprd-detail-suggestions__price {
display: flex;
justify-content: center;
width: 100%
}
.SprdMain .sprd-detail-suggestions__loading-spinner {
margin: 5.75em auto
}
.SprdMain .sprd-detail-suggestions--loading {
pointer-events: none
}
.SprdMain .sprd-detail-suggestions--loading .sprd-slider {
opacity: .25
}
.SprdMain .sprd-detail-product-type {
margin: 2em 0 0;
line-height: 1.5em;
width: 100%
}
.SprdMain .sprd-detail-product-type__heading {
font-size: 1.571em;
margin: 1em 0
}
.SprdMain .sprd-detail-product-type__sub-heading {
font-size: 1.125em;
margin: 0 0 .83em;
font-weight: 700
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-product-type__sub-heading {
font-weight: 400;
font-size: 1.2em;
margin: 0
}
}
.SprdMain .sprd-detail-product-type__container {
display: flex
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-product-type__container {
flex-direction: column
}
}
.SprdMain .sprd-detail-product-type__sub-container {
display: none;
padding-bottom: .5em
}
.SprdMain .sprd-detail-product-type__sub-container ul.listMCE li {
margin: 0 0 .5em
}
.SprdMain .sprd-detail-product-type__sub-container ul.listMCE li:last-child {
margin: 0
}
.SprdMain .sprd-detail-product-type__column {
display: flex;
flex-direction: column;
flex: 1;
font-size: 1.15em;
border-bottom: 1px solid #999
}
.SprdMain .sprd-detail-product-type__column__toggle {
display: flex;
justify-content: space-between;
width: 100%;
padding: .8em 0;
font: inherit;
color: inherit;
background: none;
border: 0
}
.SprdMain .sprd-detail-product-type__column__toggle:focus {
outline: none
}
.SprdMain .sprd-detail-product-type__column__toggle__icon {
width: 1em;
height: 1em
}
.SprdMain .sprd-detail-product-type__column__narrow p {
margin: 0
}
.SprdMain .sprd-detail-product-type__column:first-child {
border-top: 1px solid #999
}
.SprdMain .sprd-detail-product-type__column--expanded .sprd-detail-product-type__column__toggle {
font-weight: 700
}
.SprdMain .sprd-detail-product-type__column--expanded .sprd-detail-product-type__column__toggle__icon {
transform: rotate(180deg)
}
.SprdMain .sprd-detail-product-type__column--expanded .sprd-detail-product-type__sub-container {
display: block
}
.SprdMain .sprd-detail-product-type__size-guide {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
margin: 1em 0
}
.SprdMain .sprd-detail-product-type__size-image {
max-width: 100%;
width: 190px;
height: 190px
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-product-type__size-image {
display: flex;
width: 100%;
margin-bottom: 1em;
justify-content: center
}
}
@media screen and (min-width:768px) {
.SprdMain .sprd-detail-product-type__size-image {
margin-right: 2em
}
}
.SprdMain .sprd-detail-product-type__model-images {
display: flex;
flex-wrap: wrap;
margin: 1em 0 0
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-product-type__model-images {
justify-content: center
}
}
.SprdMain .sprd-detail-product-type__model-image {
width: 138px;
height: 148px;
overflow: hidden;
margin: 0 .5em .5em 0;
border-width: 1px;
border-style: solid
}
.SprdMain .sprd-detail-product-type__model-image img {
margin-top: -1px;
width: 560px;
height: 150px
}
.SprdMain .sprd-detail-product-type__product-view-images {
flex-wrap: wrap;
display: flex
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-product-type__product-view-images {
display: none
}
}
.SprdMain .sprd-detail-product-type__product-view-images--expanded {
display: flex
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-product-type__product-view-images--expanded {
margin: 1em 0 0
}
}
.SprdMain .sprd-detail-product-type__product-view-image {
padding: 5px;
box-sizing: border-box;
width: 50%
}
@media screen and (min-width:510px) {
.SprdMain .sprd-detail-product-type__product-view-image {
width: 33.33333%
}
}
@media screen and (min-width:768px) {
.SprdMain .sprd-detail-product-type__product-view-image {
width: 25%
}
}
@media screen and (min-width:1000px) {
.SprdMain .sprd-detail-product-type__product-view-image {
width: 16.66667%
}
}
.SprdMain .sprd-detail-product-type__product-view-image img {
width: 100%;
height: 100%
}
.SprdMain .sprd-detail-product-type__size-table {
flex: 1;
display: flex;
flex-direction: column
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-product-type__size-table {
width: 100%;
margin: 0
}
}
.SprdMain .sprd-detail-product-type__size-table-head {
display: flex;
font-weight: 700;
margin-bottom: .5em;
padding: 0 .25em
}
.SprdMain .sprd-detail-product-type__size-table-head :not(:first-child) {
text-align: center
}
.SprdMain .sprd-detail-product-type__size-table-body {
display: flex;
flex-direction: column
}
.SprdMain .sprd-detail-product-type__size-table-cell {
flex: 1
}
.SprdMain .sprd-detail-product-type__size-table-row {
display: flex;
margin-bottom: .5em;
border-width: 2px;
border-style: solid;
padding: 0 .25em;
cursor: pointer
}
.SprdMain .sprd-detail-product-type__size-table-row :not(:first-child) {
text-align: center
}
.SprdMain .sprd-detail-product-type__size-table-row--stockout {
pointer-events: none;
opacity: .25
}
@media screen and (min-width:768px) {
.SprdMain .sprd-detail-product-type__column {
border-bottom: 0
}
.SprdMain .sprd-detail-product-type__column:first-child {
border-top: 0
}
.SprdMain .sprd-detail-product-type__column__narrow {
width: 50%;
margin-left: 2em
}
.SprdMain .sprd-detail-product-type__column__narrow:first-child {
margin-left: 0
}
.SprdMain .sprd-detail-product-type__column__wide {
width: 100%;
margin-top: 1em
}
.SprdMain .sprd-detail-product-type__column__toggle {
padding: 0
}
.SprdMain .sprd-detail-product-type__column__toggle__icon {
display: none
}
.SprdMain .sprd-detail-product-type__sub-container {
display: block
}
}
.SprdMain .sprd-detail-social {
margin: 2em 0 0 1em;
width: calc(50% - 1em)
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-social {
width: 100%;
margin: 2em 0 0
}
}
.SprdMain .sprd-detail-social__caption {
font-size: 1.571em
}
.SprdMain .sprd-detail-social__bar {
display: flex;
flex-wrap: wrap
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-social__bar {
justify-content: space-between
}
}
.SprdMain .sprd-detail-social__share-btn {
border: none;
padding: 0;
width: auto;
overflow: visible;
background: transparent;
cursor: pointer;
margin: 0 2em 1em 0
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-social__share-btn {
margin: 0
}
}
.SprdMain .sprd-detail-social__share-btn:focus {
outline: none
}
.SprdMain .sprd-detail-social__share-btn svg {
cursor: pointer;
width: 35px;
height: 35px
}
.SprdMain .sprd-detail-design-details {
margin: 2em 1em 0 0;
width: calc(50% - 1em)
}
@media screen and (max-width:767px) {
.SprdMain .sprd-detail-design-details {
width: 100%;
margin: 1em 0 0
}
}
.SprdMain .sprd-detail-design-details__caption {
font-size: 1.571em
}
.SprdMain .sprd-detail-design-details__row {
display: flex;
flex-wrap: wrap
}
.SprdMain .sprd-detail-design-details__img {
padding-right: 2em;
width: 150px;
height: 150px
}
.SprdMain .sprd-detail-design-details__text {
flex: 1;
line-height: 1.5em;
max-width: 100%
}
.SprdMain .sprd-detail-design-details__text p {
overflow: hidden
}
.SprdMain .sprd-detail-design-details__text h3 {
margin-top: 0
}
.SprdMain #sprd-designer-container {
min-height: 700px;
max-height: 1000px;
height: calc(100vh - 100px)
}
@media screen and (max-width:767px) {
.SprdMain #sprd-designer-container {
min-height: 0;
height: 100vh
}
}
@media screen and (max-width:999px) and (min-width:768px) {
.SprdMain #sprd-designer-container {
height: 720px
}
}
.SprdMain .sprd-designer-page {
font-size: .875em
}
.SprdMain .sprd-designer-page .sprd-breadcrumb {
padding: 20px
}
.SprdMain .sprd-designer-page__detailwrapper {
margin: 20px 32px 0;
padding-bottom: 4em;
position: relative
}
.SprdMain .sprd-designer-page__product-type-info-visible {
position: absolute;
top: 200px
}
.SprdMain .sprd-designer-page .sprd-detail-product-type__size-table-row {
cursor: auto
}
.SprdMain .sprd-collections {
font-size: .875em;
margin: 20px 20px 0
}
@media screen and (max-width:767px) {
.SprdMain .sprd-collections {
margin: 10px 10px 0
}
}
.SprdMain .sprd-collections h2 {
text-align: center
}
.SprdMain .sprd-collections__preview {
margin-bottom: 4em
}
.SprdMain .sprd-collections__preview-desc {
display: flex;
justify-content: center
}
.SprdMain .sprd-collections__preview-desc span {
width: 60%;
text-align: center;
margin-bottom: 1em;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5em
}
@media screen and (max-width:767px) {
.SprdMain .sprd-collections__preview-desc span {
width: 90%
}
}
.SprdMain .sprd-collections__design-row {
display: flex;
flex-wrap: wrap;
justify-content: center
}
.SprdMain .sprd-collections__more {
color: inherit;
text-decoration: none;
font-weight: 700;
margin: .6em 1em
}
.SprdMain .sprd-collections__more-stuff-row {
display: flex;
justify-content: center
}
.SprdMain .sprd-collections__more-stuff-btn {
transition: background-color .25s ease-in-out;
text-decoration: none;
line-height: 1.5em
}
.SprdMain .sprd-collections__further {
margin-top: 5.5em;
margin-bottom: 5.5em
}
.SprdMain .sprd-collections__further-links {
display: flex;
justify-content: center;
margin-left: auto;
margin-right: auto;
flex-wrap: wrap;
line-height: 1.75em
}
@media screen and (min-width:768px) {
.SprdMain .sprd-collections__further-links {
width: 70%
}
}
.SprdMain .sprd-collections__further-links>div {
padding-right: 1em
}
.sprd-activation-banner {
display: flex;
align-items: center;
background-color: #00b2a5;
color: #fff;
justify-content: center
}
.sprd-activation-banner__container {
max-width: 1400px;
width: 100%;
display: flex;
align-items: center;
padding: 0 2em;
box-sizing: border-box
}
.sprd-activation-banner__text {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center
}
.sprd-activation-banner__headline {
margin-bottom: 0
}
.sprd-activation-banner__description {
margin-top: 0
}
.sprd-activation-banner__button {
border: 1px solid #fff;
padding: .5em 1em;
display: flex;
align-items: center;
border-radius: .2em;
text-decoration: none;
color: inherit;
font-weight: 700
}
.sprd-activation-banner__icon {
fill: #fff;
width: 1.6em;
height: 1.6em;
margin-right: .4em
}
.sprd-language-overlay__button {
display: flex !important;
align-items: center;
justify-content: center
}
.sprd-language-overlay__flag {
width: 3em;
height: 2em;
margin-right: 1em
}
.sprd-language-switch {
position: relative
}
.sprd-language-switch__toggle {
display: flex;
align-items: center;
padding: 0;
color: inherit;
font-family: inherit;
font-size: 1em;
line-height: inherit;
background: none;
border: none;
cursor: pointer
}
.sprd-language-switch__toggle:focus {
outline: none
}
.sprd-language-switch__icon {
margin-right: .4em;
width: 1.43em;
height: 1.43em
}
.sprd-language-switch__caret {
width: 1em;
height: 1em;
margin-left: .29em
}
.sprd-language-switch--open .sprd-language-switch__caret {
transform: rotate(180deg)
}
.sprd-language-switch__dropup {
display: none;
z-index: 5;
padding: 2.29em;
position: absolute;
left: 0;
bottom: 100%;
font-size: .875em;
border-width: 1px;
border-style: solid;
box-shadow: 3px 3px 7px rgba(0, 0, 0, .2)
}
@media screen and (max-width:999px) {
.sprd-language-switch__dropup {
border: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px 20px;
overflow: scroll
}
}
.sprd-language-switch__dropup h2 {
padding: 0 .76em
}
.sprd-language-switch__close {
width: 4em;
height: 4em;
position: absolute;
top: 0;
right: 0;
background: none;
border: 0;
font-size: 1em;
cursor: pointer
}
.sprd-language-switch__close:focus {
outline: none
}
.sprd-language-switch__close-icon {
width: 1.36em;
height: 1.36em
}
.sprd-language-switch--open .sprd-language-switch__dropup {
display: block
}
.sprd-language-switch__languages {
display: flex
}
@media screen and (max-width:600px) {
.sprd-language-switch__languages {
flex-direction: column
}
}
.sprd-language-switch__row {
display: flex
}
@media screen and (max-width:600px) {
.sprd-language-switch__row {
flex-direction: column
}
}
.sprd-language-switch__column {
display: flex;
flex-direction: column;
padding: 0 1.14em
}
@media screen and (max-width:600px) {
.sprd-language-switch__column {
padding: 0
}
}
.sprd-language-switch__column:first-child {
padding-left: 0
}
.sprd-language-switch__group {
display: flex;
flex-direction: column;
padding: 0 1.14em
}
.sprd-language-switch__group--na {
order: -1
}
.sprd-language-switch__caption {
margin: 1em 0;
font-size: 1.143em
}
.sprd-language-switch__link {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: .75em 0;
white-space: nowrap;
color: inherit;
text-decoration: none
}
.sprd-language-switch__link:hover {
text-decoration: underline
}
@media screen and (max-width:999px) {
.sprd-language-switch__link {
padding: .4em 0
}
}
.sprd-language-switch__link svg {
height: 1em;
width: 1.5em;
margin-right: .57em
}
.sprd-info-footer__link {
display: block;
color: inherit;
font-size: .875em;
text-decoration: none
}
.sprd-info-footer__link:hover {
text-decoration: underline
}
.sprd-info-footer__contact-col {
flex-direction: column;
align-items: center
}
.sprd-info-footer__open-shop {
display: flex;
align-items: center;
justify-content: center;
padding: 2em;
color: inherit;
font-weight: 700;
text-decoration: none
}
.sprd-info-footer__open-shop:hover {
text-decoration: underline
}
.sprd-info-footer__open-shop-icon {
width: 1.5em;
height: 1.5em;
margin-right: .5em
}
.sprd-info-footer__times {
display: block;
font-size: .875em
}
@media screen and (min-width:768px) {
.sprd-info-footer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-right: 0;
padding-left: 0
}
.sprd-info-footer__link {
font-size: 1em
}
}
.sprd-trusted-footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1em 3em
}
.sprd-trusted-footer__logo {
width: 1.5em;
height: 1.5em;
margin-bottom: 1em
}
.sprd-trusted-footer__logo>svg {
height: 100%;
width: 100%
}
.sprd-trusted-footer__message {
font-weight: 700;
text-align: center;
display: flex
}
.sprd-trusted-footer__satisfaction {
text-align: center
}
.sprd-service-footer,
.sprd-trusted-footer__satisfaction {
display: flex;
padding: .5em;
flex-wrap: wrap;
justify-content: center
}
.sprd-service-footer {
align-items: center
}
.sprd-footer-box {
flex: 1 1 auto;
padding: .5em
}
.sprd-footer-box__icons {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%
}
.sprd-footer-box__link {
padding: 0 .5em;
text-align: center
}
.sprd-footer-box__icon {
margin: .5em
}
.sprd-footer-box--shipping .sprd-footer-box__icon>svg {
height: 2em;
max-width: 5em
}
.sprd-footer-box--payment .sprd-footer-box__icon>svg {
height: 1.375em;
max-width: 3.5em
}
.sprd-footer-box--reviews {
display: flex;
justify-content: center
}
.sprd-tracking-menu {
flex: 1 1 50%;
position: relative
}
.sprd-tracking-menu__toggle {
display: flex;
align-items: center;
font-family: inherit;
font-size: .875em;
line-height: inherit;
background: none;
border: none;
outline: none;
cursor: pointer
}
.sprd-tracking-menu__caret {
width: 1em;
height: 1em;
margin-left: .29em
}
.sprd-tracking-menu--open .sprd-tracking-menu__caret {
transform: rotate(180deg)
}
.sprd-tracking-menu__dropup {
z-index: 5;
min-width: 25em;
bottom: 100%;
left: 0;
position: absolute;
display: none;
cursor: default;
border-width: 1px;
border-style: solid;
box-shadow: 3px 3px 7px rgba(0, 0, 0, .2);
padding: 2em
}
@media screen and (max-width:740px) {
.sprd-tracking-menu__dropup {
border: 0;
position: fixed;
min-width: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: .5em 2em;
overflow: scroll
}
}
.sprd-tracking-menu__close {
position: absolute;
top: 1.42em;
right: 1.42em;
padding: 0;
background: none;
border: 0;
cursor: pointer
}
.sprd-tracking-menu__close-icon {
width: 1.42em;
height: 1.42em
}
.sprd-tracking-menu--open .sprd-tracking-menu__dropup {
display: flex;
flex-direction: column
}
.sprd-tracking-menu__text {
margin-bottom: 2em;
line-height: 1.5em
}
.sprd-tracking-menu__cta {
display: flex;
align-items: center;
align-self: center;
justify-self: center;
margin: 0;
padding: 0;
border: none;
width: auto;
overflow: visible;
background: transparent;
cursor: pointer;
font-size: 1.143em;
font-family: inherit;
font-weight: 600
}
.sprd-tracking-menu__cta svg {
cursor: pointer;
width: 1.5em;
height: 1.5em;
margin-right: .5em
}
@media screen and (min-width:768px) {
.sprd-tracking-menu__toggle {
font-size: 1em
}
}
.sprd-custom-footer {
overflow: hidden;
text-align: center;
max-width: 100%
}
.sprd-custom-footer img {
max-width: 100%
}
.sprd-footer {
width: 100%;
max-width: 1400px;
margin: 0 auto;
position: relative;
box-sizing: border-box
}
.sprd-footer * {
box-sizing: inherit
}
.sprd-overlay-visible {
overflow: hidden !important;
height: 100%;
width: 100%;
position: fixed
}
.sprd-tracking {
display: block;
height: 0;
width: 0;
visibility: hidden;
border: none
}
}
.SprdMain .sprd-department-filter__openmenu {
position: relative
}
.SprdMain .sprd-department-filter__openmenu .sprd-department-filter__menu {
display: none
}
.SprdMain .sprd-department-filter__menu {
position: absolute;
flex-direction: column;
min-width: 100%;
padding: 0;
margin-top: -1px;
top: calc(100% + 1px);
left: 0;
z-index: 11;
border-width: 1px;
border-style: solid;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, .15)
}
.SprdMain .sprd-department-filter__entry {
line-height: 2.4em;
padding: 0 .8em
}
@media screen and (min-width:1000px) {
.SprdMain .sprd-department-filter__openmenu:hover .sprd-department-filter__menu {
display: flex
}
}
.SprdMain .sprd-navigation {
border-top-width: 1px;
border-top-style: solid
}
.SprdMain .sprd-department-filter {
padding-left: .65em
}
.SprdMain .sprd-promo-expander {
color: var(--sprd-main3);
background: var(--sprd-sub2)
}
.SprdMain .sprd-info-footer {
padding: 1em 0 2em;
border-top-width: 1px;
border-top-style: solid
}
.SprdMain .sprd-info-footer__col {
display: flex;
flex-wrap: wrap
}
.SprdMain .sprd-info-footer__link {
flex: 1 0 50%;
padding: .5em 1em
}
.SprdMain .sprd-info-footer__times {
text-align: center
}
@media screen and (min-width:768px) {
.SprdMain .sprd-info-footer__col {
display: block;
flex: 0 1 auto
}
}
.SprdMain .sprd-startpage-teaser__plain-image {
max-height: 400px
}
.SprdMain .sprd-startpage-teaser__image--has-text {
opacity: .5;
filter: saturate(70%)
}
.SprdMain .sprd-startpage-teaser__content {
background: none
}
@media screen and (min-width:768px) {
.SprdMain .sprd-startpage-teaser__subcaption {
font-size: 1.375em
}
}
:root {
--sprd-main1: #fff;
--sprd-main2: #66cbc4;
--sprd-main3: #fff;
--sprd-sub2: #777;
--sprd-sub3: #444
}
.customPageBackground {
background-color: #fff;
color: #777
}
.SprdContent a {
color: #66cbc4
}
.SprdMain .sprd-overlay .sprd-Wrapper {
background-color: #fff;
color: #777
}
.SprdMain .sprd-Footer .sprd-LanguageSwitcher {
background-color: #fff;
border-color: #66cbc4;
color: #777
}
.SprdMain .sprd-Footer .sprd-LanguageSwitcher a:hover {
color: #66cbc4
}
.customFooter {
color: #444;
background-color: #fff
}
.customHighlight {
border-color: #66cbc4;
color: #66cbc4
}
.customLink {
cursor: pointer
}
.customLink:hover {
text-decoration: underline
}
.customFilterItem,
.customSubfilterItem {
color: #444
}
.customSubfilterItem:hover {
background-color: #66cbc4;
color: #fff
}
.SprdMain .customHeader .sprd-departmentFilter .sprd-menu.sprd-active .sprd-label,
.SprdMain .customHeader .sprd-departmentFilter .sprd-menu .sprd-item.sprd-active {
color: #66cbc4
}
.SprdMain .customHeader .sprd-departmentFilter .sprd-menu.sprd-open {
box-shadow: inset 0 -4px 0 0 #66cbc4
}
.SprdMain .customHeader .sprd-rightPanel .sprd-item.sprd-active,
.SprdMain .customHeader .sprd-rightPanel .sprd-item.sprd-open {
border-bottom-color: #66cbc4
}
.SprdMain .customHeader .customFilterItem.sprd-active {
color: #66cbc4;
box-shadow: inset 0 -3px 0 0 #66cbc4
}
.customButton {
background-color: #fff;
color: #FEFEFE
}
.customButton.sprd-default {
font-weight: 600;
background-color: #fff;
color: #777
}
.customButton.sprd-primary {
background-color: #66cbc4;
color: #fff;
border: 1px solid #53c5bd
}
.customButton.sprd-secondary {
background-color: #777;
color: #fff;
border-color: #777
}
.customFilter {
background-color: #fff
}
.sprd-bg-m1 {
background-color: #fff
}
.sprd-c-m1 {
color: #fff
}
.sprd-hc-m1:hover {
color: #fff
}
.sprd-bc-m1 {
border-color: #fff
}
.sprd-lbc-m1 {
border-color: #ccc
}
.sprd-bg-m2 {
background-color: #66cbc4
}
.sprd-c-m2 {
color: #66cbc4
}
.sprd-hc-m2:hover {
color: #66cbc4
}
.sprd-bc-m2 {
border-color: #66cbc4
}
.sprd-lbc-m2 {
border-color: #b3e5e2
}
.sprd-bg-m3 {
background-color: #fff
}
.sprd-c-m3 {
color: #fff
}
.sprd-hc-m3:hover {
color: #fff
}
.sprd-bc-m3 {
border-color: #fff
}
.sprd-lbc-m3 {
border-color: #ccc
}
.sprd-bg-s2 {
background-color: #777
}
.sprd-c-s2 {
color: #777
}
.sprd-hc-s2:hover {
color: #777
}
.sprd-bc-s2 {
border-color: #777
}
.sprd-lbc-s2 {
border-color: #bbb
}
.sprd-bg-s3 {
background-color: #444
}
.sprd-c-s3 {
color: #444
}
.sprd-hc-s3:hover {
color: #444
}
.sprd-bc-s3 {
border-color: #444
}
.sprd-lbc-s3 {
border-color: #a2a2a2
}
.sprd-f-s2 {
fill: #777
}
.sprd-lc-s2 {
color: #bbb
}
.sprd-lbg-s2 {
background-color: #ddd
}
.sprd-hbg-m2:hover {
background-color: #85d5d0
}
.sprd-btn-primary {
background-color: #66cbc4;
border: 1px solid #66cbc4;
color: #fff
}
.sprd-btn-primary:hover {
background-color: #85d5d0;
border-color: #85d5d0
}
.sprd-btn-secondary {
background-color: #fff;
border: 1px solid #777;
color: #777
}
.sprd-btn-secondary:hover {
border: 1px solid #66cbc4;
color: #66cbc4
}
.sprd-product-list-item--hover {
border-color: #777
}
@media screen and (max-width: 767px) {
.sprd-blurry-slider::after {
background-image: linear-gradient(to left, #fff, rgba(255, 255, 255, 0))
}
}
.SprdMain .sprd-img-spinner__spinner {
display:none;
}
.SprdMain .sprd-img-spinner__image--loading {
opacity: 1
}
jQuery($ => {
$.get("https://shop.spreadshirt.de/mommyshirt1", res => {
const doc = $(res);
const head = doc.find("header").html();
const body = doc.find(".sprd-listpage,.sprd-startpage").html();
const footer = doc.find("footer").html();
$("#mySprdHeader").html(replace(head));
$("#mySprdBody").html(replace(body));
$("#mySprdFooter").html(replace(footer));
});
});
function replace(t) {
return t.replace(/href\=\"\//g, 'href="https://shop.spreadshirt.de/');
}
Also see: Tab Triggers