/** 2019 (c) WE Fashion These styles are written for the WE Fashion website **/ /** INDEX 01.0 Global - imports - general - typography - icons - schedule elements - display/hide elements to customergroups - replace elements - viewport - image maps - ctas - responsive text - tabs - expandable banner - videos - scroll icon - buttons 02.0 Components - countdown variations - dynamic delivery time - cycle slideshow - swiper - popup - hotspots - hotspot urls - stickers - category labels - page message - banner bar - riverty/klarna bannerrow - delayed holiday delivery bannerrow - pressurebar - thuiswinkelWaarborg logo - BeCommerce logo - shoppingAwards logo - betterCotton logo - delayed holiday delivery - radio tabs - image range slider - product range slider - product range guide - push message - sizechart - magazine - progress ring - notificare - read more - widget social media - spawn messages - zoom thumbnail - abandoned cart popup - timed popup - gift generator - questionnaire - vip shopping - brands overview - user generated content - products grid - title based on filters - maintenance overlay - generate qr code - trigger redirect - in stock attribute - txt banner 03.0 Navigation 03.1 General - country selector 03.2 Header - meganav - meganav coupons - meganav USPs 03.3 LHN - category tags 03.4 Footer - light optin - livechat bar - subscription popup 04.0 Homepage - general - USPs - grid (2020) - faq button for visitors in app - shopping awards 05.0 Main pages - grid (2018) - brands we loves - main USPs - main sale fixes 06.0 Product list page (categories) - general - brands we loves - grid (2019) - groupfilter buttons - inclose content - category page components - triptychs - USPs - USPs Product Heroes - Coming Soon Product Heroes - Listing banner - hero products - display available content slots in template - fitguide (2019) - stills carousel - wedding stills carousel - brands carousel - product carousel - product carousel tweaks - product collage - ugc highlight - pride icon - navigation carousel 07.0 Product detail page - USPs - external usp - stretch link - lengths link - pdp message - variant selector - additional info - product specific usps - size notification 08.0 System pages 08.1 Account - register confirmation page - activation confirmation page - navigation - dashboard - we is me membercard 08.2 Cart - general - USPs - approaching promotion - hotfixes 08.3 Checkout 08.4 Order confirmation - general - facebook - restore optin 08.5 Returnportal - roadmap - non-retour reward 08.6 Error - general - 404 08.7 Storelocator - renovation message 08.8 Enrichment - benefits banner 09.0 Static pages - general - promotion page - corporate identity page - blue ridge landingpage - student discount - FAQ - adjusted opening hours - stores overview - brandbook - ocapi - WE is ME - WE box - WE care - WE Care global - WE Care index - WE Care People - WE Care Planet - WE Care Guides - WE Care Guide - Cotton - WE Care Guide - Denim (kids) - WE Care Guide - Linen - WE Care Guide - Wool - WE Care Guide - Polyester - WE Care Guide - Denim (men & women) - WE Care Guide - general - general conditions - exclusive collection page - special opening hours - member get member - press - styling session - kickoff - cookie overview - wear the moment - seo page - personal shopping page - suiting guide (women) - internal tools 10.0 Landing pages - 2020 / HL08 / WE & Friends - 2023 / C2 / Fashion show 11.0 Persistant - adaptive styling - fixed elements on scroll - hide from main pages - fluid content 12.0 Hotfixes - hide facebook login button - hide store stock on pdp - fix stickers on pdp mobile - add sticker to product set page - approaching discount - hide active filter buttons - hide unnecessary label from return methods in return portal **/ /************************************************************************* 01.0 Global *************************************************************************/ /***********/ /* imports */ /***********/ /* animation classes */ @import "animations.css"; /***********/ /* general */ /***********/ .hidden { display: none; } /**************/ /* typography */ /**************/ /* Added at 17.09.19. */ /* Edited at 18.07.19. Added 'hr' and sup styling. */ /* Edited at 24.07.19. Added new range of typography. */ /* Edited at 25.07.19. Updated new range of typography. */ /* Edited at 26.07.19. Updated new range of typography width ctas state variant. */ /* Edited at 29.07.19. Added .gt styling. */ /* Edited at 31.07.19. Added HR in header. */ /* Edited at 07.08.19. Added fix for H2 heading. */ /* Edited at 08.08.19. Added ctas styling in headings. */ /* Edited at 15.08.19. Removed old styling. */ /* Edited at 19.08.19. Added .hr.general. */ /* Edited at 22.08.19. Adjusted CTAs from 11px to 12px. */ /* Edited at 26.08.19. Added 'heading' variant of

as a intro/outro to other headings. */ /* Edited at 09.09.19. Fixed H6, added vStroke. */ /* Edited at 11.09.19. Adjusted mobile size H1. Adjusted superscript. */ /* Edited at 02.10.19. Added .hr.dark. */ /* Edited at 08.10.19. Added flex fix for IE. */ /* Edited at 14.10.19. Added fix for horizontal category banners (line-height). */ /* Edited at 30.10.19. Added .inverse.flat class. */ /* Edited at 14.11.19. Added another fix for headers in hero product banners. */ /* Edited at 27.11.19. Added additional effects for SALE. */ /* Edited at 29.11.19. Added inverse + inverse flat variations for unordered lists. */ /* Edited at 10.12.19. Added additional fixes for horizontal category banners (line-height). */ /* Edited at 13.01.20. Added gold variation for SALE. */ /* Edited at 15.01.20. Added animation for memberevent. */ /* Edited at 11.02.20. Added 'ol' and 'ul' bodycopy styling. */ /* Edited at 24.02.20. Added fix for header whitespacing. */ /* Edited at 02.03.20. Added 'greyed' state ctas. Added 'center' ol + ul styling. */ /* Edited at 02.04.20. Added 'label' for headings. */ /* Edited at 08.04.20. Added bold font to headings. */ /* Edited at 02.06.20. Updated Sale colors. */ /* Edited at 08.06.20. Adjusted margin between CTAs from 10px to 5px. */ /* Edited at 22.07.20. Added 'dropExtraSaleShadow'. */ /* Edited at 05.08.20. Added 'letterSpacing' variations. */ /* Edited at 25.08.20. Added 'hr.minimal' and 'hr.zero'. */ /* Edited at 27.11.20. Added 'book' variations of headings. */ /* Edited at 29.12.20. Added '.heading.hr' to add a horizontal stroke on left and right side of the text. */ /* Edited at 24.03.21. Darkened text shadow from 0.2 to 0.4. Added class 'lcase' for lowercase titles. */ /* Edited at 05.05.21. Added responsive fontsizes. Not finished yet. */ /* Edited at 11.05.21. Added seo styling */ /* Edited at 25.05.21. Added 'medium condensed' and 'bold condensed'. */ /* Edited at 11.08.21. Updated sup for H4 mobile. */ /* Edited at 01.11.21. Added 'defaultSaleBackgroundColor' which defines the background color of sale. */ /* Edited at 19.07.23. Removed some sale background classes. */ h1.heading, h2.heading, h3.heading, h4.heading, h5.heading, h6.heading { font-family: "Futura PT W01 Heavy", arial, sans-serif; text-transform: uppercase; white-space: normal; } h1.heading.lcase, h2.heading.lcase, h3.heading.lcase, h4.heading.lcase, h5.heading.lcase, h6.heading.lcase { text-transform: none; } h1.heading.book, h2.heading.book, h3.heading.book, h4.heading.book, h5.heading.book, h6.heading.book, p.heading.book { font-family: "Futura PT W01 Book", arial, sans-serif; } h1.heading.condensed, h2.heading.condensed, h3.heading.condensed, h4.heading.condensed, h5.heading.condensed, h6.heading.condensed, p.heading.condensed { font-family: "Futura LT W01 Medium Condensed", arial, sans-serif; } h1.heading { font-size: 40px; } h2.heading { font-size: 28px; } h3.heading { font-size: 24px; } h4.heading { font-size: 22px; } h5.heading { font-size: 18px; } h6.heading { font-size: 15px; } h1.heading b, h2.heading b, h3.heading b, h4.heading b, h5.heading b, h6.heading b, p.heading b { font-family: "Futura PT W01 Bold", arial, sans-serif; } h1.heading.condensed b, h2.heading.condensed b, h3.heading.condensed b, h4.heading.condensed b, h5.heading.condensed b, h6.heading.condensed b, p.heading.condensed b { font-family: "Futura LT W01 Bold Condensed", arial, sans-serif; } h1.heading b.extra, h2.heading b.extra, h3.heading b.extra, h4.heading b.extra, h5.heading b.extra, h6.heading b.extra, p.heading b.extra { font-family: "Futura PT W01 ExtraBold", arial, sans-serif; } h1.heading.letterspacing-40, h2.heading.letterspacing-40, h3.heading.letterspacing-40, h4.heading.letterspacing-40, h5.heading.letterspacing-40, h6.heading.letterspacing-40, p.heading.letterspacing-40, p.bodycopy.letterspacing-40 { letter-spacing: 0.04em; } h1.heading.letterspacing-70, h2.heading.letterspacing-70, h3.heading.letterspacing-70, h4.heading.letterspacing-70, h5.heading.letterspacing-70, h6.heading.letterspacing-70, p.heading.letterspacing-70, p.bodycopy.letterspacing-70 { letter-spacing: 0.07em; } h1.heading.letterspacing-100, h2.heading.letterspacing-100, h3.heading.letterspacing-100, h4.heading.letterspacing-100, h5.heading.letterspacing-100, h6.heading.letterspacing-100, p.heading.letterspacing-100, p.bodycopy.letterspacing-100 { letter-spacing: 0.1em; } p.heading { font-size: 18px; text-transform: uppercase; } p.heading.intro, p.heading.outro { letter-spacing: 0.15em; } p.bodycopy { font-size: 15px; line-height: 21px; white-space: normal; margin-top: 1em; margin-bottom: 1em; } p.bodycopy b { font-weight: normal; font-family: "Futura PT W01 Heavy", arial, sans-serif; } p.bodycopy b.uppercase { text-transform: uppercase; } h1.heading sup { top: -0.5em; font-size: 0.6em; } h2.heading sup { top: -0.5em; font-size: 0.6em; } h3.heading sup { top: -0.5em; font-size: 0.6em; } h4.heading sup { top: -0.5em; font-size: 0.6em; } h5.heading sup { top: -0.5em; font-size: 0.6em; } h6.heading sup { top: -0.5em; font-size: 0.6em; } p.bodycopy sup { top: -0.4em; font-size: 0.6em; } p.bodycopy.tiny { font-size: 11px; line-height: 15px; } h1.heading .hr, h2.heading .hr, h3.heading .hr, h4.heading .hr, h5.heading .hr, h6.heading .hr { display: block; width: 40px; height: 5px; margin: 30px auto; } h1.heading .label, h2.heading .label, h3.heading .label, h4.heading .label, h5.heading .label, h6.heading .label, p.bodycopy .label { display: inline-block; padding: 5px 20px; } h1.heading .label, h2.heading .label, h3.heading .label, h4.heading .label, h5.heading .label, h6.heading .label { font-family: "Futura PT W01 Book", arial, sans-serif; } h1.heading .label b, h2.heading .label b, h3.heading .label b, h4.heading .label b, h5.heading .label b, h6.heading .label b { font-weight: normal; font-family: "Futura PT W01 Heavy", arial, sans-serif; } p.bodycopy .label.large { padding: 8px 25px; margin: 10px; font-family: "Futura PT W01 Heavy", arial, sans-serif; } p.bodycopy .label.large:first-child { margin-left: 0; } p.bodycopy .label.large:last-child { margin-right: 0; } p.bodycopy.center { text-align: center; } p.bodycopy.uppercase { text-transform: uppercase; } h4.heading.ctas {} h4.heading.ctas a.cta { margin: 0 10px 10px; text-decoration: none; } h4.heading.ctas a.cta:first-child { margin-left: 0; } h4.heading.ctas a.cta:last-child { margin-right: 0; } h4.heading.ctas a.cta u { text-decoration: none; padding-bottom: 1px; position: relative; } h6.heading.ctas {} h6.heading.ctas a.cta { margin: 0 10px 10px; text-decoration: none; } h6.heading.ctas a.cta:first-child { margin-left: 0; } h6.heading.ctas a.cta:last-child { margin-right: 0; } h6.heading.ctas a.cta u { text-decoration: none; padding-bottom: 1px; position: relative; } p.bodycopy.ctas { font-size: 12px; text-transform: uppercase; font-family: 'Futura PT W01 Heavy', arial, sans-serif; } p.bodycopy.ctas a.cta, p.bodycopy.ctas span.cta { margin: 0 5px 10px; text-decoration: none; } p.bodycopy.ctas a.cta:first-child, p.bodycopy.ctas span.cta:first-child { margin-left: 0; } p.bodycopy.ctas a.cta:last-child, p.bodycopy.ctas span.cta:last-child { margin-right: 0; } p.bodycopy.ctas a.cta u, p.bodycopy.ctas span.cta u { text-decoration: none; padding-bottom: 1px; position: relative; } ol.bodycopy, ul.bodycopy { margin: 15px 0; } ol.bodycopy.nested { counter-reset: item; } ol.bodycopy li, ul.bodycopy li { margin: 3px 0; } ol.bodycopy.nested li { display: block; } ol.bodycopy.nested li:before { content: counters(item, ".") " "; counter-increment: item; } ol li a.cta, ul li a.cta { font-size: 12px; text-transform: uppercase; font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-decoration: none; } ol.center, ul.center { text-align: center; list-style-position: inside; padding: 0; } div.hStroke { width: 100%; height: 1px; background-color: #dedede; margin: 20px auto; } div.hSpace { display: block; width: 100%; height: 0; margin-top: 20px; } span.vStroke { display: inline-block; font-size: 0.8em; margin: 0 0.8em; -webkit-transform: translatey(-0.15em); -moz-transform: translatey(-0.15em); transform: translatey(-0.15em); } p.bodycopy .gt { width: 28px; height: 11px; display: inline-block; position: relative; } p.bodycopy .gt:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; border: 4px solid transparent; -moz-transform: translate(-50%,-50%) rotate(45deg); -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); } @media only screen and (max-width : 850px){ h1.heading { font-size: 26px; } h2.heading { font-size: 24px; } h3.heading { font-size: 22px; } h4.heading { font-size: 18px; } h5.heading { font-size: 15px; } h6.heading { font-size: 15px; } h1.heading sup { top: -0.4em; font-size: 0.6em; } h2.heading sup { top: -0.4em; font-size: 0.6em; } h3.heading sup { top: -0.4em; font-size: 0.6em; } h4.heading sup { top: -0.45em; font-size: 0.6em; } h5.heading sup { top: -0.4em; font-size: 0.6em; } h6.heading sup { top: -0.4em; font-size: 0.6em; } h1.heading .label, h2.heading .label, h3.heading .label, h4.heading .label, h5.heading .label, h6.heading .label, p.bodycopy .label { display: inline-block; padding: 3px 10px; font-size: 0.9em; } p.bodycopy .label.large { margin: 5px; } div.hSpace { margin-top: 12px; } } /* responsiveness */ /* h4.heading { font-size: min(2.588vw, 4.286vw); } */ /* seo */ .seoWrapper .seo h1.heading { font-size: 22px; } .seoWrapper .seo h2.heading { font-size: 18px; } .seoWrapper .seo h3.heading { font-size: 15px; } .seoWrapper .seo h4.heading { font-size: 15px; } .seoWrapper .seo h5.heading { font-size: 15px; } .seoWrapper .seo h6.heading { font-size: 15px; } @media only screen and (max-width : 850px){ .seoWrapper .seo h1.heading { font-size: 22px; } .seoWrapper .seo h2.heading { font-size: 18px; } .seoWrapper .seo h3.heading { font-size: 15px; } .seoWrapper .seo h4.heading { font-size: 15px; } .seoWrapper .seo h5.heading { font-size: 15px; } .seoWrapper .seo h6.heading { font-size: 15px; } } /* FIXES */ .customer-service-directory h2.heading { font-family: "Futura PT W01 Heavy", arial, sans-serif !important; text-transform: uppercase !important; } .customer-service-directory h2.heading.book { font-family: "Futura PT W01 Book", arial, sans-serif !important; } .pt_product-search-noresult #primary .flex h2.heading, .pt_product-search-result #primary .flex h2.heading { margin: 0; } /* text alignment */ .left h1.heading, .left h2.heading, .left h3.heading, .left h4.heading, .left h5.heading, .left h6.heading, .left p.heading, .left p.bodycopy { text-align: left; } .center h1.heading, .center h2.heading, .center h3.heading, .center h4.heading, .center h5.heading, .center h6.heading, .center p.heading, .center p.bodycopy { text-align: center; } .right h1.heading, .right h2.heading, .right h3.heading, .right h4.heading, .right h5.heading, .right h6.heading, .right p.heading, .right p.bodycopy { text-align: right; } .flex.left h1.heading, .flex.left h2.heading, .flex.left h3.heading, .flex.left h4.heading, .flex.left h5.heading, .flex.left h6.heading, .flex.left p.heading, .flex.left p.bodycopy, .flex.center h1.heading, .flex.center h2.heading, .flex.center h3.heading, .flex.center h4.heading, .flex.center h5.heading, .flex.center h6.heading, .flex.center p.heading, .flex.center p.bodycopy, .flex.right h1.heading, .flex.right h2.heading, .flex.right h3.heading, .flex.right h4.heading, .flex.right h5.heading, .flex.right h6.heading, .flex.right p.heading, .flex.right p.bodycopy { width: auto; margin: 0; z-index: 2; } .flex div.hSpace { z-index: 2; } .flex p.bodycopy.ctas { z-index: 4; } .flex p.bodycopy.ctas a.cta { margin: 0 5px; } .flex.left p.bodycopy.ctas a.cta:first-child { margin-left: 0; } .flex.left p.bodycopy.ctas a.cta:last-child { margin-right: 0; } .flex.right p.bodycopy.ctas a.cta:first-child { margin-left: 0; } .flex.right p.bodycopy.ctas a.cta:last-child { margin-right: 0; } /* IE Fix */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .flex.left h1.heading, .flex.left h2.heading, .flex.left h3.heading, .flex.left h4.heading, .flex.left h5.heading, .flex.left h6.heading, .flex.left p.heading, .flex.left p.bodycopy, .flex.center h1.heading, .flex.center h2.heading, .flex.center h3.heading, .flex.center h4.heading, .flex.center h5.heading, .flex.center h6.heading, .flex.center p.heading, .flex.center p.bodycopy, .flex.right h1.heading, .flex.right h2.heading, .flex.right h3.heading, .flex.right h4.heading, .flex.right h5.heading, .flex.right h6.heading, .flex.right p.heading, .flex.right p.bodycopy { width: 100%; } } /* text color */ h1.heading, h2.heading, h3.heading, h4.heading, h5.heading, h6.heading, p.heading, p.bodycopy { color: #000; text-shadow: none; } h1.heading .hr, h2.heading .hr, h3.heading .hr, h4.heading .hr, h5.heading .hr, h6.heading .hr { background-color: #000; } h1.heading .label, h2.heading .label, h3.heading .label, h4.heading .label, h5.heading .label, h6.heading .label, p.bodycopy .label { background-color: #000; color: #fff; } h1.heading a.cta, h2.heading a.cta, h3.heading a.cta, h4.heading a.cta, h5.heading a.cta, h6.heading a.cta, p.heading a.cta { text-decoration: none; color: #000; } h4.heading.ctas a.cta { color: #000; } h4.heading.ctas a.cta u { border-bottom: 1px solid #000; } h4.heading.ctas.state a.cta u { border-bottom: 0; } h4.heading.ctas.state a.cta.active u { border-bottom: 0; border-bottom: 1px solid #000; } h6.heading.ctas.state.greyed { color: rgba(0,0,0,0.4); } h6.heading.ctas a.cta { color: #000; } h6.heading.ctas.state.greyed a.cta { color: rgba(0,0,0,0.4); } h6.heading.ctas.state.greyed a.cta.active { color: #000; } h6.heading.ctas a.cta u { border-bottom: 1px solid #000; } h6.heading.ctas.state a.cta u { border-bottom: 0; } h6.heading.ctas.state a.cta.active u { border-bottom: 0; border-bottom: 1px solid #000; } p.bodycopy.ctas a.cta, p.bodycopy.ctas span.cta { color: #000; } p.bodycopy.ctas a.cta u, p.bodycopy.ctas span.cta u { border-bottom: 1px solid #000; } p.bodycopy.ctas.state a.cta u { border-bottom: 0; } p.bodycopy.ctas.state a.cta.active u { border-bottom: 0; border-bottom: 1px solid #000; } h1.heading .gt:after, h2.heading .gt:after, h3.heading .gt:after, h4.heading .gt:after, h5.heading .gt:after, h6.heading .gt:after, p.bodycopy .gt:after { border-top: 4px solid #000; border-right: 4px solid #000; } h1.heading .label .gt:after, h2.heading .label .gt:after, h3.heading .label .gt:after, h4.heading .label .gt:after, h5.heading .label .gt:after, h6.heading .label .gt:after, p.bodycopy .label .gt:after { border-top: 4px solid #fff; border-right: 4px solid #fff; } /* text with stroke on both sides */ h1.heading.hr, h2.heading.hr, h3.heading.hr, h4.heading.hr, h5.heading.hr, h6.heading.hr, p.bodycopy.hr { display: flex; flex-direction: row; align-items: center; justify-content: center; white-space: nowrap; } h1.heading.hr:before, h2.heading.hr:before, h3.heading.hr:before, h4.heading.hr:before, h5.heading.hr:before, h6.heading.hr:before, p.bodycopy.hr:before, h1.heading.hr:after, h2.heading.hr:after, h3.heading.hr:after, h4.heading.hr:after, h5.heading.hr:after, h6.heading.hr:after, p.bodycopy.hr:after { content: ''; display: inline-block; height: 1px; background-color: #000; width: 100%; } h1.heading.hr:before, h2.heading.hr:before, h3.heading.hr:before, h4.heading.hr:before, h5.heading.hr:before, h6.heading.hr:before, p.bodycopy.hr:before { margin-right: 20px; } h1.heading.hr:after, h2.heading.hr:after, h3.heading.hr:after, h4.heading.hr:after, h5.heading.hr:after, h6.heading.hr:after, p.bodycopy.hr:after { margin-left: 20px; } .inverse h1.heading, .inverse h2.heading, .inverse h3.heading, .inverse h4.heading, .inverse h5.heading, .inverse h6.heading, .inverse p.heading, .inverse p.bodycopy, .inverse ol li, .inverse ul li { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.4); } .inverse h1.heading .hr, .inverse h2.heading .hr, .inverse h3.heading .hr, .inverse h4.heading .hr, .inverse h5.heading .hr, .inverse h6.heading .hr { background-color: #fff; } .inverse h1.heading .label, .inverse h2.heading .label, .inverse h3.heading .label, .inverse h4.heading .label, .inverse h5.heading .label, .inverse h6.heading .label, .inverse p.bodycopy .label { background-color: #fff; color: #000; text-shadow: none; } .inverse h1.heading a.cta, .inverse h2.heading a.cta, .inverse h3.heading a.cta, .inverse h4.heading a.cta, .inverse h5.heading a.cta, .inverse h6.heading a.cta, .inverse p.heading a.cta, .inverse ol li a.cta, .inverse ul li a.cta { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.4); } .inverse ol li a.cta u, .inverse ul li a.cta u { border-bottom: 1px solid #fff; text-decoration: none; } .inverse ol li a.cta u:after, .inverse ul li a.cta u:after { content: ""; display: block; position: absolute; width: 100%; top: calc(100% - 1px); left: 0; height: 2px; margin: 0 auto; -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.1); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 2px 1px rgba(0,0,0,0.1); } .inverse h4.heading.ctas a.cta { color: #fff; } .inverse h4.heading.ctas a.cta u { border-bottom: 1px solid #fff; } .inverse h4.heading.ctas a.cta u:after { content: ""; display: block; position: absolute; width: 100%; top: calc(100% - 1px); left: 0; height: 2px; margin: 0 auto; -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.1); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 2px 1px rgba(0,0,0,0.1); } .inverse h4.heading.ctas.state a.cta u { border-bottom: 0; } .inverse h4.heading.ctas.state a.cta.active u { border-bottom: 0; border-bottom: 1px solid #fff; } .inverse h4.heading.ctas.state a.cta u:after { display: none; } .inverse h4.heading.ctas.state a.cta.active u:after { display: block; } .inverse h6.heading.ctas.state.greyed { color: rgba(255,255,255,0.4); } .inverse h6.heading.ctas a.cta { color: #fff; } .inverse h6.heading.ctas.state.greyed a.cta { color: rgba(255,255,255,0.4); } .inverse h6.heading.ctas.state.greyed a.cta.active { color: #fff; } .inverse h6.heading.ctas a.cta u { border-bottom: 1px solid #fff; } .inverse h6.heading.ctas a.cta u:after { content: ""; display: block; position: absolute; width: 100%; top: calc(100% - 1px); left: 0; height: 2px; margin: 0 auto; -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.1); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 2px 1px rgba(0,0,0,0.1); } .inverse h6.heading.ctas.state a.cta u { border-bottom: 0; } .inverse h6.heading.ctas.state a.cta.active u { border-bottom: 0; border-bottom: 1px solid #fff; } .inverse h6.heading.ctas.state a.cta u:after { display: none; } .inverse h6.heading.ctas.state a.cta.active u:after { display: block; } .inverse p.bodycopy.ctas a.cta { color: #fff; } .inverse p.bodycopy.ctas a.cta u { border-bottom: 1px solid #fff; } .inverse p.bodycopy.ctas a.cta u:after { content: ""; display: block; position: absolute; width: 100%; top: calc(100% - 1px); left: 0; height: 2px; margin: 0 auto; -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.1); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 2px 1px rgba(0,0,0,0.1); } .inverse p.bodycopy.ctas.state a.cta u { border-bottom: 0; } .inverse p.bodycopy.ctas.state a.cta.active u { border-bottom: 0; border-bottom: 1px solid #fff; } .inverse p.bodycopy.ctas.state a.cta u:after { display: none; } .inverse p.bodycopy.ctas.state a.cta.active u:after { display: block; } .inverse h1.heading .gt:after, .inverse h2.heading .gt:after, .inverse h3.heading .gt:after, .inverse h4.heading .gt:after, .inverse h5.heading .gt:after, .inverse h6.heading .gt:after, .inverse p.bodycopy .gt:after { border-top: 4px solid #fff; border-right: 4px solid #fff; } .inverse h1.heading .label .gt:after, .inverse h2.heading .label .gt:after, .inverse h3.heading .label .gt:after, .inverse h4.heading .label .gt:after, .inverse h5.heading .label .gt:after, .inverse h6.heading .label .gt:after, .inverse p.bodycopy .label .gt:after { border-top: 4px solid #000; border-right: 4px solid #000; } .inverse.flat h1.heading, .inverse.flat h2.heading, .inverse.flat h3.heading, .inverse.flat h4.heading, .inverse.flat h5.heading, .inverse.flat h6.heading, .inverse.flat p.heading, .inverse.flat p.bodycopy, .inverse.flat ol li, .inverse.flat ul li { text-shadow: none; } .inverse.flat h1.heading a.cta, .inverse.flat h2.heading a.cta, .inverse.flat h3.heading a.cta, .inverse.flat h4.heading a.cta, .inverse.flat h5.heading a.cta, .inverse.flat h6.heading a.cta, .inverse.flat p.heading a.cta, .inverse.flat ol li a.cta, .inverse.flat ul li a.cta { text-shadow: none; } .inverse.flat ol li a.cta u:after, .inverse.flat ul li a.cta u:after { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .inverse.flat h4.heading.ctas a.cta u:after { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .inverse.flat h6.heading.ctas a.cta u:after { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .inverse.flat p.bodycopy.ctas a.cta u:after { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* text with stroke on both sides */ .inverse h1.heading.hr:before, .inverse h2.heading.hr:before, .inverse h3.heading.hr:before, .inverse h4.heading.hr:before, .inverse h5.heading.hr:before, .inverse h6.heading.hr:before, .inverse p.bodycopy.hr:before, .inverse h1.heading.hr:after, .inverse h2.heading.hr:after, .inverse h3.heading.hr:after, .inverse h4.heading.hr:after, .inverse h5.heading.hr:after, .inverse h6.heading.hr:after, .inverse p.bodycopy.hr:after { background-color: #fff; } /* outlet / presale / coupled sales / sale */ /* default background colours */ .defaultOutletBackgroundColor { background-color: #F43D04 !important; } .defaultSaleBackgroundColor { background-color: #d51f3a !important; } .defaultCoupledSalesBackgroundColor { background-color: #D61935 !important; } /* promotion background colours */ .promoSaleDefaultBackground { background: rgb(211,31,57) !important; background: linear-gradient(180deg, rgba(239,106,79,1) 0%, rgba(214,34,59,1) 100%) !important; } .promoSaleWeekenddealBackground { background: linear-gradient(180deg, rgba(239,106,79,1) 0%, rgba(214,34,59,1) 100%); } .promoSale4is3Background { background: rgb(213,31,58); background: linear-gradient(180deg, rgba(213,31,58,1) 0%, rgba(213,31,58,1) 50%, rgba(204,195,189,1) 50%, rgba(204,195,189,1) 100%); } /* additional effects/animations */ .dropSaleShadow, .inverse p.bodycopy.dropSaleShadow { text-shadow: #800517 0.06em 0.06em, #000 0.07em 0.08em ; } .dropSaleShadow.animated { animation-name: dropSaleShadow; -webkit-animation-name: dropSaleShadow; animation-duration: 3.0s; -webkit-animation-duration: 3.0s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes dropSaleShadow { 0% { text-shadow: #800517 0.06em 0.06em, #000 0.07em 0.08em; } 50% { text-shadow: #800517 0.06em 0.06em, #000 0.07em 0.08em; } 100% { text-shadow: #800517 0.06em 0.06em, #000 0.07em 0.08em; } } @-webkit-keyframes dropSaleShadow { 0% { text-shadow: #800517 0.06em 0.06em, #000 0.07em 0.08em; } 50% { text-shadow: #800517 0.06em 0.06em, #000 0.07em 0.08em; } 100% { text-shadow: #800517 0.06em 0.06em, #000 0.07em 0.08em; } } /* margins */ .margin20 { margin: 1.0em 20px; } .margin50 { margin: 1.0em 50px; } .margin70 { margin: 50px 70px; } @media only screen and (max-width : 850px){ .margin70 { margin: 50px 20px; } } /* strokes */ .hr.general { width: 100%; height: 1px; margin: 40px 0; background-color: #dedede; } .hr.minimal { width: 100%; height: 1px; margin: 15px 0; background-color: #dedede; } .hr.zero { width: 100%; height: 1px; margin: 0; background-color: #dedede; } .hr.dark { width: 100%; height: 1px; margin: 40px 0; background-color: #000; } .hr.small { width: 50px; height: 1px; margin: 40px auto; background-color: #000; } .hr.minimal.small { width: 50px; height: 1px; margin: 15px auto; background-color: #000; } /* fixes */ /* force line height on horizontal category banners. */ .slot-tile.Horizontal h1.heading, .slot-tile.Horizontal h2.heading, .slot-tile.Horizontal h3.heading, .slot-tile.Horizontal h4.heading, .slot-tile.Horizontal h5.heading, .slot-tile.Horizontal h6.heading, .slot-tile.Horizontal p.heading, .hero-tile h1.heading, .hero-tile h2.heading, .hero-tile h3.heading, .hero-tile h4.heading, .hero-tile h5.heading, .hero-tile h6.heading, .hero-tile p.heading { text-transform: uppercase; } .slot-tile h1.heading, .slot-tile h2.heading, .slot-tile h3.heading, .slot-tile h4.heading, .slot-tile h5.heading, .slot-tile h6.heading, .slot-tile p.heading, .slot-tile p.bodycopy, .slot-tile.Horizontal h1.heading, .slot-tile.Horizontal h2.heading, .slot-tile.Horizontal h3.heading, .slot-tile.Horizontal h4.heading, .slot-tile.Horizontal h5.heading, .slot-tile.Horizontal h6.heading, .slot-tile.Horizontal p.heading, .slot-tile.Horizontal p.bodycopy, .hero-tile h1.heading, .hero-tile h2.heading, .hero-tile h3.heading, .hero-tile h4.heading, .hero-tile h5.heading, .hero-tile h6.heading, .hero-tile p.heading, .hero-tile p.bodycopy { line-height: normal; } .search-result-items li.slot-tile.Horizontal a { font-size: inherit; } /*********/ /* icons */ /*********/ /* Added at 02.08.19. */ /* Edited at 18.06.20. Added new method of icon implementation. Added tick and prev/next arrows. */ /* Edited at 23.06.20. Added 'close' icon. */ /* Edited at 25.06.20. Added temporary Instagram icon. Need to be replaced by image sprite. */ /* Notes at 25.06.20. Sizes of icons: - 256x256 (xl) - 96x96 (l) - 48x48 (m) - default - 32x32 (s) - 24x24 (xs) - 16x16 (xxs) */ /* Edited at 02.07.20. Added new icons from image sprite. */ /* Edited at 03.07.20. Added new icons from image sprite. */ /* Edited at 15.07.20. Removed old 'instagram' icon. */ /* Edited at 20.07.20. Added small 'tick'. */ /* Edited at 22.07.20. Added 'checkmark'. Added size xss, updated xs. */ /* Edited at 02.09.20. Added 'border' class. */ /* Edited at 18.11.20. Added wash icons. Made icon grid bigger. */ /* Edited at 02.12.20. Replaced background method with mask method to support all colours. */ /* Edited at 15.01.21. Added three icons. */ /* Edited at 11.02.21. Fixed bug in facebook icon. */ /* Edited at 12.02.21. Added 'negative' class. */ /* Edited at 09.07.21. Added delivery company logos. */ /* Edited at 29.03.22. Replaced 'sofort' logo. */ /* Edited at 08.07.22. Added flags. */ /* Edited at 03.10.22. Added afterpay2riverty. */ /* Edited at 25.11.22. Added riverty. */ /* Edited at 21.06.23. Added 'print'. */ /* general */ .globalIcon { display: inline-block; position: relative; background-repeat: no-repeat; } .globalIcon._xxl { width: 256px; height: 256px; } .globalIcon._xl { width: 144px; height: 144px; } .globalIcon._l { width: 96px; height: 96px; } .globalIcon._m { width: 48px; height: 48px; } .globalIcon._s { width: 32px; height: 32px; } .globalIcon._xs { width: 24px; height: 24px; } .globalIcon._xxs { width: 16px; height: 16px; } .globalIcon.ellipse:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; z-index: -2; -webkit-mask-image: none; mask-image: none; } .globalIcon.ellipse.inverse:before { background-color: #000; } .globalIcon.ellipse.grey:before { background-color: #ccc; } .globalIcon.ellipse.usp:before { background-color: #00BF48; } .globalIcon.ellipse.active:before { background-color: #FF690C; } .globalIcon.ellipse.advice:before { background-color: #0073C7; } .globalIcon.ellipse.neutral:before { background-color: #f2f2f2; } .globalIcon.ellipse.stylingSession:before { background-color: #334867; } .globalIcon.ellipse.negative:before { background-color: #BF000F; } .globalIcon.ellipse._c5bca9:before { background-color: #fff; } .globalIcon.ellipse.inverse._c5bca9:before { background-color: #c5bca9; } .globalIcon.square:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: -2; } .globalIcon.square.inverse:before { background-color: #000; } .globalIcon.square.weCare:before { background-color: #05AE42; } .globalIcon.square.usp:before { background-color: #00BF48; } .globalIcon.square.active:before { background-color: #FF690C; } .globalIcon.square.advice:before { background-color: #0073C7; } .globalIcon.square.neutral:before { background-color: #f2f2f2; } .globalIcon.square.negative:before { background-color: #BF000F; } .globalIcon.border { border: none !important; } .globalIcon.border:before { content: ""; position: absolute; top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 50%; border: 2px solid #000; z-index: -2; } .globalIcon.border._xs:before { top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 50%; border: 1px solid #000; } .globalIcon.border._xxs:before { top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 50%; border: 1px solid #000; } .globalIcon.border.inverse:before { border: 2px solid #fff; } .globalIcon.border.weCare:before { border: 2px solid #05AE42; } /* css only */ .globalIcon.tick { width: 16px; height: 16px; } .globalIcon.tick:after { content: ""; position: absolute; top: 2px; left: 0; width: 8px; height: 15px; border: 1px solid #FF690C; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .globalIcon.tick.small { width: 14px; height: 14px; } .globalIcon.tick.small:after { width: 6px; height: 12px; } .globalIcon.arrowLeft, .globalIcon.arrowRight, .globalIcon.arrowUp, .globalIcon.arrowDown { width: 14px; height: 14px; } .globalIcon.arrowLeft:after, .globalIcon.arrowRight:after, .globalIcon.arrowUp:after, .globalIcon.arrowDown:after { content: ''; display: block; width: 12px; height: 12px; border: 2px solid #000; border-top: 0; border-right: 0; } .globalIcon.arrowLeft.inverse:after, .globalIcon.arrowRight.inverse:after, .globalIcon.arrowUp.inverse:after, .globalIcon.arrowDown.inverse:after { border: 2px solid #fff; border-top: 0; border-right: 0; } .globalIcon.arrowLeft:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .globalIcon.arrowRight:after { -webkit-transform: rotate(225deg); transform: rotate(225deg); } .globalIcon.arrowUp:after { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .globalIcon.arrowDown:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .globalIcon.arrowLeft.small, .globalIcon.arrowRight.small, .globalIcon.arrowUp.small, .globalIcon.arrowDown.small { width: 10px; height: 10px; } .globalIcon.arrowLeft.small:after, .globalIcon.arrowRight.small:after, .globalIcon.arrowUp.small:after, .globalIcon.arrowDown.small:after { width: 8px; height: 8px; } .globalIcon.close { width: 14px; height: 14px; } .globalIcon.close:before, .globalIcon.close:after { content: ""; display: block; width: 17px; height: 2px; background-color: #000; } .globalIcon.close.inverse:before, .globalIcon.close.inverse:after { background-color: #fff; } .globalIcon.close:before { -ms-transform: translate(-2px, 5px) rotate(-45deg); -webkit-transform: translate(-2px, 5px) rotate(-45deg); transform: translate(-2px, 5px) rotate(-45deg); } .globalIcon.close:after { -ms-transform: translate(-2px, 3px) rotate(45deg); -webkit-transform: translate(-2px, 3px) rotate(45deg); transform: translate(-2px, 3px) rotate(45deg); } .globalIcon.close.small { width: 10px; height: 10px; } .globalIcon.close.small:before, .globalIcon.close.small:after { width: 12px; } .globalIcon.close.small:before { -ms-transform: translate(-1px, 4px) rotate(-45deg); -webkit-transform: translate(-1px, 4px) rotate(-45deg); transform: translate(-1px, 4px) rotate(-45deg); } .globalIcon.close.small:after { -ms-transform: translate(-1px, 2px) rotate(45deg); -webkit-transform: translate(-1px, 2px) rotate(45deg); transform: translate(-1px, 2px) rotate(45deg); } /* icon sprite (1056 * 576) */ .globalIcon.sprite:after { content: ''; display: block; width: 100%; height: 100%; background-image: url('../icons/2023_C2/icon-sprite.svg'); } .globalIcon.sprite._xxl:after { background-image: url('../icons/2023_C2/icon-sprite.svg'); background-size: calc(1056px * 5.33); } .globalIcon.sprite._xl:after { background-image: url('../icons/2023_C2/icon-sprite.svg'); background-size: calc(1056px * 3); } .globalIcon.sprite._l:after { background-image: url('../icons/2023_C2/icon-sprite.svg'); background-size: calc(1056px * 2); } .globalIcon.sprite._m:after { background-image: url('../icons/2023_C2/icon-sprite.svg'); background-size: calc(1056px * 1); } .globalIcon.sprite._s:after { background-image: url('../icons/2023_C2/icon-sprite.svg'); background-size: calc(1056px * 0.66); } .globalIcon.sprite._xs:after { background-image: url('../icons/2023_C2/icon-sprite.svg'); background-size: calc(1056px * 0.5); } .globalIcon.sprite._xxs:after { background-image: url('../icons/2023_C2/icon-sprite.svg'); background-size: calc(1056px * 0.33); } .globalIcon.sprite.sofort:after { background-position: 0 0; } .globalIcon.sprite.ideal:after { background-position: 0 calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.sprite.bancontact:after { background-position: 0 calc(calc(100% / 528) * calc(2 * 48)); } .globalIcon.sprite.mastercard:after { background-position: 0 calc(calc(100% / 528) * calc(3 * 48)); } .globalIcon.sprite.visa:after { background-position: 0 calc(calc(100% / 528) * calc(4 * 48)); } .globalIcon.sprite.americanexpress:after { background-position: 0 calc(calc(100% / 528) * calc(5 * 48)); } .globalIcon.sprite.paypal:after { background-position: 0 calc(calc(100% / 528) * calc(6 * 48)); } .globalIcon.sprite.klarna:after { background-position: 0 calc(calc(100% / 528) * calc(7 * 48)); } .globalIcon.sprite.afterpay:after { background-position: 0 calc(calc(100% / 528) * calc(8 * 48)); } .globalIcon.sprite.afterpay2riverty:after { background-position: 0 calc(calc(100% / 528) * calc(9 * 48)); } .globalIcon.sprite.riverty:after { background-position: 0 calc(calc(100% / 528) * calc(10 * 48)); } .globalIcon.sprite.postnl:after { background-position: calc(calc(100% / 1008) * calc(1 * 48)) 0; } .globalIcon.sprite.bpost:after { background-position: calc(calc(100% / 1008) * calc(1 * 48)) calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.sprite.colisprive:after { background-position: calc(calc(100% / 1008) * calc(1 * 48)) calc(calc(100% / 528) * calc(2 * 48)); } .globalIcon.sprite.swisspost:after { background-position: calc(calc(100% / 1008) * calc(1 * 48)) calc(calc(100% / 528) * calc(3 * 48)); } .globalIcon.sprite.hermes:after { background-position: calc(calc(100% / 1008) * calc(1 * 48)) calc(calc(100% / 528) * calc(4 * 48)); } .globalIcon.sprite.osterreichischepost:after { background-position: calc(calc(100% / 1008) * calc(1 * 48)) calc(calc(100% / 528) * calc(5 * 48)); } .globalIcon.sprite.thuiswinkelwaarborg:after { background-position: calc(calc(100% / 1008) * calc(2 * 48)) 0; } .globalIcon.sprite.becommerce:after { background-position: calc(calc(100% / 1008) * calc(2 * 48)) calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.sprite.flag_be:after { background-position: calc(calc(100% / 1008) * calc(16 * 48)) 0; } .globalIcon.sprite.flag_fr:after { background-position: calc(calc(100% / 1008) * calc(16 * 48)) calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.sprite.flag_nl:after { background-position: calc(calc(100% / 1008) * calc(16 * 48)) calc(calc(100% / 528) * calc(2 * 48)); } .globalIcon.sprite.flag_at:after { background-position: calc(calc(100% / 1008) * calc(16 * 48)) calc(calc(100% / 528) * calc(3 * 48)); } .globalIcon.sprite.flag_de:after { background-position: calc(calc(100% / 1008) * calc(16 * 48)) calc(calc(100% / 528) * calc(4 * 48)); } .globalIcon.sprite.flag_lu:after { background-position: calc(calc(100% / 1008) * calc(16 * 48)) calc(calc(100% / 528) * calc(5 * 48)); } .globalIcon.sprite.flag_ch:after { background-position: calc(calc(100% / 1008) * calc(16 * 48)) calc(calc(100% / 528) * calc(6 * 48)); } /* mask */ .globalIcon.spriteMask:after { content: ''; display: block; width: 100%; height: 100%; -webkit-mask-image: url('../icons/2023_C2/icon-sprite.svg'); mask-image: url('../icons/2023_C2/icon-sprite.svg'); background-color: #000; } .globalIcon.spriteMask.inverse:after { background-color: #fff; } .globalIcon.spriteMask.weCare:after { background-color: #05AE42; } .globalIcon.spriteMask.inverse.weCare:after { background-color: #fff; } .globalIcon.spriteMask.mgm:after { background-color: #BB6D28; } .globalIcon.spriteMask.rate:after { background-color: #DCB618; } .globalIcon.spriteMask.stylingSession:after { background-color: #334867; } .globalIcon.spriteMask.ellipse.stylingSession:after { background-color: #000; } .globalIcon.spriteMask.ellipse.inverse.stylingSession:after { background-color: #fff; } .globalIcon.spriteMask.ellipse._c5bca9:after { background-color: #c5bca9; } .globalIcon.spriteMask.ellipse.inverse._c5bca9:after { background-color: #fff; } .globalIcon.spriteMask._xxl:after { -webkit-mask-image: url('../icons/2023_C2/icon-sprite.svg'); mask-image: url('../icons/2023_C2/icon-sprite.svg'); -webkit-mask-size: calc(1056px * 5.33); mask-size: calc(1056px * 5.33); } .globalIcon.spriteMask._xl:after { -webkit-mask-image: url('../icons/2023_C2/icon-sprite.svg'); mask-image: url('../icons/2023_C2/icon-sprite.svg'); -webkit-mask-size: calc(1056px * 3); mask-size: calc(1056px * 3); } .globalIcon.spriteMask._l:after { -webkit-mask-image: url('../icons/2023_C2/icon-sprite.svg'); mask-image: url('../icons/2023_C2/icon-sprite.svg'); -webkit-mask-size: calc(1056px * 2); mask-size: calc(1056px * 2); } .globalIcon.spriteMask._m:after { -webkit-mask-image: url('../icons/2023_C2/icon-sprite.svg'); mask-image: url('../icons/2023_C2/icon-sprite.svg'); -webkit-mask-size: calc(1056px * 1); mask-size: calc(1056px * 1); } .globalIcon.spriteMask._s:after { -webkit-mask-image: url('../icons/2023_C2/icon-sprite.svg'); mask-image: url('../icons/2023_C2/icon-sprite.svg'); -webkit-mask-size: calc(1056px * 0.66); mask-size: calc(1056px * 0.66); } .globalIcon.spriteMask._xs:after { -webkit-mask-image: url('../icons/2023_C2/icon-sprite.svg'); mask-image: url('../icons/2023_C2/icon-sprite.svg'); -webkit-mask-size: calc(1056px * 0.5); mask-size: calc(1056px * 0.5); } .globalIcon.spriteMask._xxs:after { -webkit-mask-image: url('../icons/2023_C2/icon-sprite.svg'); mask-image: url('../icons/2023_C2/icon-sprite.svg'); -webkit-mask-size: calc(1056px * 0.33); mask-size: calc(1056px * 0.33); } .globalIcon.spriteMask.navleft:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(3 * 48)) 0; mask-position: calc(calc(100% / 1008) * calc(3 * 48)) 0; } .globalIcon.spriteMask.navright:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(3 * 48)) calc(calc(100% / 528) * calc(1 * 48)); mask-position: calc(calc(100% / 1008) * calc(3 * 48)) calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.spriteMask.navup:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(3 * 48)) calc(calc(100% / 528) * calc(2 * 48)); mask-position: calc(calc(100% / 1008) * calc(3 * 48)) calc(calc(100% / 528) * calc(2 * 48)); } .globalIcon.spriteMask.navdown:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(3 * 48)) calc(calc(100% / 528) * calc(3 * 48)); mask-position: calc(calc(100% / 1008) * calc(3 * 48)) calc(calc(100% / 528) * calc(3 * 48)); } .globalIcon.spriteMask.navleft_2:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(3 * 48)) calc(calc(100% / 528) * calc(4 * 48)); mask-position: calc(calc(100% / 1008) * calc(3 * 48)) calc(calc(100% / 528) * calc(4 * 48)); } .globalIcon.spriteMask.navright_2:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(3 * 48)) calc(calc(100% / 528) * calc(5 * 48)); mask-position: calc(calc(100% / 1008) * calc(3 * 48)) calc(calc(100% / 528) * calc(5 * 48)); } .globalIcon.spriteMask.navup_2:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(3 * 48)) calc(calc(100% / 528) * calc(6 * 48)); mask-position: calc(calc(100% / 1008) * calc(3 * 48)) calc(calc(100% / 528) * calc(6 * 48)); } .globalIcon.spriteMask.navdown_2:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(3 * 48)) calc(calc(100% / 528) * calc(7 * 48)); mask-position: calc(calc(100% / 1008) * calc(3 * 48)) calc(calc(100% / 528) * calc(7 * 48)); } .globalIcon.spriteMask.soundon:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(4 * 48)) 0; mask-position: calc(calc(100% / 1008) * calc(4 * 48)) 0; } .globalIcon.spriteMask.soundoff:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(4 * 48)) calc(calc(100% / 528) * calc(1 * 48)); mask-position: calc(calc(100% / 1008) * calc(4 * 48)) calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.spriteMask.play:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(4 * 48)) calc(calc(100% / 528) * calc(2 * 48)); mask-position: calc(calc(100% / 1008) * calc(4 * 48)) calc(calc(100% / 528) * calc(2 * 48)); } .globalIcon.spriteMask.like:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(4 * 48)) calc(calc(100% / 528) * calc(3 * 48)); mask-position: calc(calc(100% / 1008) * calc(4 * 48)) calc(calc(100% / 528) * calc(3 * 48)); } .globalIcon.spriteMask.dislike:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(4 * 48)) calc(calc(100% / 528) * calc(4 * 48)); mask-position: calc(calc(100% / 1008) * calc(4 * 48)) calc(calc(100% / 528) * calc(4 * 48)); } .globalIcon.spriteMask.print:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(4 * 48)) calc(calc(100% / 528) * calc(5 * 48)); mask-position: calc(calc(100% / 1008) * calc(4 * 48)) calc(calc(100% / 528) * calc(5 * 48)); } .globalIcon.spriteMask.facebook:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(5 * 48)) 0; mask-position: calc(calc(100% / 1008) * calc(5 * 48)) 0; } .globalIcon.spriteMask.instagram:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(5 * 48)) calc(calc(100% / 528) * calc(1 * 48)); mask-position: calc(calc(100% / 1008) * calc(5 * 48)) calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.spriteMask.twitter:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(5 * 48)) calc(calc(100% / 528) * calc(2 * 48)); mask-position: calc(calc(100% / 1008) * calc(5 * 48)) calc(calc(100% / 528) * calc(2 * 48)); } .globalIcon.spriteMask.youtube:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(5 * 48)) calc(calc(100% / 528) * calc(3 * 48)); mask-position: calc(calc(100% / 1008) * calc(5 * 48)) calc(calc(100% / 528) * calc(3 * 48)); } .globalIcon.spriteMask.pinterest:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(5 * 48)) calc(calc(100% / 528) * calc(4 * 48)); mask-position: calc(calc(100% / 1008) * calc(5 * 48)) calc(calc(100% / 528) * calc(4 * 48)); } .globalIcon.spriteMask.checkmark:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(6 * 48)) 0; mask-position: calc(calc(100% / 1008) * calc(6 * 48)) 0; } .globalIcon.spriteMask.deliverycosts:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(1 * 48)); mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.spriteMask.delivery:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(2 * 48)); mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(2 * 48)); } .globalIcon.spriteMask.return:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(3 * 48)); mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(3 * 48)); } .globalIcon.spriteMask.pay_afterwards_euro:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(4 * 48)); mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(4 * 48)); } .globalIcon.spriteMask.pay_afterwards_chf:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(5 * 48)); mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(5 * 48)); } .globalIcon.spriteMask.package:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(6 * 48)); mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(6 * 48)); } .globalIcon.spriteMask.deliverytime:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(7 * 48)); mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(7 * 48)); } .globalIcon.spriteMask.deliveryspeed:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(8 * 48)); mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(8 * 48)); } .globalIcon.spriteMask.pay_afterwards:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(9 * 48)); mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(9 * 48)); } .globalIcon.spriteMask.pay_safe:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(10 * 48)); mask-position: calc(calc(100% / 1008) * calc(6 * 48)) calc(calc(100% / 528) * calc(10 * 48)); } .globalIcon.spriteMask.info:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(7 * 48)) 0; mask-position: calc(calc(100% / 1008) * calc(7 * 48)) 0; } .globalIcon.spriteMask.profile:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(8 * 48)) 0; mask-position: calc(calc(100% / 1008) * calc(8 * 48)) 0; } .globalIcon.spriteMask.bag:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(8 * 48)) calc(calc(100% / 528) * calc(1 * 48)); mask-position: calc(calc(100% / 1008) * calc(8 * 48)) calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.spriteMask.love:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(8 * 48)) calc(calc(100% / 528) * calc(2 * 48)); mask-position: calc(calc(100% / 1008) * calc(8 * 48)) calc(calc(100% / 528) * calc(2 * 48)); } .globalIcon.spriteMask.coupon:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(8 * 48)) calc(calc(100% / 528) * calc(3 * 48)); mask-position: calc(calc(100% / 1008) * calc(8 * 48)) calc(calc(100% / 528) * calc(3 * 48)); } .globalIcon.spriteMask.reward:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(8 * 48)) calc(calc(100% / 528) * calc(4 * 48)); mask-position: calc(calc(100% / 1008) * calc(8 * 48)) calc(calc(100% / 528) * calc(4 * 48)); } .globalIcon.spriteMask.addresspin:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(8 * 48)) calc(calc(100% / 528) * calc(5 * 48)); mask-position: calc(calc(100% / 1008) * calc(8 * 48)) calc(calc(100% / 528) * calc(5 * 48)); } .globalIcon.spriteMask.favoritestore:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(8 * 48)) calc(calc(100% / 528) * calc(6 * 48)); mask-position: calc(calc(100% / 1008) * calc(8 * 48)) calc(calc(100% / 528) * calc(6 * 48)); } .globalIcon.spriteMask.inspiration:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(8 * 48)) calc(calc(100% / 528) * calc(7 * 48)); mask-position: calc(calc(100% / 1008) * calc(8 * 48)) calc(calc(100% / 528) * calc(7 * 48)); } .globalIcon.spriteMask.offer:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(9 * 48)) 0; mask-position: calc(calc(100% / 1008) * calc(11 * 48)) 0; } .globalIcon.spriteMask.invitation:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(1 * 48)); mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.spriteMask.giveaway:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(2 * 48)); mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(2 * 48)); } .globalIcon.spriteMask.gift:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(3 * 48)); mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(3 * 48)); } .globalIcon.spriteMask.time:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(4 * 48)); mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(4 * 48)); } .globalIcon.spriteMask.styleadvice:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(5 * 48)); mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(5 * 48)); } .globalIcon.spriteMask.orderwithapp:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(6 * 48)); mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(6 * 48)); } .globalIcon.spriteMask.coupons:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(7 * 48)); mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(7 * 48)); } .globalIcon.spriteMask.sendgift:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(8 * 48)); mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(8 * 48)); } .globalIcon.spriteMask.sharescreen:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(9 * 48)); mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(9 * 48)); } .globalIcon.spriteMask.datetime:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(10 * 48)); mask-position: calc(calc(100% / 1008) * calc(9 * 48)) calc(calc(100% / 528) * calc(10 * 48)); } .globalIcon.spriteMask.phone:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(10 * 48)) 0; mask-position: calc(calc(100% / 1008) * calc(10 * 48)) 0; } .globalIcon.spriteMask.email:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(10 * 48)) calc(calc(100% / 528) * calc(1 * 48)); mask-position: calc(calc(100% / 1008) * calc(10 * 48)) calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.spriteMask.chat:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(10 * 48)) calc(calc(100% / 528) * calc(2 * 48)); mask-position: calc(calc(100% / 1008) * calc(10 * 48)) calc(calc(100% / 528) * calc(2 * 48)); } .globalIcon.spriteMask.pin:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(10 * 48)) calc(calc(100% / 528) * calc(3 * 48)); mask-position: calc(calc(100% / 1008) * calc(10 * 48)) calc(calc(100% / 528) * calc(3 * 48)); } .globalIcon.spriteMask.phonering:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(10 * 48)) calc(calc(100% / 528) * calc(4 * 48)); mask-position: calc(calc(100% / 1008) * calc(10 * 48)) calc(calc(100% / 528) * calc(4 * 48)); } .globalIcon.spriteMask.headquarter:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(10 * 48)) calc(calc(100% / 528) * calc(5 * 48)); mask-position: calc(calc(100% / 1008) * calc(10 * 48)) calc(calc(100% / 528) * calc(5 * 48)); } .globalIcon.spriteMask.whatsapp:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(10 * 48)) calc(calc(100% / 528) * calc(6 * 48)); mask-position: calc(calc(100% / 1008) * calc(10 * 48)) calc(calc(100% / 528) * calc(6 * 48)); } .globalIcon.spriteMask.payment:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(11 * 48)) 0; mask-position: calc(calc(100% / 1008) * calc(11 * 48)) 0; } .globalIcon.spriteMask.general:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(1 * 48)); mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.spriteMask.app:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(2 * 48)); mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(2 * 48)); } .globalIcon.spriteMask.weisme:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(3 * 48)); mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(3 * 48)); } .globalIcon.spriteMask.membergetmember:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(4 * 48)); mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(4 * 48)); } .globalIcon.spriteMask.box:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(5 * 48)); mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(5 * 48)); } .globalIcon.spriteMask.covid19:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(6 * 48)); mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(6 * 48)); } .globalIcon.spriteMask.external:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(7 * 48)); mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(7 * 48)); } .globalIcon.spriteMask.partner:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(8 * 48)); mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(8 * 48)); } .globalIcon.spriteMask.betterquality:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(9 * 48)); mask-position: calc(calc(100% / 1008) * calc(11 * 48)) calc(calc(100% / 528) * calc(9 * 48)); } .globalIcon.spriteMask.betterproducts:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(12 * 48)) 0; mask-position: calc(calc(100% / 1008) * calc(12 * 48)) 0; } .globalIcon.spriteMask.wayofworking:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(12 * 48)) calc(calc(100% / 528) * calc(1 * 48)); mask-position: calc(calc(100% / 1008) * calc(12 * 48)) calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.spriteMask.giveback:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(12 * 48)) calc(calc(100% / 528) * calc(2 * 48)); mask-position: calc(calc(100% / 1008) * calc(12 * 48)) calc(calc(100% / 528) * calc(2 * 48)); } .globalIcon.spriteMask.supplychain:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(12 * 48)) calc(calc(100% / 528) * calc(3 * 48)); mask-position: calc(calc(100% / 1008) * calc(12 * 48)) calc(calc(100% / 528) * calc(3 * 48)); } .globalIcon.spriteMask.sustainable:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(12 * 48)) calc(calc(100% / 528) * calc(4 * 48)); mask-position: calc(calc(100% / 1008) * calc(12 * 48)) calc(calc(100% / 528) * calc(4 * 48)); } .globalIcon.spriteMask.stylish:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(12 * 48)) calc(calc(100% / 528) * calc(5 * 48)); mask-position: calc(calc(100% / 1008) * calc(12 * 48)) calc(calc(100% / 528) * calc(5 * 48)); } .globalIcon.spriteMask.staroutline:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(12 * 48)) calc(calc(100% / 528) * calc(5 * 48)); mask-position: calc(calc(100% / 1008) * calc(12 * 48)) calc(calc(100% / 528) * calc(5 * 48)); } .globalIcon.spriteMask.star:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(12 * 48)) calc(calc(100% / 528) * calc(6 * 48)); mask-position: calc(calc(100% / 1008) * calc(12 * 48)) calc(calc(100% / 528) * calc(6 * 48)); } .globalIcon.spriteMask.washbyhand:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(13 * 48)) 0; mask-position: calc(calc(100% / 1008) * calc(13 * 48)) 0; } .globalIcon.spriteMask.wash30degrees:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(13 * 48)) calc(calc(100% / 528) * calc(1 * 48)); mask-position: calc(calc(100% / 1008) * calc(13 * 48)) calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.spriteMask.wash40degrees:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(13 * 48)) calc(calc(100% / 528) * calc(2 * 48)); mask-position: calc(calc(100% / 1008) * calc(13 * 48)) calc(calc(100% / 528) * calc(2 * 48)); } .globalIcon.spriteMask.wash60degrees:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(13 * 48)) calc(calc(100% / 528) * calc(3 * 48)); mask-position: calc(calc(100% / 1008) * calc(13 * 48)) calc(calc(100% / 528) * calc(3 * 48)); } .globalIcon.spriteMask.tumbledry:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(13 * 48)) calc(calc(100% / 528) * calc(4 * 48)); mask-position: calc(calc(100% / 1008) * calc(13 * 48)) calc(calc(100% / 528) * calc(4 * 48)); } .globalIcon.spriteMask.donottumbledry:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(13 * 48)) calc(calc(100% / 528) * calc(5 * 48)); mask-position: calc(calc(100% / 1008) * calc(13 * 48)) calc(calc(100% / 528) * calc(5 * 48)); } .globalIcon.spriteMask.bleach:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(13 * 48)) calc(calc(100% / 528) * calc(6 * 48)); mask-position: calc(calc(100% / 1008) * calc(13 * 48)) calc(calc(100% / 528) * calc(6 * 48)); } .globalIcon.spriteMask.donotbleach:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(13 * 48)) calc(calc(100% / 528) * calc(7 * 48)); mask-position: calc(calc(100% / 1008) * calc(13 * 48)) calc(calc(100% / 528) * calc(7 * 48)); } .globalIcon.spriteMask.dryclean:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(14 * 48)) 0; mask-position: calc(calc(100% / 1008) * calc(14 * 48)) 0; } .globalIcon.spriteMask.donotdryclean:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(14 * 48)) calc(calc(100% / 528) * calc(1 * 48)); mask-position: calc(calc(100% / 1008) * calc(14 * 48)) calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.spriteMask.useanysolvent:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(14 * 48)) calc(calc(100% / 528) * calc(2 * 48)); mask-position: calc(calc(100% / 1008) * calc(14 * 48)) calc(calc(100% / 528) * calc(2 * 48)); } .globalIcon.spriteMask.donotusepcesolvent:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(14 * 48)) calc(calc(100% / 528) * calc(3 * 48)); mask-position: calc(calc(100% / 1008) * calc(14 * 48)) calc(calc(100% / 528) * calc(3 * 48)); } .globalIcon.spriteMask.usepetrolsolventonly:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(14 * 48)) calc(calc(100% / 528) * calc(4 * 48)); mask-position: calc(calc(100% / 1008) * calc(14 * 48)) calc(calc(100% / 528) * calc(4 * 48)); } .globalIcon.spriteMask.wetclean:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(14 * 48)) calc(calc(100% / 528) * calc(5 * 48)); mask-position: calc(calc(100% / 1008) * calc(14 * 48)) calc(calc(100% / 528) * calc(5 * 48)); } .globalIcon.spriteMask.iron:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(15 * 48)) 0; mask-position: calc(calc(100% / 1008) * calc(15 * 48)) 0; } .globalIcon.spriteMask.ironmin:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(15 * 48)) calc(calc(100% / 528) * calc(1 * 48)); mask-position: calc(calc(100% / 1008) * calc(15 * 48)) calc(calc(100% / 528) * calc(1 * 48)); } .globalIcon.spriteMask.ironmed:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(15 * 48)) calc(calc(100% / 528) * calc(2 * 48)); mask-position: calc(calc(100% / 1008) * calc(15 * 48)) calc(calc(100% / 528) * calc(2 * 48)); } .globalIcon.spriteMask.ironmax:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(15 * 48)) calc(calc(100% / 528) * calc(3 * 48)); mask-position: calc(calc(100% / 1008) * calc(15 * 48)) calc(calc(100% / 528) * calc(3 * 48)); } .globalIcon.spriteMask.donotiron:after { -webkit-mask-position: calc(calc(100% / 1008) * calc(15 * 48)) calc(calc(100% / 528) * calc(4 * 48)); mask-position: calc(calc(100% / 1008) * calc(15 * 48)) calc(calc(100% / 528) * calc(4 * 48)); } /*********************/ /* schedule elements */ /*********************/ /* Related to global.schedule.setup(); */ /* Edited at 08.08.19. Elements are always hidden. */ /* Edited at 03.06.21. Added 'schedule'. */ [data-start-date], [data-end-date], [data-schedule]{ display: none; } /*******************************************/ /* display/hide elements to customergroups */ /*******************************************/ /* Related to global.customergroupFunctions.initialize(); */ /* Added at 17.08.20. Elements are always hidden. */ [data-display-to], [data-hide-from]{ display: none; } /********************/ /* replace elements */ /********************/ /* Related to global.element.replace(); */ [data-replace]{ display: none; } /**************/ /* image maps */ /**************/ /* Edited at 25.07.19. Added flexbox to arrange text in extra layer. */ /* Edited at 08.02.22. Added styling for flex aligning on mobile. */ /* Edited at 04.04.22. Added shadow to images in flex wrapper. */ .imageMapWrapper { position: relative; z-index: 1; } .imageMap { width: 100%; max-width: 100%; position: relative; margin: 0px auto; } .imageMap img { width: 100%; max-width: 100%; margin: 0px auto; display: block; z-index: 1; position: relative; } .imageMap .imgHolder { width: 100%; max-width: 100%; margin: 0px auto; display: block; z-index: 1; position: relative; background-repeat: no-repeat; background-size: contain; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; -webkit-background-size: contain; } .imageMap .areas { max-width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .imageMap .areas .svgWrapper { position: relative; width: 100%; height: 100%; } .imageMap .areas .svgWrapper > svg { position: absolute; top: 0; left: 0; } .imageMap .areas .svgWrapper > svg .subSvg{ overflow: visible; } .imageMap .areas a { display: block; z-index: 3; } .imageMap .areas a div { display: block; position: absolute; z-index: 2; } /* flexbox layer */ .imageMap .areas .flex { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .imageMap .areas .flex a { display: inline-block; position: static;} .imageMap .areas .flex > a.cta {} .imageMap .areas .flex > a.cta div { position: absolute; } .imageMap .areas .flex a div { position: static; } .imageMap .areas .flex.left { align-items: flex-start; padding-left: 20px; float: none; } .imageMap .areas .flex.right { align-items: flex-end; padding-right: 20px; float: none; } .imageMap .areas .flex.top { justify-content: flex-start; padding-top: 20px; } .imageMap .areas .flex.bottom { justify-content: flex-end; padding-bottom: 20px; } @media only screen and (min-width : 850px){ .imageMap .areas .flex.left { padding-left: 10px; } .imageMap .areas .flex.right { padding-right: 10px; } .imageMap .areas .flex.top { padding-top: 10px; } .imageMap .areas .flex.bottom { padding-bottom: 10px; } } .flex .imageMapWrapper .imgHolder[style*=".png"], .flex .imageMapWrapper .imgHolder[style*=".svg"] { -webkit-filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); } .flex.flat .imageMapWrapper .imgHolder[style*=".png"], .flex.flat .imageMapWrapper .imgHolder[style*=".svg"] { -webkit-filter: none; filter: none; } /* zoom effect */ @media only screen and (min-width : 850px){ [data-hover-fx="zoom"] { overflow: hidden; } [data-hover-fx="zoom"] > .imgHolder { -webkit-transition: all ease 0.6s; -moz-transition: all ease 0.6s; transition: all ease 0.6s; } [data-hover-fx="zoom"]:hover > .imgHolder, [data-hover-fx="zoom"].hover > .imgHolder, [data-hover-fx="zoom"]:focus > .imgHolder, [data-hover-fx="zoom"].focus > .imgHolder { transform: scale(1.05); } } @keyframes zoomLoop { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @-webkit-keyframes zoomLoop { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @media only screen and (min-width : 850px){ [data-hover-fx="zoomLoop"] { overflow: hidden; } [data-hover-fx="zoomLoop"] > .imgHolder {} [data-hover-fx="zoomLoop"]:hover > .imgHolder, [data-hover-fx="zoomLoop"].hover > .imgHolder, [data-hover-fx="zoomLoop"]:focus > .imgHolder, [data-hover-fx="zoomLoop"].focus > .imgHolder { -webkit-animation: zoomLoop 0.6s ease; animation: zoomLoop 0.6s ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } } /********/ /* ctas */ /********/ /* Edited at 19.08.19. Removed margin from first & last button. */ /* Edited at 24.09.19. Changed fontsize from 11px to 12px to meet 'bodycopy' ctas. */ /* Edited at 05.11.19. Added gold color. */ /* Edited at 20.11.19. Updated with flexbox. */ /* Edited at 06.08.20. Updated flexbox justify content. */ /* Edited at 20.07.21. Added 'inverse' styling. */ /* Edited at 21.07.21. Added 'equal' class and styling. */ /* Edited at 11.08.21. Added fix for vertical aligning buttons' text when it covers multiple lines of text. */ /* Edited at 13.08.21. Removed fix for vertical aligning butons' text. */ /* Edited at 04.01.21. Less padding in buttons for ctas on mobile on auto. */ /* Edited at 11.08.22. Added equal buttons variation 'peer' for mobile where buttons have 'auto' width. */ /* Edited at 08.11.22. Added large buttons. */ /* Edited at 07.02.23. Fixed mobile CTA width and text alignment. */ /* Edited at 13.03.23. Added 'ghost' variation. */ /* Edited at 05.04.23. Updated mobile button size. */ /* Edited at 21.06.23. Added 'print' button. */ /* Edited at 28.07.23. Updated alignment of buttons in flex based wrapper. */ /* buttons */ .bttns.ctas { display: flex; flex-direction: row; margin: 0 auto; z-index: 4; } .bttns.ctas.equal { display: flex; flex-direction: row; margin: 0 auto; } .bttns.ctas.peer { display: flex; flex-direction: row; margin: 0 auto; } .left .bttns.ctas { justify-content: start; margin: 0 auto 0 0; } .center .bttns.ctas { justify-content: center; margin: inherit; } .right .bttns.ctas { justify-content: end; margin: 0 0 0 auto; } .bttns.ctas .cta { padding: 15px 26px; background-color: #000; color: #fff; text-transform: uppercase; font-size: 12px; line-height: 1.2em; font-family: 'Futura PT W01 Heavy', arial, sans-serif; margin: 15px 5px; border-radius: 2px; text-decoration: none; transition: all ease .3s; -moz-transition: all ease .3s; -webkit-transition: all ease .3s; display: inline-flex !important; text-align: center; flex-direction: column; align-items: center; justify-content: center; } .inverse .bttns.ctas .cta { background-color: #fff; color: #000; } .bttns.ctas.gold .cta { color: #202020; background-color: #c5a534; } .bttns.ctas.ghost .cta { /* padding: 3px 5px; margin: 0 5px; */ color: #000; background-color: transparent; border: 1px solid #000; font-family: 'Futura PT W01 Book', arial, sans-serif; } .bttns.ctas.large .cta { padding: 20px 50px; font-family: 'Futura PT W01 Book', arial, sans-serif; } .bttns.ctas.large .cta b { font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .bttns.ctas .cta u { display: inline-block; vertical-align: middle; text-decoration: none; } .inverse .bttns.ctas.ghost .cta { color: #fff; border: 1px solid #fff; } [data-button-print] { cursor: pointer; } /* desktop only */ @media only screen and (min-width: 850px) { .bttns.ctas .cta:first-child { margin-left: 0; } .bttns.ctas .cta:last-child { margin-right: 0; } .bttns.ctas .cta:hover { background-color: #111; } .inverse .bttns.ctas .cta:hover { background-color: #f2f2f2; } .bttns.ctas.gold .cta:hover { background-color: #c5a534; } .bttns.ctas.ghost .cta:hover { background-color: #000; color: #fff; } .inverse .bttns.ctas.ghost .cta:hover { background-color: #fff; color: #000; } } /* mobile only */ @media only screen and (max-width: 850px) { .bttns.ctas { flex-direction: column; } .bttns.ctas .cta { margin: 5px 0; padding: 6px 3px; } .bttns.ctas .cta:first-child { margin-top: 10px; } .bttns.ctas .cta:last-child { margin-bottom: 10px; } .bttns.ctas .cta u { width: calc(100% - 10px); } .bttns.ctas.equal { flex-direction: row; flex-wrap: wrap; width: 100%; } .bttns.ctas.equal .cta { width: calc(50% - 10px); } .bttns.ctas.equal .cta:nth-child(1), .bttns.ctas.equal .cta:nth-child(3), .bttns.ctas.equal .cta:nth-child(2), .bttns.ctas.equal .cta:nth-child(4) { margin: 5px; } .bttns.ctas.peer { flex-direction: row; flex-wrap: wrap; width: 100%; } .bttns.ctas.peer .cta { width: auto; } .bttns.ctas.peer .cta:nth-child(1), .bttns.ctas.peer .cta:nth-child(3), .bttns.ctas.peer .cta:nth-child(2), .bttns.ctas.peer .cta:nth-child(4) { margin: 5px; } .bttns.ctas.large .cta { padding: 20px 50px; } .bttns.ctas.large.equal .cta { padding: 20px 0; } } /*******************/ /* responsive text */ /*******************/ /* Edited at 12.06.20. Added variations to position rtContainer. Not finished yet! */ .rtWrapper { position: relative; } .rtContainer { position: absolute; } .rtContainer [data-responsive-text] { display: none; } .rtContainer p { position: relative; text-align: center; margin: 0; } .rtContainer p .cta { color: #262626; border-color: #262626; border-style: solid; } .rtContainer p .cta.invert { color: #fff; border-color: #fff; border-style: solid; } .rtContainer.left { } .rtContainer.center { } .rtContainer.right { } /********/ /* tabs */ /********/ [data-tab] {} [data-tab-content] { height: 0; overflow: hidden; } [data-tab-show-on-trigger] { display: none; } /*********************/ /* expandable banner */ /*********************/ /* Added at 12.07.21. */ /* Edited at 13.07.21. Updated transition time. */ /* Edited at 21.07.21. Added loader layer. */ [data-expandable-wrapper] { position: relative; overflow: hidden; width: 100%; -webkit-transition: all ease .8s; transition: all ease .8s; } [data-expandable-wrapper] [data-expandable-loader] { position: absolute; display: none; top: 0 ; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6) url(../icons/2021_HL08/loader.gif) center center no-repeat; z-index: 99; } [data-expandable-wrapper] .inverse[data-expandable-loader] { background: rgba(255,255,255,0.8) url(../icons/2021_HL04/loader.gif) center center no-repeat; } [data-expandable-wrapper] [data-expandable-content] { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } [data-expandable-wrapper] [data-expandable-content] [data-hide-while-contracted] { display: none; } [data-expandable-wrapper] [data-expandable-content] [data-hide-while-expanded] { display: block; } .expand[data-expandable-wrapper] [data-expandable-content] [data-hide-while-contracted] { display: block; } .expand[data-expandable-wrapper] [data-expandable-content] [data-hide-while-expanded] { display: none; } [data-expandable-wrapper] [data-expandable-trigger] {} /**********/ /* videos */ /**********/ /* Added at 30.03.18. */ /* Edited at 30.03.18. */ /* Edited at 09.04.20. Added unmute/mute button. */ /* Edited at 13.08.21. Added iframe styling for Vimeo videos. */ /* Edited at 02.12.21. Added unmute/mute button for Vimeo videos. */ /* Edited at 19.04.23. Updated styling to be able to fit video better. */ .videoHolder { overflow: hidden; } .videoHolder .videoWrapper { position: relative; width: 100%; height: 100%; } .videoHolder .videoWrapper .videoContainer { position: relative; padding-top: 54.3%; height: 0; overflow: hidden; } .videoHolder .videoWrapper .videoContainer iframe, .video-container object, .video-container embed { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; max-height: 100%; } .videoHolder .videoWrapper video { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; max-height: 100%; } [data-unmute] { position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; background-image: url('../icons/2020_HL05/unmute-white.svg'); background-repeat: no-repeat; background-position: center; background-size: 100%; z-index: 1; cursor: pointer; } .active[data-unmute] { background-image: url('../icons/2020_HL05/mute-white.svg'); } /* vimeo */ .videoHolder iframe[data-video-src] { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .videoControlWrapper { position: absolute; top: 20px; right: 20px; z-index: 2; } .videoControlWrapper .videoControl.mute { cursor: pointer; } /* background video */ .videoHolder iframe[data-video-src*="&background=1"] { width: calc(100% + 4px); height: calc(100% + 4px); top: -2px; left: -2px; } /**********************/ /* product thumbnails */ /**********************/ /* Added at 15.04.21. This is supposed to be used for interactive videos. */ /* Edited at 10.06.21. Added shadow to product thumbnails. */ /* Edited at 09.07.21. Added loader icon. */ .imageMap .areas[data-product-thumbnails] { top: 0; left: 85%; width: 15%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; padding: 10px; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile { display: none; opacity: 0; -webkit-transform: translatex(100%); transform: translatex(100%); transition: all .3s ease-in-out; position: relative; margin-bottom: 10px; width: calc(100% - 20px); box-shadow: 0 3px 4px rgb(0 0 0 / 55%); } .imageMap .areas[data-product-thumbnails] .productThumbnailTile.active { -webkit-transform: translatex(0); transform: translatex(0); opacity: 1; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail { background: url(../icons/2021_HL04/loader.gif) center center no-repeat; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap { overflow: hidden; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap [data-image] { opacity: 1; transition: all .3s ease-in-out; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap [data-image-hover] { opacity: 0; transition: all .3s ease-in-out; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap .areas .imgHolder { position: absolute; top: 0; left: 0; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap .areas .product-swatches { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; background-color: rgba(255,255,255,0.85); padding: 5px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translatey(100%); transition: all .3s ease-in-out; transition-delay: 0.3s; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap .areas .product-swatches p.bodycopy { text-align: center; margin: 5px 0; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap .areas .promotion { position: absolute; bottom: 1.5em; left: 0; z-index: 2; width: auto; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap .areas .promotion.fluid { transition: all .3s ease-in-out; transition-delay: 0.3s; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap .areas .product-love { opacity: 1; z-index: 2; top: 10px; left: 10px; position: absolute; transition: all .3s ease-in-out; transition-delay: 0.3s; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap .areas .product-love a { opacity: 0; display: inline-block; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail.initialized > .imageMap .areas .product-love a { opacity: 1; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap .areas a .promotion div { position: relative; width: auto; } /* hide specific product details */ .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap .areas .product-swatches, .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap .areas .promotion { display: none; } @media only screen and (min-width: 1024px){ /* .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap:hover [data-image] { opacity: 0; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap:hover [data-image-hover] { opacity: 1; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap:hover .areas .product-swatches { opacity: 1; transform: translatey(0); } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap:hover .areas .promotion.fluid { bottom: 46px; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap:hover .areas .product-love { opacity: 1; } */ } @media only screen and (max-width: 1024px){ .imageMap .areas[data-product-thumbnails] { left: 66.66%; width: 33.33%; } .imageMap .areas[data-product-thumbnails] .productThumbnailTile .productThumbnail > .imageMap .areas .product-love { opacity: 1; } } /***************/ /* scroll icon */ /***************/ /* Added at 20.11.19. */ /* Edited at 05.12.19. Changed size for mobile. */ /* Edited at 30.12.20. Added inverse variation. */ /* Edited at 15.02.23. Updated styling to flexbox. */ .scrollIconWrapper { width: 100%; height: 50px; display: flex; flex-direction: row; align-items: center; justify-content: center; } .scrollIconWrapper > a { display: block; } .scrollIconWrapper > a .scrollIcon { display: block; position: relative; width: 14px; height: 14px; animation-name: scrollIcon; -webkit-animation-name: scrollIcon; animation-duration: 1.0s; -webkit-animation-duration: 1.0s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } .scrollIconWrapper > a .scrollIcon:before, .scrollIconWrapper > a .scrollIcon:after { content: ''; display: block; width: 14px; height: 14px; border: 2px solid #000; border-top: 0; border-right: 0; -webkit-transform: translatex(50%) rotate(-45deg); transform: translatex(50%) rotate(-45deg); } .inverse .scrollIconWrapper > a .scrollIcon:before, .inverse .scrollIconWrapper > a .scrollIcon:after { border: 2px solid #fff; border-top: 0; border-right: 0; } .scrollIconWrapper > a .scrollIcon:before { } .scrollIconWrapper > a .scrollIcon:after { -webkit-transform: translatex(50%) translatey(-50%) rotate(-45deg); transform: translatex(50%) translatey(-50%) rotate(-45deg); } @-webkit-keyframes scrollIcon { 0% { -webkit-transform: translate(-50%, -70%); } 50% { -webkit-transform: translate(-50%, -30%); } 100% { -webkit-transform: translate(-50%, -70%); } } @keyframes scrollIcon { 0% { transform: translate(-50%, -70%); } 50% { transform: translate(-50%, -40%); } 100% { transform: translate(-50%, -70%); } } @media only screen and (max-width: 850px) { .scrollIconWrapper {} .scrollIconWrapper > a .scrollIcon:before, .scrollIconWrapper > a .scrollIcon:after { width: 12px; height: 12px; } } /***********/ /* buttons */ /***********/ /* Added at 03.02.23. */ .mimic-button { display: inline-block; font-family: Futura PT W01 Heavy; border: 0; border-radius: 0; font-size: 12px; letter-spacing: 1px; text-align: center; text-transform: uppercase; padding: 15px 25px; color: #fff; cursor: pointer; width: 100%; height: auto; transition: border-color .25s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out; } .mimic-button-black { background: #000; color: #fff; transition: none; width: auto; } .mimic-button-black:hover { background: linear-gradient(#9a9a9a,#000); color: #fff; } /************************************************************************* 02.0 Components *************************************************************************/ /************************/ /* Countdown variations */ /************************/ /* Edited at 15.06.20. Added more generic styling. Removed old styling. */ .countdown { width: 100%; height: 8.5%; display: flex; flex-direction: row; justify-content: center; } .countdown p.bodycopy { font-family: 'Futura PT W01 heavy', arial, sans-serif; letter-spacing: 0.1em; } .countdown p.bodycopy b { font-family: 'Futura PT W01 bold', arial, sans-serif; } @media only screen and (max-width: 850px) { [data-mobile-visible] .countdown { height: 12%; flex-direction: column; } } @media only screen and (max-width: 1024px) { [data-tablet-mobile-visible] .countdown { height: 12%; flex-direction: column; } } /*************************/ /* dynamic delivery time */ /*************************/ /* Added at 02.12.19. Added functionality to content.js. */ /* Edited at 23.06.20. Removed letterspacing. */ [data-dynamic-delivery-time] { display: inline !important; } /*******************/ /* cycle slideshow */ /*******************/ /* Edited at 17.07.19. Turned background of navigation into separate css statements. Removed 'force' variation. Moved 'hover' styles to desktop only. */ /* Edited at 24.02.20. Added external navigation arrows. */ /* Edited at 30.03.20. Removed 'flex' from '[data-cycle-fx="carousel"] .cycle-carousel-wrap' . */ /* Edited at 21.04.20. Added fix to '[data-cycle-fx="carousel"] .cycle-carousel-wrap' to vertical align child elements. */ /* Edited at 29.10.20. Added 'timeline' styling. */ /* Edited at 24.03.21. Added class to categoryPageSlider slide to add a border to an image. */ /* Edited at 06.04.22. Added 'slide indicator'. */ /* Edited at 11.05.23. Added external navigation pager styling. */ /* global */ .cycle-slideshow { width: 100%; margin: 0 auto; } /* slides */ .cycle-slideshow .cycle-slide.imageMap { overflow: hidden; } /* navigation */ .cycle-slideshow .cycle-nav { position: absolute; top: calc(50% - 19px); width: 38px; height: 38px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; cursor: pointer; z-index: 150; } .cycle-slideshow .cycle-prev { left: 0; background-color: transparent; background-image: url('../icons/sprite-left-right-nav.png?$staticlink$'); background-position: 0 0; background-repeat: no-repeat; } .cycle-slideshow .cycle-next { right: 0; background-color: transparent; background-image: url('../icons/sprite-left-right-nav.png?$staticlink$'); background-position: -38px 0; background-repeat: no-repeat; } .cycle-slideshow .inverse.cycle-prev { left: 0; background-color: transparent; background-image: url('../icons/sprite-left-right-nav-hover.png?$staticlink$'); background-position: 0 0; background-repeat: no-repeat; opacity: 0.5; } .cycle-slideshow .inverse.cycle-next { right: 0; background-color: transparent; background-image: url('../icons/sprite-left-right-nav-hover.png?$staticlink$'); background-position: -38px 0; background-repeat: no-repeat; opacity: 0.5; } @media only screen and (min-width: 850px) { .cycle-slideshow .cycle-prev:hover { background-color: rgba(255,255,255,1.0); background-image: url('../icons/sprite-left-right-nav-hover.png?$staticlink$'); background-position: 0 0; background-repeat: no-repeat; } .cycle-slideshow .cycle-next:hover { background-color: rgba(255,255,255,1.0); background-image: url('../icons/sprite-left-right-nav-hover.png?$staticlink$'); background-position: -38px 0; background-repeat: no-repeat; } .cycle-slideshow .inverse.cycle-prev:hover { background-color: rgba(255,255,255,1.0); background-image: url('../icons/sprite-left-right-nav-hover.png?$staticlink$'); background-position: 0 0; background-repeat: no-repeat; opacity: 1.0; } .cycle-slideshow .inverse.cycle-next:hover { background-color: rgba(255,255,255,1.0); background-image: url('../icons/sprite-left-right-nav-hover.png?$staticlink$'); background-position: -38px 0; background-repeat: no-repeat; opacity: 1.0; } } /* pager */ .cycle-slideshow .cycle-custom-pager { position: absolute; bottom: 0; left: 50%; -moz-transform: translatex(-50%); -webkit-transform: translatex(-50%); transform: translatex(-50%); z-index: 150; text-align: center; } .cycle-slideshow .cycle-custom-pager .dot-container { padding: 9px 0 5px 0; width: 25px; display: inline-block; cursor: pointer; } .cycle-slideshow .cycle-custom-pager .dot-container .dot { background-color: rgba(34,2,0,0.25); width: 13px; height: 13px; -moz-border-radius: 8px; border-radius: 8px; display: inline-block; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .cycle-slideshow .cycle-custom-pager .cycle-pager-active .dot { background-color: rgba(34,2,0,1); } .cycle-slideshow .cycle-custom-pager.general .dot-container .dot { background-color: rgba(255,255,255,0.25); width: 13px; height: 13px; -moz-border-radius: 8px; border-radius: 8px; display: inline-block; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .cycle-slideshow .cycle-custom-pager.general .cycle-pager-active .dot { background-color: rgba(255,255,255,1); } .cycle-slideshow .cycle-custom-pager.inverse .dot-container .dot { background-color: rgba(34,2,0,0.25); width: 13px; height: 13px; -moz-border-radius: 8px; border-radius: 8px; display: inline-block; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .cycle-slideshow .cycle-custom-pager.inverse .cycle-pager-active .dot { background-color: rgba(34,2,0,1); } @media only screen and (min-width: 850px) { .cycle-slideshow .cycle-custom-pager .dot-container:hover .dot { background-color: rgba(34,2,0,1); } .cycle-slideshow .cycle-custom-pager.general .dot-container:hover .dot { background-color: rgba(255,255,255,1); } .cycle-slideshow .cycle-custom-pager.inverse .dot-container:hover .dot { background-color: rgba(34,2,0,1); } } /* slide indicator */ .cycle-slideshow .cycle-slide-indicator { display: flex; flex-direction: row; align-items: center; justify-content: center; position: absolute; bottom: 0; left: 50%; -moz-transform: translatex(-50%); -webkit-transform: translatex(-50%); transform: translatex(-50%); z-index: 150; text-align: center; width: 100%; } .cycle-slideshow .cycle-slide-indicator .cycle-prev, .cycle-slideshow .cycle-slide-indicator .cycle-next { cursor: pointer; width: 38px; height: 38px; } .cycle-slideshow .cycle-slide-indicator .cycle-prev { margin-right: 10px; } .cycle-slideshow .cycle-slide-indicator .cycle-next { margin-left: 10px; } /* external navigation */ .cycle-nav-external-wrapper { position: relative; padding: 0 38px; } .cycle-nav-external { position: absolute; top: calc(50% - 19px); width: 38px; height: 38px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; cursor: pointer; z-index: 150; } .cycle-nav-external.cycle-prev { left: 0; background-color: transparent; background-image: url('../icons/sprite-left-right-nav.png?$staticlink$'); background-position: 0 0; background-repeat: no-repeat; } .cycle-nav-external.cycle-next { right: 0; background-color: transparent; background-image: url('../icons/sprite-left-right-nav.png?$staticlink$'); background-position: -38px 0; background-repeat: no-repeat; } .cycle-nav-external.inverse.cycle-prev { left: 0; background-color: transparent; background-image: url('../icons/sprite-left-right-nav-hover.png?$staticlink$'); background-position: 0 0; background-repeat: no-repeat; opacity: 0.5; } .cycle-nav-external.inverse.cycle-next { right: 0; background-color: transparent; background-image: url('../icons/sprite-left-right-nav-hover.png?$staticlink$'); background-position: -38px 0; background-repeat: no-repeat; opacity: 0.5; } @media only screen and (min-width: 850px) { .cycle-nav-external.cycle-prev:hover { background-color: rgba(255,255,255,1.0); background-image: url('../icons/sprite-left-right-nav-hover.png?$staticlink$'); background-position: 0 0; background-repeat: no-repeat; } .cycle-nav-external.cycle-next:hover { background-color: rgba(255,255,255,1.0); background-image: url('../icons/sprite-left-right-nav-hover.png?$staticlink$'); background-position: -38px 0; background-repeat: no-repeat; } .cycle-nav-external.inverse.cycle-prev:hover { background-color: rgba(255,255,255,1.0); background-image: url('../icons/sprite-left-right-nav-hover.png?$staticlink$'); background-position: 0 0; background-repeat: no-repeat; opacity: 1.0; } .cycle-nav-external.inverse.cycle-next:hover { background-color: rgba(255,255,255,1.0); background-image: url('../icons/sprite-left-right-nav-hover.png?$staticlink$'); background-position: -38px 0; background-repeat: no-repeat; opacity: 1.0; } } .cycle-nav-external-wrapper .cycle-pager-external {} .cycle-nav-external-wrapper .cycle-pager-external.cycle-custom-pager { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; margin-top: 10px; } .cycle-nav-external-wrapper .cycle-pager-external.cycle-custom-pager .dot-container { display: flex; justify-content: center; align-items: center; width: 22px; height: 22px; padding: 0; cursor: pointer; } .cycle-nav-external-wrapper .cycle-pager-external.cycle-custom-pager .dot-container .dot { background-color: rgba(34,2,0,0.25); width: 13px; height: 13px; -moz-border-radius: 8px; border-radius: 8px; display: inline-block; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .cycle-nav-external-wrapper .cycle-pager-external.cycle-custom-pager .cycle-pager-active .dot { background-color: rgba(34,2,0,1); } .cycle-nav-external-wrapper .cycle-pager-external.cycle-custom-pager.general .dot-container .dot { background-color: rgba(255,255,255,0.25); width: 13px; height: 13px; -moz-border-radius: 8px; border-radius: 8px; display: inline-block; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .cycle-nav-external-wrapper .cycle-pager-external.cycle-custom-pager.general .cycle-pager-active .dot { background-color: rgba(255,255,255,1); } .cycle-nav-external-wrapper .cycle-pager-external.cycle-custom-pager.inverse .dot-container .dot { background-color: rgba(34,2,0,0.25); width: 13px; height: 13px; -moz-border-radius: 8px; border-radius: 8px; display: inline-block; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .cycle-nav-external-wrapper .cycle-pager-external.cycle-custom-pager.inverse .cycle-pager-active .dot { background-color: rgba(34,2,0,1); } @media only screen and (min-width: 850px) { .cycle-nav-external-wrapper .cycle-pager-external.cycle-custom-pager .dot-container:hover .dot { background-color: rgba(34,2,0,1); } .cycle-nav-external-wrapper .cycle-pager-external.cycle-custom-pager.general .dot-container:hover .dot { background-color: rgba(255,255,255,1); } .cycle-nav-external-wrapper .cycle-pager-external.cycle-custom-pager.inverse .dot-container:hover .dot { background-color: rgba(34,2,0,1); } } /* related elements */ [data-cycle-related] { display: none; } /* carousel overlay */ .navigation-overlay { position: relative; z-index: 149; } .navigation-overlay > .imageMap { z-index: 120; position: absolute; top: 0; left: 0; width: 100%; -ms-transform: translatey(-100%); -webkit-transform: translatey(-100%); -moz-transform: translatey(-100%); -o-transform: translatey(-100%); transform: translatey(-100%); } /* centered slide carousel */ .centeredSlideCarousel.cycle-slideshow .cycle-slide.cycle-sentinel { opacity: 0 !important; width: 80% !important; margin: 0 10% !important; } .centeredSlideCarousel.cycle-slideshow .cycle-carousel-wrap { overflow: visible !important; width: 80%; margin: 0 10% !important; } .centeredSlideCarousel.cycle-slideshow .cycle-carousel-wrap .cycle-slide { width: 100% !important; } /* carousels */ .homePageSlider, .categoryMainSlider, .categoryPageSlider { position: relative; width: 100%; margin: 0px; overflow: hidden; z-index: 1; } /* category page carousel */ .categoryPageSlider .slide .areas.stroke { border: 5px solid #fff; } /* vertical align slides of carousel */ .cycle-slideshow[data-cycle-fx="carousel"] .cycle-carousel-wrap > * { vertical-align: top; } .cycle-slideshow[data-cycle-fx="carousel"] .cycle-slide .cycle-slide-content { margin: 0 auto; } /* timeline */ .cycle-timeline { position: absolute; top: calc(100% - 40px); left: 20px; width: calc(100% - 40px); height: 1px; background: #000; z-index: 150; } .cycle-timeline.inverse { background: #fff; } .cycle-timeline .cycle-indicator { position: absolute; top: 0; left: 20px; width: 3px; height: 31px; background: #000; -webkit-transform: translatey(-50%); transform: translatey(-50%); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .cycle-timeline.inverse .cycle-indicator { background: #fff; } /**********/ /* swiper */ /**********/ /* Added at 24.04.23. */ [data-swiper] { width: 100%; position: relative; overflow: hidden; } [data-swiper] .swiper-wrapper {} [data-swiper] .swiper-wrapper .swiper-slide { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } /* navigation */ [data-swiper] .swiper-prev, [data-swiper] .swiper-next { width: 38px; height: 38px; position: absolute; top: 50%; transform: translatey(-100%); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; background-color: rgba(255,255,255,0.8); z-index: 1; cursor: pointer; } [data-swiper] .swiper-prev:after, [data-swiper] .swiper-next:after { content: ""; display: block; width: 14px; height: 14px; position: absolute; top: 50%; left: 50%; border: 2px solid #000; border-top: 0; border-left: 0; } [data-swiper] .swiper-prev { left: 0; } [data-swiper] .swiper-prev:after { transform: rotate(-225deg) translate(-2px,7px); } [data-swiper] .swiper-next { right: 0; } [data-swiper] .swiper-next:after { transform: rotate(-45deg) translate(-1px,-10px); } /* desktop only */ @media only screen and (min-width: 850px) { [data-swiper] .swiper-prev:hover, [data-swiper] .swiper-next:hover { background-color: rgba(255,255,255,1.0); } } /* pager */ [data-swiper] .swiper-pager { display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 10px; padding: 10px 0; } [data-swiper] .swiper-pager .swiper-pagination-bullet { display: block; margin: 0 5px; background-color: rgba(34,2,0,0.25); width: 13px; height: 13px; border-radius: 50%; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; cursor: pointer; } [data-swiper] .swiper-pager .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: rgba(34,2,0,1); } @media only screen and (min-width: 850px) { [data-swiper] .swiper-pager .swiper-pagination-bullet:hover { background-color: rgba(34,2,0,1); } } /*********/ /* popup */ /*********/ /* Edited at 09.08.18. */ /* Edited at 13.08.19. Updated typography of student signup popup. */ /* Edited at 29.01.20. Added some specific styling. */ /* Edited at 11.03.21. Replaced loader icon. */ /* Edited at 26.04.23. Added vimeoPopup. Replaced close icon by css equivalent. */ .popupNotificationContent { position: absolute; top: 0; left: -999999; display: none; } .popupNotificationWrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; } .popupNotificationWrapper .popupNotificationOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); cursor: pointer; z-index: 1; } .popupNotificationWrapper .popupNotificationOverlay.lite { background: rgba(255, 255, 255, 0.5); transition: all ease 0.3s; -webkit-transition: all ease 0.3s; } .popupNotificationWrapper .popupNotificationContainer { position: absolute; top: 50%; left: 50%; width: 100%; max-width: 850px; cursor: initial; transform: translatex(-50%) translatey(-50%); -moz-transform: translatex(-50%) translatey(-50%); -webkit-transform: translatex(-50%) translatey(-50%); z-index: 2; } .popupNotificationWrapper .popupNotificationContainer .popupNotification { background: url(../icons/2021_HL04/loader.gif) center center no-repeat rgba(255, 255, 255, 1.0); margin: 0 30px; box-sizing: border-box; } .popupNotificationWrapper .popupNotificationContainer .popupNotification iframe { width: 100%; background: #fff; } .popupNotificationWrapper .popupNotificationContainer .popupNotificationClose { position: absolute; top: 15px; right: 45px; width: 30px; height: 30px; cursor: pointer; z-index: 2; } .popupNotificationWrapper .popupNotificationContainer .popupNotificationClose:before, .popupNotificationWrapper .popupNotificationContainer .popupNotificationClose:after { content: ""; display: block; width: 17px; height: 2px; background-color: #000; } .popupNotificationWrapper .popupNotificationContainer .popupNotificationClose:before { -ms-transform: translate(6px, 13px) rotate(-45deg); -webkit-transform: translate(6px, 13px) rotate(-45deg); transform: translate(6px, 13px) rotate(-45deg); } .popupNotificationWrapper .popupNotificationContainer .popupNotificationClose:after { -ms-transform: translate(6px, 11px) rotate(45deg); -webkit-transform: translate(6px, 11px) rotate(45deg); transform: translate(6px, 11px) rotate(45deg); } @media only screen and (max-width : 850px){ .popupNotificationWrapper .popupNotificationContainer { position: absolute; width: 95%; max-height: 100%; cursor: initial; } .popupNotificationWrapper .popupNotificationContainer .popupNotification { margin: 0; } .popupNotificationWrapper .popupNotificationContainer .popupNotificationClose { top: 0; right: 10px; transform: translatey(-100%); -webkit-transform: translatey(-100%); } .popupNotificationWrapper .popupNotificationContainer .popupNotificationClose:before, .popupNotificationWrapper .popupNotificationContainer .popupNotificationClose:after { background-color: #fff; } } /* ios devices */ .ua_ios .popupNotificationWrapper .popupNotificationContainer .popupNotification { position: relative; overflow: auto; -webkit-overflow-scrolling: touch; padding-top: 65%; } .ua_ios .popupNotificationWrapper .popupNotificationContainer .popupNotification iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (max-width : 850px){ .ua_ios .popupNotificationWrapper .popupNotificationContainer .popupNotification { padding-top: 125%; } } /* student signup */ #studentSignupPopupWrapper {} .studentSignupPopup { background: #fff; } .studentSignupPopup .studentSignupPopupContent { padding: 30px; } .studentSignupPopup .studentSignupPopupContent h3.heading span.yellow { display: block; color: #FCC42F; } .studentSignupPopup .studentSignupPopupContent p.bodycopy { margin: 0; } .studentSignupPopup .studentSignupPopupContent p.bodycopy a { background-color: #000; border: 1px solid #000; border-radius: 2px; color: #fff; font-family: 'Futura PT W01 Heavy', arial, sans-serif; font-size: 14px; letter-spacing: .8px; padding: 14px; text-align: center; text-decoration: none; text-transform: uppercase; vertical-align: middle; font-size: 12px; padding: 15px 26px; display: inline-block; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; margin: 10px; } @media only screen and (min-width : 850px){ .studentSignupPopup .studentSignupPopupContent p.bodycopy a:hover { background-color: #fff; color: #000; } } /* extra styling */ .popupNotificationWrapper.vimeoPopup .popupNotificationContainer { max-width: 1310px; } /************/ /* hotspots */ /************/ /* Edited at 18.06.19. */ /* Edited at 18.07.19. Added transform to hotspot. Fixed alignment of '+'. Removed '.imageMap .areas' to make hotspots more usable in other elements. */ /* Edited at 12.08.19. Made hotspots bigger. */ /* Edited at 20.05.20. Made hotspots on mobile smaller, but still easy to click on. */ /* Edited at 11.11.20. Added 'hint' to rich hotspots' functionality. */ /* Edited at 12.11.20. Fixed some styling for hints. */ /* Edited at 19.11.20. Added promotion sticker(s) to hint. */ /* Edited at 04.01.21. Added styling for featured hint on mobile. */ /* Edited at 28.01.21. Added specific styling when wrapper is animated. */ /* Edited at 01.02.21. Updated styling for mobile. */ /* Edited at 05.02.21. Added text color for hint. */ /* Edited at 17.08.21. Added styling for images. */ /* Edited at 27.08.21. Added extra padding to hint. */ /* Edited at 09.05.23. Removed transformation from product URL hotspot. */ .product-url .hotspot { position: absolute; z-index: 2; } .product-url .hotspot:before { content: "+"; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; font-size: 28px; background: rgba(0,0,0,0.6); text-align: center; } .product-url .hotspot.inverse:before { background: rgba(255,255,255,0.6); color: #000; } .imageMap .areas a.product-url .hotspotWrapper { position: absolute; } .imageMap .areas a.product-url .hotspotWrapper .hotspot { top: 0; left: 0; } .imageMap .areas a.product-url .hotspotWrapper .hint { position: absolute; background-color: #fff; padding: 10px 25px 10px 15px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; display: none; box-shadow: 0 1px 4px rgba(0,0,0,0.55); min-width: 175px; z-index: 2; } .imageMap .areas a.product-url .hotspotWrapper.featured .hint { display: block; } .imageMap .areas a.product-url .hotspotWrapper .hint .imageMapWrapper { position: relative; width: 100%; max-width: 80px; margin: 0 auto 10px; background: url(../icons/2021_HL04/loader.gif) center center no-repeat rgba(255, 255, 255, 0.5); } .imageMap .areas a.product-url .hotspotWrapper .hint .imageMapWrapper .imageMap { position: relative; } .imageMap .areas a.product-url .hotspotWrapper .hint .imageMapWrapper .imageMap .imgHolder { position: relative; padding-top: 150%; } .imageMap .areas a.product-url .hotspotWrapper .hint .globalIcon { position: absolute; top: 15px; right: 10px; } .imageMap .areas a.product-url .hotspotWrapper .hint .promotions { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-bottom: 10px; } .imageMap .areas a.product-url .hotspotWrapper .hint .promotions div { position: relative; } .imageMap .areas a.product-url .hotspotWrapper .hint .promotions div.stickerWrapper { margin-right: 5px; } .imageMap .areas a.product-url .hotspotWrapper .hint .promotions div.stickerWrapper:first-child { margin-top: 0; } .imageMap .areas a.product-url .hotspotWrapper .hint .promotions div.stickerWrapper .sticker { margin-top: 5px; } .imageMap .areas a.product-url .hotspotWrapper .hint.floatLeft { top: 50%; left: -10px; -webkit-transform: translate(-100%,-50%); transform: translate(-100%,-50%); } .imageMap .areas a.product-url .hotspotWrapper .hint.floatLeft:after { top: 0; left: 100%; width: 20px; height: 100%; } .imageMap .areas a.product-url .hotspotWrapper .hint.floatRight { top: 50%; left: calc(100% + 10px); -webkit-transform: translate(0,-50%); transform: translate(0,-50%); } .imageMap .areas a.product-url .hotspotWrapper .hint.floatRight:after { top: 0; left: -20px; width: 20px; height: 100%; } .imageMap .areas a.product-url .hotspotWrapper .hint.floatTop { top: -10px; left: 50%; -webkit-transform: translate(-50%,-100%); transform: translate(-50%,-100%); } .imageMap .areas a.product-url .hotspotWrapper .hint.floatTop:after { top: 100%; left: 0; width: 100%; height: 20px; } .imageMap .areas a.product-url .hotspotWrapper .hint.floatBottom { top: calc(100% + 10px); left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); } .imageMap .areas a.product-url .hotspotWrapper .hint.floatBottom:after { top: -20px; left: 0; width: 100%; height: 20px; } .imageMap .areas a.product-url .hotspotWrapper .hint span.hSpace { width: 100%; margin-top: 10px; display: block; } .imageMap .areas a.product-url .hotspotWrapper .hint p.bodycopy { color: #000; margin: 0; text-align: left; } /* desktop only */ @media only screen and (min-width: 850px) { .product-url .hotspot { width: 48px; height: 48px; border-radius: 24px; } .product-url .hotspot:before { width: 38px; height: 38px; border-radius: 19px; line-height: 38px; } .product-url .hotspot:hover:before { background: rgba(0,0,0,1); } .product-url .hotspot.inverse:hover:before { background: rgba(255,255,255,1); } .imageMap .areas a.product-url .hotspotWrapper { width: 48px; height: 48px; } .imageMap .areas a.product-url .hotspotWrapper:hover, .imageMap .areas a.product-url .hotspotWrapper:active { z-index: 3; } .imageMap .areas a.product-url .hotspotWrapper:hover .hint, .imageMap .areas a.product-url .hotspotWrapper:active .hint, .imageMap .areas a.product-url .hotspotWrapper .hint:hover, .imageMap .areas a.product-url .hotspotWrapper .hint:active { display: block; } .imageMap .areas a.product-url .hotspotWrapper .hint:after { content: ''; position: absolute; } .imageMap .areas:hover a.product-url .hotspotWrapper.featured .hint { display: none; } .imageMap .areas:hover a.product-url .hotspotWrapper.featured:hover .hint, .imageMap .areas:hover a.product-url .hotspotWrapper.featured .hint:hover { display: block; } } /* mobile only */ @media only screen and (max-width: 850px) { .product-url .hotspot { width: 28px; height: 28px; border-radius: 14px; } .product-url .hotspot:before { width: 28px; height: 28px; border-radius: 14px; line-height: 28px; } .imageMap .areas a.product-url .hotspotWrapper { width: 28px; height: 28px; } .imageMap .areas a.product-url .hotspotWrapper.active { z-index: 3; } .imageMap .areas a.product-url .hotspotWrapper .hint { padding: 8px; } .imageMap .areas a.product-url .hotspotWrapper.active .hint { display: block; } .imageMap .areas a.product-url .hotspotWrapper .hint .globalIcon { top: 7.5px; right: 5px; } .imageMap .areas a.product-url .hotspotWrapper .hint span.hSpace { margin-top: 5px; } .imageMap .areas a.product-url .hotspotWrapper .hint .promotions { margin-bottom: 8px; } .imageMap .areas a.product-url .hotspotWrapper .hint .promotions div.stickerWrapper .sticker { margin-top: 3px; } .imageMap .areas a.product-url .hotspotWrapper .hint p.bodycopy { line-height: 16px; } } /* specific styling for animated hotspots */ [data-animate*="fadeIn"] > [data-rich-hotspots] { display: none; } .fadeIn[data-animate*="fadeIn"] > [data-rich-hotspots] { display: block; } .fadeIn.fadeOut[data-animate*="fadeIn"] > [data-rich-hotspots] { display: block; } .fadeOut[data-animate*="fadeIn"] > [data-rich-hotspots] { display: none; } /*****************/ /* wish hotspots */ /*****************/ /* Added at 14.04.21. */ /* Edited at 10.03.22. Removed initialized class. */ .wishHotspot { position: absolute; z-index: 2; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; width: 26px; height: 22px; overflow: hidden; } .wishHotspot.inverse .product-lovebutton:before { background-position: -174px -308px; } .wishHotspot.inverse .product-lovedbutton:before { background-position: -144px -308px; } /****************/ /* hotspot urls */ /****************/ /* Edited at 14.06.19. Should always consist of a class selector. Not only 'a' element! */ a.product-url[href=""], a.product-url:not([href]) { display: none !important; } /************/ /* stickers */ /************/ /* Edited at 07.03.18. */ /* Edited at 25.11.19. Added clickable variation. */ /* Edited at 19.02.20. Added fix for pdp overlay (quickview). */ /* Edited at 16.06.20. Renamed 'oval' to 'ellipse'. */ /* Edited at 17.06.20. Fixed ellipse text position. */ /* Edited at 16.07.20. Modified ellipse variation size. Fixed position on pdp (mobile). */ /* Edited at 07.05.21. Updated saltyDog stickers. */ /* Edited at 07.02.23. Updated styling to fit replatforming. */ /* Edited at 08.03.23. Updated font size on mobile. */ /* general */ .stickerWrapper { display: block; position: relative; } .stickerWrapper.ellipse {} .stickerWrapper a { text-decoration: none; cursor: pointer; } .product-promotions .content-asset .stickerWrapper:first-child { margin-top: 18px; } .product-tile .stickerWrapper.ellipse { margin-left: 15px; } .stickerWrapper.ellipse:first-child { margin-top: 10px; margin-right: 10px; } .stickerWrapper .sticker { background: #000; margin-top: 8px; } .stickerWrapper.ellipse .sticker { border-radius: 50%; width: 65px; height: 65px; position: relative; } .stickerWrapper .imageMap { width: 110px; margin: 0; } .stickerWrapper:first-child .sticker { margin-top: 0; } .stickerWrapper .sticker .stickerContent { padding: 1px 5px; overflow: hidden; color: #fff; margin: 0; } .stickerWrapper a .sticker .stickerContent { padding: 8px; } .stickerWrapper .sticker .stickerContent p { margin: 0; font-family: 'Futura PT W01 Heavy', arial, sans-serif; line-height: 15px; cursor: default; text-align: center; font-size: 11px; font-weight: normal; letter-spacing: 0.05em; white-space: nowrap; } .stickerWrapper a .sticker .stickerContent p { cursor: pointer; } .stickerWrapper a .sticker .stickerContent p u { text-decoration: none; border-bottom: 1px solid #fff; } .stickerWrapper.ellipse .sticker .stickerContent p { position: absolute; top: 50%; left: 0; width: 100%; font-size: 18px; line-height: 22px; letter-spacing: 0; -ms-transform: translatey(-50%); -webkit-transform: translatey(-50%); -moz-transform: translatey(-50%); -o-transform: translatey(-50%); transform: translatey(-50%); } .stickerWrapper.ellipse .sticker .stickerContent p .small { display: block; font-size: 9px; line-height: 15px; } .stickerWrapper .sticker .stickerContent p sup { vertical-align: top; top: 6px; font-family: 'Futura PT W01 Heavy', arial, sans-serif; font-size: 75%; } @media only screen and (max-width: 850px){ .product-tile .stickerWrapper.ellipse { margin-left: 10px; } .stickerWrapper.ellipse .sticker { width: 45px; height: 45px; } .stickerWrapper .imageMap { width: 95px; } .stickerWrapper .sticker .stickerContent { padding: 0 4px; } .stickerWrapper .sticker .stickerContent p { font-size: 10px; line-height: 15px; } .stickerWrapper.ellipse .sticker .stickerContent p { font-size: 15px; line-height: 18px; } .stickerWrapper.ellipse .sticker .stickerContent p .small { display: none; } } /*******************/ /* category labels */ /*******************/ /* Added at 25.04.19. */ /* Edited at 08.06.21. Updated padding for mobile. */ /* Edited at 14.02.22. Updated display to inline block. */ /* Edited at 12.04.22. Updated styling. */ /* Edited at 06.07.22. Added separator. */ /* Edited at 02.02.23. Updated separator margin for replatforming. */ /* Edited at 15.02.23. Updated styling to fit replatforming. */ /* general */ .plpTagWrapper { position: relative; text-align: center; display: inline-block; } .plpTagWrapper .plpTag { margin-top: 6px; display: inline-block; } .plpTagWrapper .plpTag .plpTagContent { color: #000; } .plpTagWrapper .plpTag .plpTagContent p { margin: 0; font-family: 'Futura PT W01 Medium', arial, sans-serif; cursor: default; text-align: center; font-size: 14px; letter-spacing: normal; text-transform: uppercase; } .plpTagWrapper .plpTag .plpTagContent p sup { vertical-align: top; top: 6px; font-family: 'Futura PT W01 Heavy', arial, sans-serif; font-size: 75%; } .plpTagWrapper .plpTag.sustainableTag {} .plpTagWrapper .plpTag.sustainableTag .plpTagContent { color: #05AE42; } .plpTagSeparator { display: inline-block; margin: 0 5px; } .plpTagSeparator p { font-size: 14px; margin: 0; font-family: "Futura PT W01 Medium"; -webkit-transform: translatey(-2px); transform: translatey(-2px); color: #000; } @media only screen and (max-width: 850px){ .plpTagWrapper .plpTag .plpTagContent { padding: 0; } .plpTagWrapper .plpTag .plpTagContent p { font-size: 10px; line-height: 15px; } .plpTagSeparator { margin: 0 2px; } } /****************/ /* page message */ /****************/ /* Added at 09.03.18. */ /* Edited at 17.05.19. Added icon styled pagemessage. */ /* Edited at 21.05.19. Removed messageTitle. This can be added in the bodytext. */ /* Edited at 05.07.19. Moved 'banner' variant of page message to this piece of css. */ /* Edited at 15.07.19. Added Whatsapp styled pagemessage. */ /* Edited at 08.08.19. Updated typography. */ /* Edited at 18.12.19. Added variation 'location'. */ /* Edited at 13.02.20. Added variation 'coupons'. */ /* Edited at 10.03.20. Minor changes. */ /* Edited at 28.09.20. Added new method to add globalIcons. */ /* Edited at 10.03.33. Added discountTag. */ /* Edited at 03.05.23. Replaced close button image with CSS equivalent. */ /* Edited at 30.05.23. Added styling for page message banner. */ .stickyPageMessageWrapper { position: fixed; height: 0; bottom: 0; right: 0; z-index: 120; opacity: 0.0; cursor: pointer; } .stickyPageMessageWrapper .stickyPageMessage { width: 100%; max-width: 500px; } .stickyPageMessageWrapper .stickyPageMessage .close { position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; cursor: pointer; z-index: 3; } .stickyPageMessageWrapper .stickyPageMessage .close:before, .stickyPageMessageWrapper .stickyPageMessage .close:after { content: ""; display: block; width: 17px; height: 2px; background-color: #000; } .stickyPageMessageWrapper .stickyPageMessage .close:before { -ms-transform: translate(6px, 13px) rotate(-45deg); -webkit-transform: translate(6px, 13px) rotate(-45deg); transform: translate(6px, 13px) rotate(-45deg); } .stickyPageMessageWrapper .stickyPageMessage .close:after { -ms-transform: translate(6px, 11px) rotate(45deg); -webkit-transform: translate(6px, 11px) rotate(45deg); transform: translate(6px, 11px) rotate(45deg); } .stickyPageMessageWrapper .stickyPageMessage .areas { max-width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .stickyPageMessageWrapper .stickyPageMessage .areas a {} .stickyPageMessageWrapper .stickyPageMessage .areas a div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent { -moz-box-shadow: 3px 3px 3px rgba( 0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 3px rgba( 0, 0, 0, 0.1); box-shadow: 3px 3px 3px rgba( 0, 0, 0, 0.1); margin: 10px; padding: 0; border-radius: 4px; position: relative; padding: 0 0 2px 0; border: 1px solid #dedede; } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent p.bodycopy { padding-left: 18px; padding-right: 43px; margin: 0 2px; } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent p.bodycopy span.discountTag { font-family: 'Futura PT W01 Heavy', arial, sans-serif; color: #FF6000; } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent p.bodycopy:first-child { padding-top: 20px; } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent p.bodycopy:last-child { padding-bottom: 20px; } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent:after { content: "X"); position: absolute; top: 10px; right: 10px; } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent .contentWrapper { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent .contentWrapper .content { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent .contentWrapper .content .globalIcon { margin-top: 20px; margin-left: 20px; } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent .contentWrapper .content p.bodycopy { padding-left: 12px; } /* specific */ .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent.blank { background-color: rgba( 256, 256, 256, 1.0); } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent.icon { background-color: rgba( 256, 256, 256, 1.0); padding-left: 45px; background-repeat: no-repeat; background-size: 25px; background-position: 20px 50%; } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent.icon p span { color: #FF690C; } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent.icon.user { background-image: url('../icons/2019_HL06/we_icon_user_black.svg?$staticlink$'); } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent.icon.customer_service { background-image: url('../icons/2019_HL06/we_icon_customer_service_black.svg?$staticlink$'); } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent.icon.whatsapp { background-image: url('../icons/2019_HL06/whatsapp.svg?$staticlink$'); } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent.icon.location { background-image: url('../Service/contact/2018_HL06/pin.svg?$staticlink$'); } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent.icon.return_swap { background-image: url('../icons/2019_HL06/we_icon_return_swap.svg?$staticlink$'); } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent.icon.coupons { background-image: url('../icons/2019_HL10/we_icon_coupons_black.svg?$staticlink$'); } /* product */ .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent.product { background-color: rgba( 256, 256, 256, 1.0); display: flex; flex-direction: row; justify-content: center; } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent.product .imageWrapper { display: flex; padding-left: 5px; align-items: center; background: url(../icons/2021_HL04/loader.gif) center center no-repeat; } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent.product .copyWrapper { display: flex; flex-direction: column; justify-content: center; } /* page message banner */ .stickyPageMessageBannerWrapper { position: fixed; bottom: 0; right: 0; z-index: 120; transform: translateY(100%); opacity: 0.0; transition: all ease 0.3s; -moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; } .stickyPageMessageBannerWrapper.initialized { transform: translateY(0); opacity: 1.0; } .stickyPageMessageBannerWrapper .stickyPageMessageBanner .close { position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; cursor: pointer; z-index: 3; } .stickyPageMessageBannerWrapper .stickyPageMessageBanner .close:before, .stickyPageMessageBannerWrapper .stickyPageMessageBanner .close:after { content: ""; display: block; width: 17px; height: 2px; background-color: #000; } .stickyPageMessageBannerWrapper.inverse .stickyPageMessageBanner .close:before, .stickyPageMessageBannerWrapper.inverse .stickyPageMessageBanner .close:after { content: ""; display: block; width: 17px; height: 2px; background-color: #fff; } .stickyPageMessageBannerWrapper .stickyPageMessageBanner .close:before { -ms-transform: translate(6px, 13px) rotate(-45deg); -webkit-transform: translate(6px, 13px) rotate(-45deg); transform: translate(6px, 13px) rotate(-45deg); } .stickyPageMessageBannerWrapper .stickyPageMessageBanner .close:after { -ms-transform: translate(6px, 11px) rotate(45deg); -webkit-transform: translate(6px, 11px) rotate(45deg); transform: translate(6px, 11px) rotate(45deg); } .stickyPageMessageBannerWrapper .stickyPageMessageBanner .areas { max-width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .stickyPageMessageBannerWrapper .stickyPageMessageBanner .areas a {} .stickyPageMessageBannerWrapper .stickyPageMessageBanner .areas a div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .stickyPageMessageBannerWrapper .stickyPageMessageBanner .stickyPageMessageBannerContent { -moz-box-shadow: 3px 3px 3px rgba( 0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 3px rgba( 0, 0, 0, 0.1); box-shadow: 3px 3px 3px rgba( 0, 0, 0, 0.1); margin: 10px; padding: 0; border-radius: 4px; position: relative; padding: 0 0 2px 0; border: 1px solid #dedede; } /* on pdp */ @media only screen and (max-width : 850px){ .page-pdp .stickyPageMessageWrapper { bottom: 120px; } .page-pdp .stickyPageMessageBannerWrapper { bottom: 120px; } } /**************/ /* banner bar */ /**************/ /* Added at 08.06.20. Replacement of bannerrow. */ /* Edited at 05.01.23. Updated padding on desktop. */ /* Edited at 10.02.23. Removed bannerBars. Added large bannerbar. */ /* Edited at 13.03.23. Replaced bodycopy by bttns. */ .bannerBar { position: relative; width: 100%; margin: 0 auto; z-index: 1; } .bannerBar.general { text-align: center; padding: 10px 5px 7px; background-color: #f2f2f2; } .bannerBar.general.inverse { background-color: #000; } .bannerBar.general p.bodycopy {} .bannerBar.general p.bodycopy.ctas {} .bannerBar.large { text-align: center; padding: 10px 5px 5px; background-color: #f2f2f2; margin: 0 0 10px 0; } .bannerBar.large.inverse { background-color: #fff; } .bannerBar.large h2.heading { margin: 0 0 10px !important; } @media only screen and (min-width: 850px){ .bannerBar.general p.bodycopy { margin: 0 2.5px; } .bannerBar.general.inline > * { display: inline-block; } .bannerBar.general p.bodycopy:first-child { margin-left: 0; } .bannerBar.general p.bodycopy:last-child { margin-right: 0; } .bannerBar.general p.bodycopy.ctas { margin-left: 15px; } } @media only screen and (max-width: 850px){ .bannerBar.general { padding: 8px 5px; } .bannerBar.general { display: flex; flex-direction: column; justify-content: center; align-items: center; } .bannerBar.general p.bodycopy { display: block; margin: 0; } .bannerBar.general p.bodycopy .line { display: block; margin-top: 2px; } .bannerBar.general p.bodycopy.ctas {} } /****************************/ /* riverty/klarna bannerrow */ /****************************/ .overlay .rivertyBannerrow, .overlay .klarnaBannerrow { display: none; } /**************************************/ /* delayed holiday delivery bannerrow */ /**************************************/ #delayedHolidayDeliveryBannerrow { margin-top: 10px; } .page-home #delayedHolidayDeliveryBannerrow { margin-top: 0; } /***************/ /* pressurebar */ /***************/ /* Edited at 21.04.19. Added fix to push pressurebar on top of add-to-cart button on mobile. */ /* Edited at 05.07.19. Moved pdp fix to this CSS. */ /* Edited at 15.09.20. Rebuilt close button. */ /* Edited at 17.09.20. Added fix on cart page. */ /* Edited at 10.02.23. Updated styling to fit replatforming. */ /* Edited at 21.03.23. Updated styling to fit workaround. */ /* Edited at 16.05.23. Turned off as there is a replacement by Emakina. */ /* #pressure-bar { position: fixed; bottom: 0; width: 100%; z-index: 99; cursor: pointer; } #pressure-bar .closeButton { width: 20px; height: 20px; position: absolute; top: 0; right: 10px; transform: translatey(-50%); -webkit-transform: translatey(-50%); background: #000; border-radius: 50%; z-index: 1; } #pressure-bar .closeButton:before, #pressure-bar .closeButton:after { content: ""; display: block; width: 12px; height: 2px; background-color: #fff; position: absolute; top: 7px; left: 5px; } #pressure-bar .closeButton:before { -ms-transform: translate(-1px, 4px) rotate(-45deg); -webkit-transform: translate(-1px, 2px) rotate(-45deg); transform: translate(-1px, 2px) rotate(-45deg); } #pressure-bar .closeButton:after { -ms-transform: translate(-1px, 2px) rotate(45deg); -webkit-transform: translate(-1px, 2px) rotate(45deg); transform: translate(-1px, 2px) rotate(45deg); } */ @media only screen and (max-width : 850px){ /* fixes for pdp */ /* .page-pdp #pressure-bar { bottom: 117px; box-shadow: 0 -0.075em 0.5em 0 rgba(0,0,0,0.25); } */ } /****************************/ /* thuiswinkelWaarborg logo */ /****************************/ /* Added at 18.06.20. */ /* Edited at 04.08.22. Added logo to PDP for AB testing purposes. Hidden by default. */ /* Edited at 14.02.23. Updated styling to fit replatforming. */ .thuiswinkelWaarborgWrapper { width: 130px; } .thuiswinkelWaarborgWrapper .thuiswinkelWaarborg {} .thuiswinkelWaarborgWrapper .thuiswinkelWaarborg .imageMap {} .thuiswinkelWaarborgWrapper .thuiswinkelWaarborg .imageMap .imgHolder { background-image: url( '../Navigation/footer/thuiswinkel_waarborg.svg?$staticlink$' ); padding-top: 30.5%; } /* footer */ .footer__content .thuiswinkelWaarborgWrapper { margin: 0 calc(33% - 130px) 0 auto; } .footer__content .thuiswinkelWaarborgWrapper .thuiswinkelWaarborg { width: 115px; } @media only screen and (max-width : 850px){ .footer__content .thuiswinkelWaarborgWrapper { margin: 0 auto; } } /* pdp */ .product-usp-container .thuiswinkelWaarborgWrapper { margin: 1.0em 20px; display: none; } /*******************/ /* BeCommerce logo */ /*******************/ /* Added at 16.07.18. */ /* Edited at 18.06.20. Adjusted width. */ /* Edited at 14.02.23. Updated styling to fit replatforming. */ .beCommerceWrapper { width: 75px; } .beCommerceWrapper .beCommerce {} .beCommerceWrapper .beCommerce .imageMap {} .beCommerceWrapper .beCommerce .imageMap .imgHolder { background-image: url( '../Navigation/footer/becommerce.svg?$staticlink$' ); padding-top: 100%; } /* footer */ .footer__content .beCommerceWrapper { width: 55px; } /* pdp */ .product-usp-container .beCommerceWrapper { margin: 1.0em 20px; } /* cart */ .cartUsps .cartUsp .beCommerceWrapper { width: 34px; } /***********************/ /* shoppingAwards logo */ /***********************/ /* Added at 21.06.22. */ .shoppingAwardsWrapper { width: 230px; } .shoppingAwardsWrapper .shoppingAwards {} .shoppingAwardsWrapper .shoppingAwards .imageMap {} .shoppingAwardsWrapper .shoppingAwards .imageMap .imgHolder { background-image: url( '../Navigation/footer/shoppingAwards2022Modewarenhuizen.jpg?$staticlink$' ); padding-top: 16.85%; } /* footer */ .footer__content .shoppingAwardsWrapper { margin: 0 auto 15px; } @media only screen and (min-width : 850px){ .footer__content .shoppingAwardsWrapper { margin: 0 20px 0 0; } .footer__content .shoppingAwardsWrapper ~ .thuiswinkelWaarborgWrapper { margin: 0 19% 0 0; } } /***********************/ /* betterCotton logo */ /***********************/ /* Added at 05.07.22. */ /* Edited at 21.07.22. Replaced bw with url. */ .betterCottonWrapper { width: 130px; } .betterCottonWrapper .betterCotton, .betterCottonWrapper .betterCottonUrl {} .betterCottonWrapper .betterCotton .imageMap, .betterCottonWrapper .betterCottonUrl .imageMap {} .betterCottonWrapper .betterCotton .imageMap .imgHolder { background-image: url( '../icons/2022_HL06/better_cotton_logo.svg?$staticlink$' ); padding-top: 45.5%; } .betterCottonWrapper .betterCottonUrl .imageMap .imgHolder { background-image: url( '../icons/2022_HL06/better_cotton_logo_url.svg?$staticlink$' ); padding-top: 58.35%; } @media only screen and (max-width : 850px){ .betterCottonWrapper { width: 100px; } } /****************************/ /* delayed holiday delivery */ /****************************/ table.delayedHolidayDeliveryDates { border: 1px solid #dedede; } table.delayedHolidayDeliveryDates tr {} table.delayedHolidayDeliveryDates tr th, table.delayedHolidayDeliveryDates tr td { padding: 8px 5px; font-size: 14px; } table.delayedHolidayDeliveryDates thead tr { background-color: #000; } table.delayedHolidayDeliveryDates thead tr th { text-align: left; color: #fff; } table.delayedHolidayDeliveryDates tbody tr:nth-child(odd) { background-color: #f2f2f2; } /**************/ /* radio tabs */ /**************/ /* Added at 26.04.29. Tabs with the use of HTML & CSS only. */ /* Edited at 07.08.19. Adjusted label padding. Removed absolute positioning. */ /* Edited at 15.03.23. Moved specific styling to sizechart styles. */ .sizechartContentWrapper .radioTabs { position: relative; clear: both; } .sizechartContentWrapper .radioTabs .radioTab { width: 100%; } .sizechartContentWrapper .radioTabs .radioTab > .radioButton { display: none; } .sizechartContentWrapper .radioTabs .radioTab > label { background-color: #f2f2f2; padding: 15px 10px; border: 1px solid #f2f2f2; border-bottom: 1px solid #dedede; width: 50%; float: none; cursor: pointer; } .sizechartContentWrapper .radioTabs .radioTab > label h2 { margin: 10px 0; } .sizechartContentWrapper .radioTabs .radioTab > label:before { display: none; } .sizechartContentWrapper .radioTabs .radioTab:nth-child(1) > label { left: 0; } .sizechartContentWrapper .radioTabs .radioTab:nth-child(2) > label { position: absolute; top: 0; left: 50%; } .sizechartContentWrapper .radioTabs .radioTab > .radioButton:checked ~ label { background-color: #fff; font-weight: bold; border: 1px solid #dedede; border-bottom: none; } .sizechartContentWrapper .radioTabs .radioTab > .content { padding: 10px 0; width: 100%; display: none; } .sizechartContentWrapper .radioTabs .radioTab > .content:after { content: ""; display: table; clear: both; } .sizechartContentWrapper .radioTabs .radioTab > .radioButton:checked ~ .content { display: block; } /**********************/ /* image range slider */ /**********************/ /* Added at ??. Add range slider to image to switch containers (like a carousel). */ /* Edited at 07.10.19. Added some styling for automated product range slides. Also minor changes. */ /* Edited at 08.10.19. Added mobile styling and fixes for specific products. */ /* Edited at 20.12.19. Separated styling of specific elements by id. Added variation with multiple ranges. */ .rangeImgWrapper {} .rangeImgWrapper .rangeImg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 2; display: none; } .rangeImgWrapper .rangeWrapper { width: 100%; position: absolute; z-index: 2; } .rangeImgWrapper .rangeWrapper .range {} .rangeImgWrapper .rangeWrapper .range input[type="range"]{ -webkit-appearance: none; appearance: none; width: 100%; height: 100%; background: #ddd; border-radius: 1.0em; } .rangeImgWrapper .rangeWrapper .range input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 0.5em; } .rangeImgWrapper .rangeWrapper .range input[type="range"]::-moz-range-track { width: 100%; height: 0.5em; } .rangeImgWrapper .rangeWrapper .range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.0em; height: 1.0em; background: #000; cursor: pointer; border-radius: 1.0em; transform: translatey(-0.25em); } .rangeImgWrapper .rangeWrapper .range input[type="range"]::-moz-range-thumb { width: 1.0em; height: 1.0em; background: #000; cursor: pointer; transform: translatey(-0.25em); } /* specific */ #CP_HL03_M_FITGUIDE.rangeImgWrapper {} #CP_HL03_M_FITGUIDE.rangeImgWrapper .rangeImg {} #CP_HL03_M_FITGUIDE.rangeImgWrapper .rangeImg .range {} #CP_HL03_M_FITGUIDE.rangeImgWrapper .rangeWrapper { top: 48.25%; left: 32%; width: 36%; height: 3.5%; } #CP_HL03_M_FITGUIDE.rangeImgWrapper .rangeWrapper .range input[type="range"]{ background: #000; border-radius: 0; } #CP_HL03_M_FITGUIDE.rangeImgWrapper .rangeWrapper .range input[type="range"]::-webkit-slider-runnable-track { height: 2px; } #CP_HL03_M_FITGUIDE.rangeImgWrapper .rangeWrapper .range input[type="range"]::-moz-range-track { height: 2px; } #CP_HL03_M_FITGUIDE.rangeImgWrapper .rangeWrapper .range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 1.5em; background: rgba(0,0,0,0) url('../Category pages/_men/2020_HL03_FITGUIDE/range-thumb-background.svg') repeat-y; cursor: pointer; border-radius: 0; transform: translatey(-50%); } #CP_HL03_M_FITGUIDE.rangeImgWrapper .rangeWrapper .range input[type="range"]::-moz-range-thumb { width: 32px; height: 1.5em; background: rgba(0,0,0,0) url('../Category pages/_men/2020_HL03_FITGUIDE/range-thumb-background.svg') repeat-y; cursor: pointer; border-radius: 0; transform: translatey(-50%); } @media only screen and (max-width: 1024px){ #CP_HL03_M_FITGUIDE.rangeImgWrapper .rangeWrapper { top: 62%; left: 15%; width: 70%; height: 3.5%; } #CP_HL03_M_FITGUIDE.rangeImgWrapper .rangeWrapper .range input[type="range"]::-webkit-slider-runnable-track { height: 3px; } #CP_HL03_M_FITGUIDE.rangeImgWrapper .rangeWrapper .range input[type="range"]::-moz-range-track { height: 3px; } #CP_HL03_M_FITGUIDE.rangeImgWrapper .rangeWrapper .range input[type="range"]::-webkit-slider-thumb { width: 33px; height: 3.0em; background: rgba(0,0,0,0) url('../Category pages/_men/2020_HL03_FITGUIDE/_mobile/range-thumb-background.svg') repeat-y;} #CP_HL03_M_FITGUIDE.rangeImgWrapper .rangeWrapper .range input[type="range"]::-moz-range-thumb { width: 33px; height: 3.0em; background: rgba(0,0,0,0) url('../Category pages/_men/2020_HL03_FITGUIDE/_mobile/range-thumb-background.svg') repeat-y; } } /************************/ /* product range slider */ /************************/ /* Added/edited at 24.02.20. Rebuilt product range slider. Separated copy from script to make it more whitelabel. */ /* Edited at 11.03.21. Replaced loader icon. */ .generalProductRangeSlider[data-product-range-slider] { background: url(../icons/2021_HL04/loader.gif) center center no-repeat; } .generalProductRangeSlider[data-product-range-slider] > .imageMap > .imgHolder { padding-top: 91.8%; } .generalProductRangeSlider[data-product-range-slider] .rangeImgWrapper {} .generalProductRangeSlider[data-product-range-slider] .rangeImgWrapper .rangeImg {} .generalProductRangeSlider[data-product-range-slider] .rangeImgWrapper .rangeImg .imgHolder { padding-top: 91.8%; background-size: 52%; background-position: center top; background-color: #fff; } .generalProductRangeSlider[data-product-range-slider] .rangeImgWrapper .rangeImg .areas [data-product-range-slider-cta] { display: none; } .generalProductRangeSlider[data-product-range-slider] .rangeImgWrapper .rangeImg .areas a div { top: 0; left: 0; width: 100%; height: 100%; } .generalProductRangeSlider[data-product-range-slider] .rangeImgWrapper .rangeWrapper { top: 86%; left: 33.33%; width: 33.33%; } @media only screen and (max-width: 1024px){ .generalProductRangeSlider[data-product-range-slider] .rangeImgWrapper .rangeImg .areas [data-product-range-slider-cta] { display: flex; } } @media only screen and (max-width: 850px){ .generalProductRangeSlider[data-product-range-slider] > .imageMap > .imgHolder { padding-top: 91.8%; } .generalProductRangeSlider[data-product-range-slider] .rangeImgWrapper .rangeWrapper { top: 72.5%; } .generalProductRangeSlider[data-product-range-slider] .rangeImgWrapper .rangeImg .imgHolder { padding-top: 91.8%; background-size: 45%; background-position: center top; } } /***********************/ /* product range guide */ /***********************/ /* Edited at 23.12.19. Separated variation with multiple ranges. Called this 'guide' instead of 'slider' to distinguish. */ /* Edited at 10.01.20. Added some styling to range guide. */ /* Edited at 30.01.20. Added new variation for men jeans fitguide. Adjusted some general styling. */ /* range guide men jeans */ #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] > .imageMap > .imgHolder { padding-top: 48%; } #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] .rangeImgWrapper {} #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] .rangeImgWrapper .rangeImg {} #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] .rangeImgWrapper .rangeImg .imgHolder { padding-top: 48%; background-size: 26%; background-position: right center; background-color: #fff; } #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] .rangeImgWrapper .rangeImg .areas a div { top: 0; left: 0; width: 100%; height: 78%; } #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] .rangeImgWrapper .rangeWrapper { top: 50%; left: 33.33%; width: 33.33%; transform: translatey(-50%); } #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] .rangeImgWrapper .rangeWrapper .range input[type="range"]:nth-child(1) { margin-bottom: 10%; } #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] .rangeImgWrapper .rangeWrapper .range input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 0.5em; } #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] .rangeImgWrapper .rangeWrapper .range input[type="range"]::-moz-range-track { width: 100%; height: 0.5em; } #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] .rangeImgWrapper .rangeWrapper .range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1px; height: 1.5em; background: #000; cursor: pointer; transform: translatey(-0.5em); } #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] .rangeImgWrapper .rangeWrapper .range input[type="range"]::-moz-range-thumb { width: 1px; height: 1.5em; background: #000; cursor: pointer; transform: translatey(-0.5em); } #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] .rangeImgWrapper .rangeWrapper .range input.off[type="range"]::-webkit-slider-thumb { display: none; } #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] .rangeImgWrapper .rangeWrapper .range input.off[type="range"]::-moz-range-thumb { display: none; } @media only screen and (max-width: 850px){ #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] > .imageMap > .imgHolder { padding-top: 83.8%; } #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] .rangeImgWrapper .rangeImg .imgHolder { padding-top: 83.8%; background-size: 26%; } #PRS_HL01_M_JEANS_FITGUIDE[data-product-range-guide] .rangeImgWrapper .rangeWrapper { top: 50%; } } /****************/ /* push message */ /****************/ .pushMessagesWrapper { position: relative; transition: all ease 0.3s; -moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; } .pushMessagesWrapper .pushMessages { position: fixed; width: 100%; top: 50px; z-index: 100; background: #FFFAD8; box-shadow: 3px 3px 3px rgba( 0, 0, 0, 0.1); -moz-box-shadow: 3px 3px 3px rgba( 0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 3px rgba( 0, 0, 0, 0.1); transition: all ease 0.3s; -moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; } .pushMessagesWrapper .pushMessages .pushMessageWrapper { color: #222; margin: 0 auto; padding: 0 30px; max-width: 1540px; position: relative; } .pushMessagesWrapper .pushMessages .pushMessageWrapper .pushMessage {} .pushMessagesWrapper .pushMessages .pushMessageWrapper .pushMessage p { margin: 1.0em auto; } .pushMessagesWrapper .pushMessages .pushMessageWrapper .pushMessage p a {} .pushMessagesWrapper .pushMessages .pushMessageWrapper .pushMessage p span {} .pushMessagesWrapper .pushMessages .pushMessageWrapper .pushMessage p a span {} .pushMessagesWrapper .pushMessages .pushMessageWrapper .pushMessage p span[data-open-preferences] { text-decoration: underline; cursor: pointer; } .pushMessagesWrapper .pushMessages .pushMessageWrapper .pushMessage .closePushMessage { position: absolute; top: -1.0em; right: 2.5em; width: 40px; height: 40px; background: blue; cursor: pointer; background: url('../icons/close.png?$staticlink$') center center no-repeat; } @media only screen and (max-width: 850px){ .pushMessagesWrapper .pushMessages .pushMessageWrapper .pushMessage .closePushMessage { top: -1.0em; right: 0; } } /*************/ /* sizechart */ /*************/ /* Added at 19.02.19. Sizechart which will be opened in the sidepanel only. */ /* Edited at 21.02.19. */ /* Edited at 05.06.19. Split tabs in separate content assets. Added styling to display correct content. */ /* Edited at 06.06.19. Adjusted the width of size selectors to be better responsive. */ /* Edited at 06.08.19. Adjusted typography. */ /* Edited at 07.01.20. Fixed 'flexbox' issue on IE. */ /* Edited at 03.06.21. Added 'livechat section'. */ /* Edited at 04.11.21. Removed some styling for interactive elements. */ /* Edited at 15.03.23. Moved radio tabs styling to here. */ .sizechartWrapper {} .sizechartWrapper .sizechart {} .sizechartWrapper .sizechart h4.heading { margin: 0 auto 20px; } .sizechartWrapper .sizechart h2.heading, .sizechartWrapper .sizechart h3.heading, .sizechartWrapper .sizechart label p.bodycopy { text-align: center; } .sizechartWrapper .sizechart label p.bodycopy { margin: 0; } .sizechartWrapper .sizechart p.currentSize { text-align: center; } .sizechartWrapper .sizechart .content { padding-top: 0; } .sizechartWrapper .sizechart .content p.bodycopy { text-align: right; } .sizechartWrapper .sizechart .hr { width: 100%; height: 1px; margin: 0 auto 10px; background-color: #dedede; } .sizechartWrapper .sizechart .sizechartHeaderWrapper {} .sizechartWrapper .sizechart .sizechartHeaderWrapper .sizechartHeader {} .sizechartWrapper .sizechart .sizechartFooterWrapper { clear: both; } .sizechartWrapper .sizechart .sizechartFooterWrapper .sizechartFooter { text-align: center; } /* tabs */ .sizechartWrapper .sizechart .sizechartTabsWrapper { margin-top: 2.0em; } .sizechartWrapper .sizechart .sizechartTabsWrapper .sizechartTabs {} .sizechartWrapper .sizechart .sizechartTabsWrapper .sizechartTabs ul { list-style-type: none; margin: 0 1px 1px 0; padding: 0; display: flex; flex-wrap: wrap; } .sizechartWrapper .sizechart .sizechartTabsWrapper .sizechartTabs ul li { display: block; width: 50%; } .sizechartWrapper .sizechart .sizechartTabsWrapper .sizechartTabs ul li .sizechartTab { display: block; background-color: #000; color: #fff; border: 1px solid #000; font-size: 11px; text-align: center; padding: 10px 0; text-transform: uppercase; margin: 1px 0 0 1px; cursor: pointer; border-radius: 2px; } .sizechartWrapper .sizechart .sizechartTabsWrapper .sizechartTabs ul li .sizechartTab.active { font-family: 'Futura PT W01 Heavy', arial, sans-serif; background-color: #fff; border: 1px solid #dedede; color: #000; } /* radio tabs */ .sizechartContentWrapper .radioTabs { position: relative; clear: both; } .sizechartContentWrapper .radioTabs .radioTab { width: 100%; } .sizechartContentWrapper .radioTabs .radioTab > .radioButton { display: none; } .sizechartContentWrapper .radioTabs .radioTab > label { background-color: #f2f2f2; padding: 15px 10px; border: 1px solid #f2f2f2; border-bottom: 1px solid #dedede; width: 50%; float: none; cursor: pointer; } .sizechartContentWrapper .radioTabs .radioTab > label h2 { margin: 10px 0; } .sizechartContentWrapper .radioTabs .radioTab > label:before { display: none; } .sizechartContentWrapper .radioTabs .radioTab:nth-child(1) > label { left: 0; } .sizechartContentWrapper .radioTabs .radioTab:nth-child(2) > label { position: absolute; top: 0; left: 50%; } .sizechartContentWrapper .radioTabs .radioTab > .radioButton:checked ~ label { background-color: #fff; font-weight: bold; border: 1px solid #dedede; border-bottom: none; } .sizechartContentWrapper .radioTabs .radioTab > .content { padding: 10px 0; width: 100%; display: none; } .sizechartContentWrapper .radioTabs .radioTab > .content:after { content: ""; display: table; clear: both; } .sizechartContentWrapper .radioTabs .radioTab > .radioButton:checked ~ .content { display: block; } /* content*/ .sizechartWrapper .sizechart .sizechartContentWrapper {} .sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent {} .sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent [data-remote-tab-content] { display: none; } /* image */ .sizechartWrapper .sizechart .imageMapWrapper { margin: 5% auto 0; width: 100%; max-width: 850px; } .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription {} .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription .rtContainer {} .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription .rtContainer p { color: #000; text-align: left; font-family: 'Futura PT W01 book', arial, sans-serif; line-height: 0.8em; } .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription .rtContainer p span {} .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle {} .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle p { color: #000; text-align: left; font-family: 'Futura PT W01 heavy', arial, sans-serif; text-transform: uppercase; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle p span { cursor: pointer; } .sizechartWrapper .sizechart .imageMapWrapper .measurementHr { position: absolute; height: 1px; background-color: #000; } .sizechartWrapper .sizechart .imageMapWrapper .measurementVr { position: absolute; width: 1px; background-color: #000; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags {} .sizechartWrapper .sizechart .imageMapWrapper .measurementTags p { color: #000; text-align: left; font-family: 'Futura PT W01 heavy', arial, sans-serif; text-transform: uppercase; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags p .measurementTag { background: #FFF0E6; padding: 0.25em 0.5em; margin: 0 0.35em; } /* men */ .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription.measurementDescriptionMenChest .rtContainer { top: 33.2%; left: 74%; width: 21%; height: 3.8%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription.measurementDescriptionMenWaist .rtContainer { top: 42.4%; left: 5%; width: 23%; height: 3.8%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription.measurementDescriptionMenWaist .rtContainer p { text-align: right; } .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription.measurementDescriptionMenHip .rtContainer { top: 52.4%; left: 74%; width: 21%; height: 3.8%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription.measurementDescriptionMenLeg .rtContainer { top: 68.5%; left: 5%; width: 25.5%; height: 3.8%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription.measurementDescriptionMenLeg .rtContainer p { text-align: right; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleMenChest { top: 29%; left: 74%; width: 26%; height: 4.2%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleMenChest p span:before { content: "i"; display: inline-block; margin-right: 0.5em; background-color: #000; border-radius: 50%; width: 1.5em; height: 1.5em; text-align: center; color: #fff; text-transform: lowercase; font-size: 0.5em; line-height: 1.5em; -ms-transform: translatey(-0.3em); -webkit-transform: translatey(-0.3em); -moz-transform: translatey(-0.3em); -o-transform: translatey(-0.3em); transform: translatey(-0.3em); } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleMenChest p span:hover:before { background-color: #FF690C; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleMenWaist { top: 38.2%; left: 0; width: 28%; height: 4.2%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleMenWaist p { text-align: right; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleMenWaist p span:after { content: "i"; display: inline-block; margin-left: 0.5em; background-color: #000; border-radius: 50%; width: 1.5em; height: 1.5em; text-align: center; color: #fff; text-transform: lowercase; font-size: 0.5em; line-height: 1.5em; -ms-transform: translatey(-0.3em); -webkit-transform: translatey(-0.3em); -moz-transform: translatey(-0.3em); -o-transform: translatey(-0.3em); transform: translatey(-0.3em); } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleMenWaist p span:hover:after { background-color: #FF690C; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleMenHip { top: 48.2%; left: 74%; width: 26%; height: 4.2%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleMenHip p span:before { content: "i"; display: inline-block; margin-right: 0.5em; background-color: #000; border-radius: 50%; width: 1.5em; height: 1.5em; text-align: center; color: #fff; text-transform: lowercase; font-size: 0.5em; line-height: 1.5em; -ms-transform: translatey(-0.3em); -webkit-transform: translatey(-0.3em); -moz-transform: translatey(-0.3em); -o-transform: translatey(-0.3em); transform: translatey(-0.3em); } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleMenHip p span:hover:before { background-color: #FF690C; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleMenLeg { top: 64.3%; left: 0; width: 30.5%; height: 4.2%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleMenLeg p { text-align: right; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleMenLeg p span:after { content: "i"; display: inline-block; margin-left: 0.5em; background-color: #000; border-radius: 50%; width: 1.5em; height: 1.5em; text-align: center; color: #fff; text-transform: lowercase; font-size: 0.5em; line-height: 1.5em; -ms-transform: translatey(-0.3em); -webkit-transform: translatey(-0.3em); -moz-transform: translatey(-0.3em); -o-transform: translatey(-0.3em); transform: translatey(-0.3em); } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleMenLeg p span:hover:after { background-color: #FF690C; } .sizechartWrapper .sizechart .imageMapWrapper .measurementHr.measurementHrMenChest { top: 30.5%; left: 42%; width: 30.5%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementHr.measurementHrMenWaist { top: 39.6%; left: 29%; width: 27.4%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementHr.measurementHrMenHip { top: 49.7%; left: 40%; width: 32.4%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementHr.measurementHrMenLeg { top: 65.7%; left: 32.5%; width: 17.5%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementVr.measurementVrMenLeg { top: 55%; left: 50%; height: 36%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags.measurementTagsMenChest { top: 32%; left: 42%; width: 30.5%; height: 3%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags.measurementTagsMenWaist { top: 40.8%; left: 29%; width: 27.4%; height: 3%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags.measurementTagsMenWaist p { text-align: right; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags.measurementTagsMenHip { top: 50.9%; left: 40%; width: 32.4%; height: 3%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags.measurementTagsMenLeg { top: 66.9%; left: 32.5%; width: 17.5%; height: 3%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags.measurementTagsMenLeg p { text-align: right; } /* women */ .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription.measurementDescriptionWomenChest .rtContainer { top: 35.2%; left: 74%; width: 21%; height: 3.8%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription.measurementDescriptionWomenWaist .rtContainer { top: 42.4%; left: 5%; width: 23%; height: 3.8%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription.measurementDescriptionWomenWaist .rtContainer p { text-align: right; } .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription.measurementDescriptionWomenHip .rtContainer { top: 52.4%; left: 74%; width: 21%; height: 3.8%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription.measurementDescriptionWomenLeg .rtContainer { top: 68.5%; left: 5%; width: 25.5%; height: 3.8%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription.measurementDescriptionWomenLeg .rtContainer p { text-align: right; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleWomenChest { top: 31%; left: 74%; width: 26%; height: 4.2%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleWomenChest p span:before { content: "i"; display: inline-block; margin-right: 0.5em; background-color: #000; border-radius: 50%; width: 1.5em; height: 1.5em; text-align: center; color: #fff; text-transform: lowercase; font-size: 0.5em; line-height: 1.5em; -ms-transform: translatey(-0.3em); -webkit-transform: translatey(-0.3em); -moz-transform: translatey(-0.3em); -o-transform: translatey(-0.3em); transform: translatey(-0.3em); } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleWomenChest p span:hover:before { background-color: #FF690C; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleWomenWaist { top: 38.2%; left: 0; width: 28%; height: 4.2%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleWomenWaist p { text-align: right; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleWomenWaist p span:after { content: "i"; display: inline-block; margin-left: 0.5em; background-color: #000; border-radius: 50%; width: 1.5em; height: 1.5em; text-align: center; color: #fff; text-transform: lowercase; font-size: 0.5em; line-height: 1.5em; -ms-transform: translatey(-0.3em); -webkit-transform: translatey(-0.3em); -moz-transform: translatey(-0.3em); -o-transform: translatey(-0.3em); transform: translatey(-0.3em); } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleWomenWaist p span:hover:after { background-color: #FF690C; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleWomenHip { top: 48.2%; left: 74%; width: 26%; height: 4.2%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleWomenHip p span:before { content: "i"; display: inline-block; margin-right: 0.5em; background-color: #000; border-radius: 50%; width: 1.5em; height: 1.5em; text-align: center; color: #fff; text-transform: lowercase; font-size: 0.5em; line-height: 1.5em; -ms-transform: translatey(-0.3em); -webkit-transform: translatey(-0.3em); -moz-transform: translatey(-0.3em); -o-transform: translatey(-0.3em); transform: translatey(-0.3em); } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleWomenHip p span:hover:before { background-color: #FF690C; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleWomenLeg { top: 64.3%; left: 0; width: 30.5%; height: 4.2%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleWomenLeg p { text-align: right; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleWomenLeg p span:after { content: "i"; display: inline-block; margin-left: 0.5em; background-color: #000; border-radius: 50%; width: 1.5em; height: 1.5em; text-align: center; color: #fff; text-transform: lowercase; font-size: 0.5em; line-height: 1.5em; -ms-transform: translatey(-0.3em); -webkit-transform: translatey(-0.3em); -moz-transform: translatey(-0.3em); -o-transform: translatey(-0.3em); transform: translatey(-0.3em); } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleWomenLeg p span:hover:after { background-color: #FF690C; } .sizechartWrapper .sizechart .imageMapWrapper .measurementHr.measurementHrWomenChest { top: 32.5%; left: 42%; width: 30.5%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementHr.measurementHrWomenWaist { top: 39.6%; left: 29%; width: 27.4%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementHr.measurementHrWomenHip { top: 49.7%; left: 40%; width: 32.4%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementHr.measurementHrWomenLeg { top: 65.7%; left: 32.5%; width: 17.7%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementVr.measurementVrWomenLeg { top: 55%; left: 50.2%; height: 36%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags.measurementTagsWomenChest { top: 34%; left: 42%; width: 30.5%; height: 3%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags.measurementTagsWomenWaist { top: 40.8%; left: 29%; width: 27.4%; height: 3%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags.measurementTagsWomenWaist p { text-align: right; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags.measurementTagsWomenHip { top: 50.9%; left: 40%; width: 32.4%; height: 3%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags.measurementTagsWomenLeg { top: 66.9%; left: 32.5%; width: 17.7%; height: 3%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags.measurementTagsWomenLeg p { text-align: right; } /* kids */ .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription.measurementDescriptionKidsChest .rtContainer { top: 32.5%; left: 74%; width: 21%; height: 3.8%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription.measurementDescriptionKidsWaist .rtContainer { top: 39.9%; left: 5%; width: 23%; height: 3.8%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementDescription.measurementDescriptionKidsWaist .rtContainer p { text-align: right; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleKidsChest { top: 28.3%; left: 74%; width: 26%; height: 4.2%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleKidsChest p span:before { content: "i"; display: inline-block; margin-right: 0.5em; background-color: #000; border-radius: 50%; width: 1.5em; height: 1.5em; text-align: center; color: #fff; text-transform: lowercase; font-size: 0.5em; line-height: 1.5em; -ms-transform: translatey(-0.3em); -webkit-transform: translatey(-0.3em); -moz-transform: translatey(-0.3em); -o-transform: translatey(-0.3em); transform: translatey(-0.3em); } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleKidsChest p span:hover:before { background-color: #FF690C; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleKidsWaist { top: 35.7%; left: 0; width: 28%; height: 4.2%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleKidsWaist p { text-align: right; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleKidsWaist p span:after { content: "i"; display: inline-block; margin-left: 0.5em; background-color: #000; border-radius: 50%; width: 1.5em; height: 1.5em; text-align: center; color: #fff; text-transform: lowercase; font-size: 0.5em; line-height: 1.5em; -ms-transform: translatey(-0.3em); -webkit-transform: translatey(-0.3em); -moz-transform: translatey(-0.3em); -o-transform: translatey(-0.3em); transform: translatey(-0.3em); } .sizechartWrapper .sizechart .imageMapWrapper .measurementTitle.measurementTitleKidsWaist p span:hover:after { background-color: #FF690C; } .sizechartWrapper .sizechart .imageMapWrapper .measurementHr.measurementHrKidsChest { top: 29.8%; left: 42.7%; width: 30%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementHr.measurementHrKidsWaist { top: 37.1%; left: 29.6%; width: 27.4%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags.measurementTagsKidsChest { top: 31.3%; left: 42%; width: 30.5%; height: 3%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags.measurementTagsKidsWaist { top: 38.3%; left: 29%; width: 27.4%; height: 3%; } .sizechartWrapper .sizechart .imageMapWrapper .measurementTags.measurementTagsKidsWaist p { text-align: right; } /* tables */ .sizechartWrapper .sizechart .sizechartTableWrapper {} .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable { overflow-x: auto; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table { display: table; border-collapse: collapse; width: 100%; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .tr { display: flex; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .th, .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .td { flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .th:nth-child(1), .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .td:nth-child(1) { max-width: 80px; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .thead { display: table-header-group; position: -webkit-sticky; position: sticky; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .thead .tr { background-color: #EAEAEA; text-align: center; font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .thead .tr .th { border-bottom: 1px solid #fff; border-right: 1px solid #fff; font-size: 12px; text-transform: uppercase; text-align: center; padding: 5px 2px; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .tbody { display: table-row-group; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .tbody .tr { background-color: #F6F8FA; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .tbody .tr.active { background-color: #F8EEEC; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .tbody .tr.active .td { font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .tbody .tr.active .td:nth-child(1) { background-color: #F1E6E4; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .tbody .tr .td { border-bottom: 1px solid #fff; border-right: 1px solid #fff; font-size: 12px; text-transform: uppercase; text-align: center; padding: 5px 2px; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .tbody .tr .td:nth-child(1) { background-color: #EAEAEA; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .tbody .tr .td:last-child { border-right: none; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable p.bodycopy { text-align: left; } /* desktop only */ @media only screen and (min-width : 850px){ /* tabs */ .sizechartWrapper .sizechart .sizechartTabsWrapper .sizechartTabs ul li .sizechartTab:hover { background-color: #fff; border: 1px solid #dedede; color: #000; } /* selector */ .sizechartSelectorWrapper .sizechartSelector ul li label:hover input ~ .checkBoxHolder { background-color: #ccc; } /* submit */ .sizechartWrapper .sizechart button.cta:hover { background-color: #333; } } /* mobile only */ @media only screen and (max-width : 480px){ /* tables */ .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .thead .tr .th { white-space: nowrap; height: 150px; position: relative; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .thead .tr .th.fixed-80 { width: auto; } .sizechartWrapper .sizechart .sizechartTableWrapper .sizechartTable .table .thead .tr .th > div { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%) rotate(-90deg); -webkit-transform: translate(-50%,-50%) rotate(-90deg); -moz-transform: translate(-50%,-50%) rotate(-90deg); -o-transform: translate(-50%,-50%) rotate(-90deg); transform: translate(-50%,-50%) rotate(-90deg); } } /* livechat section */ .livechatWrapper { margin-top: 20px; } .livechatWrapper .livechat { margin-bottom: 10px; background-color: #CBECFF; padding: 10px 0; display: flex; align-items: center; justify-content: center; } .livechatWrapper .livechat .content { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0; } .livechatWrapper .livechat .content .iconWrapper { width: 150px; text-align: center; } .livechatWrapper .livechat .content .copy {} .livechatWrapper .livechat .content .copy p.bodycopy { text-align: left; margin: 0; } @media only screen and (max-width: 850px){ .livechatWrapper .livechat .content { flex-direction: column; width: 100%; padding: 0 20px; } .livechatWrapper .livechat .content .iconWrapper { display: none; } .livechatWrapper .livechat .content .copy { width: 100%; } } /************/ /* magazine */ /************/ /* Added at 18.10.19. */ /* Edited at 17.12.19. Added page-indicator. */ /* Edited at 30.06.20. Adjusted size of page-indicator. */ [data-magazine] { overflow: hidden; } [data-magazine] .magazine { margin: 0 auto; width: 90%; height: 90%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid #dedede; background-color: #f2f2f2; } [data-magazine] .magazine .page-indicator { position: absolute; z-index: 999; right: 0; width: 48px; height: 48px; border-radius: 50%; background-color: rgba(250,250,250,0.2); border: 3px solid #000; cursor: pointer; } [data-magazine] .magazine .page { height: 100%; } [data-magazine] .magazine .page:nth-child(odd) { border-right: 1px solid #dedede; } [data-magazine] .magazine .page img { max-width: 100%; height: 100%; } /*****************/ /* progress ring */ /*****************/ /* Added at 27.01.20. */ [data-progress-ring] { position: relative; width: 100%; padding-top: 100%; } [data-progress-ring] .progressRing { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; } [data-progress-ring] .progressRing .track { stroke-width: 10; fill: transparent; stroke: #f2f2f2; } [data-progress-ring] .progressRing .ring { stroke-width: 10; fill: transparent; stroke: #000; transition: stroke-dashoffset 1.0s; transform: rotate(-90deg); transform-origin: 50% 50%; } [data-progress-ring] .progressRing .ring.from { stroke: rgba(255, 255, 255, 0.8); } [data-progress-ring] .progressRing .ring.to { stroke: #094496; } .active[data-progress-ring] .progressRing .ring { stroke: #FF690C; } .active[data-progress-ring] .progressRing .ring.from { stroke: rgba(255, 255, 255, 0.8); } .active[data-progress-ring] .progressRing .ring.to { stroke: #FF690C; } /**************/ /* notificare */ /**************/ /* Added at 02.07.20. */ /* Edited at 06.07.20. Added some styling changes for the look and feel of the popup. */ .notificareModal > div { border-radius: 0 !important; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 30px !important; } .notificareModal > div > div:nth-child(1), .notificareModal > div > div:nth-child(2) { display: none !important; } .notificareModal > div > div:nth-child(3) { position: relative !important; left: 0 !important; width: calc(100% - 10px) !important; margin: 0 auto 10px !important; } .notificareModal > div > div:nth-child(3) p:nth-child(1) { font-family: "Futura PT W01 Heavy", arial, sans-serif !important; font-weight: normal !important; text-transform: uppercase; margin: 0 auto 15px !important; letter-spacing: normal; } .notificareModal > div > div:nth-child(3) p:nth-chilr(2) { font-family: "Futura PT W01 Book", arial, sans-serif !important; font-size: 15px !important; } .notificareModal > div > a { position: relative !important; width: calc(50% - 10px) !important; padding: 15px 26px !important; background-color: #000 !important; color: #fff !important; text-transform: uppercase !important; font-size: 12px !important; line-height: 1.2em !important; font-family: 'Futura PT W01 Heavy', arial, sans-serif !important; margin: 15px 5px 0 !important; border-radius: 2px !important; text-decoration: none !important; transition: all ease .3s !important; -moz-transition: all ease .3s !important; -webkit-transition: all ease .3s !important; display: inline-block !important; text-align: center !important; right: 0 !important; bottom: 0 !important; border: 0 !important; } .notificareModal > div > a:nth-child(4) { } .notificareModal > div > a:nth-child(5) { background-color: #00BF48 !important; } @media only screen and (min-width: 850px){ .notificareModal > div { left: 30px; } .notificareModal > div > a:hover { background-color: #111 !important; } .notificareModal > div > a:nth-child(5):hover { background-color: #00D852 !important; background-image: linear-gradient(#00D852,#00BF48) !important; } } /*************/ /* read more */ /*************/ /* Added at 27.10.20. Comes with function in content.js. */ /* Edited at 14.01.21. Added specific styling for use in brandbook (different background color). */ /* Edited at 16.02.21. Added 300 variation to heights. */ /* Edited at 18.02.21. Added 400 variation to heights. */ /* Edited at 22.07.21. Removed specific styling for brandbook. */ [data-read-more] { overflow: hidden; position: relative; } .active[data-read-more] { padding-bottom: 50px; } [data-read-more] [data-read-more-switch] { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: rgba(255,255,255,1); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); border-bottom: 50px solid rgba(255,255,255,1); cursor: pointer; } .active[data-read-more] [data-read-more-switch] { background: transparent; height: 0; } [data-read-more] [data-read-more-switch] p { text-align: center; position: absolute; top: calc(100% + 10px); left: 50%; -webkit-transform: translatex(-50%); transform: translatex(-50%); margin: 0; } [data-read-more] [data-read-more-switch] p[data-more] { display: block; } [data-read-more] [data-read-more-switch] p[data-less] { display: none; } .active[data-read-more] [data-read-more-switch] p[data-more] { display: none; } .active[data-read-more] [data-read-more-switch] p[data-less] { display: block; } [data-read-more*="100"] { height: 100px; } [data-read-more*="150"] { height: 150px; } [data-read-more*="200"] { height: 200px; } [data-read-more*="250"] { height: 250px; } [data-read-more*="300"] { height: 300px; } [data-read-more*="400"] { height: 400px; } /* specific styling */ .inverse [data-read-more] [data-read-more-switch] { background: rgba(0,0,0,1); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); border-bottom: 50px solid rgba(0,0,0,1); } /***********************/ /* widget social media */ /***********************/ /* Added at 29.12.20. */ .widgetWrapper {} .widgetWrapper .widget {} .widgetWrapper.socialMedia { margin-bottom: 30px; } .widgetWrapper.socialMedia .widget {} .widgetWrapper.socialMedia .widget .categoryPageGridTilesWrapper { max-width: 860px; margin: 0 auto; } /******************/ /* spawn messages */ /******************/ /* Added at 18.01.21. */ /* Edited at 19.01.21. Added z-index to make sure that spawn messages are always on top and exceed parent container. */ [data-spawn-messages] { text-align: right; z-index: 98; display: flex; flex-direction: column; } .lft[data-spawn-messages] { text-align: left; align-items: flex-start; } .rght[data-spawn-messages] { text-align: right; align-items: flex-end; } [data-spawn-messages] > div { height: 0; opacity: 0; position: relative; overflow: hidden; } [data-spawn-messages] > .spawnMessageWrapper { background-color: #f2f2f2; border-radius: 10px; margin-bottom: 5px; display: inline-block; max-width: 420px; } [data-spawn-messages] > .spawnMessageWrapper:last-child { margin-bottom: 0; } [data-spawn-messages] > .spawnMessageWrapper .spawnMessage { display: flex; flex-direction: row; flex-wrap: nowrap; padding: 10px 10px 10px 20px; } [data-spawn-messages] > .spawnMessageWrapper .spawnMessage .content { text-align: left; } [data-spawn-messages] > .spawnMessageWrapper .spawnMessage .content p.bodycopy:first-child { margin-top: 0; } [data-spawn-messages] > .spawnMessageWrapper .spawnMessage .content p.bodycopy:last-child { margin-bottom: 0; } [data-spawn-messages] > .spawnMessageWrapper .spawnMessage .info { display: flex; flex-direction: column; justify-content: flex-end; min-width: 70px; position: relative; padding-right: 30px; margin-left: 10px; } [data-spawn-messages] > .spawnMessageWrapper .spawnMessage .info p.bodycopy { text-align: right; margin: 0; } [data-spawn-messages] > .spawnMessageWrapper .spawnMessage .info p.bodycopy .globalIcon.tick { position: absolute; bottom: 7px; } [data-spawn-messages] > .spawnMessageWrapper .spawnMessage .info p.bodycopy .globalIcon.tick:after { border: 1px solid #ccc; border-width: 0 2px 2px 0; } [data-spawn-messages] > .spawnMessageWrapper .spawnMessage .info p.bodycopy .globalIcon.tick:nth-child(1) { right: 5px; z-index: 2; } [data-spawn-messages] > .spawnMessageWrapper .spawnMessage .info p.bodycopy .globalIcon.tick:nth-child(2) { right: -5px; bottom: 5px; z-index: 1; } [data-spawn-messages] > .spawnMessageWrapper .spawnMessage .info p.bodycopy .globalIcon.tick:nth-child(2):after { width: 4px; } [data-spawn-messages] > .spawnMessageWrapper .spawnMessage .info p.bodycopy .globalIcon.tick.active:after { border: 1px solid #00BF48; border-width: 0 2px 2px 0; } @media only screen and (max-width: 850px){ [data-spawn-messages] > .spawnMessageWrapper .spawnMessage { flex-direction: column; } [data-spawn-messages] > .spawnMessageWrapper .spawnMessage .info { margin-top: 5px; } } /* specific styling */ .variationA[data-spawn-messages] > .spawnMessageWrapper { background-color: #CBECFF; } .variationA[data-spawn-messages] > .spawnMessageWrapper .spawnMessage .content p.bodycopy, .variationA[data-spawn-messages] > .spawnMessageWrapper .spawnMessage .info p.bodycopy { color: #000; } .variationA[data-spawn-messages] > .spawnMessageWrapper .spawnMessage .info p.bodycopy .globalIcon.tick.active:after { border: 1px solid #1AA9FF; border-width: 0 2px 2px 0; } .variationB[data-spawn-messages] > .spawnMessageWrapper { background-color: #76E2A2; } .variationB[data-spawn-messages] > .spawnMessageWrapper .spawnMessage .content p.bodycopy, .variationB[data-spawn-messages] > .spawnMessageWrapper .spawnMessage .info p.bodycopy { color: #000; } .variationB[data-spawn-messages] > .spawnMessageWrapper .spawnMessage .info p.bodycopy .globalIcon.tick.active:after { border: 1px solid #00BF48; border-width: 0 2px 2px 0; } /******************/ /* zoom thumbnail */ /******************/ /* Added at 20.01.21. */ /* Edited at 07.04.21. Moved zoomThumbnail. */ /* Edited at 08.04.21. Updated zoomThumbnail. */ /* Edited at 11.08.21. Moved zoomThumbnail. */ /* Edited at 07.04.22. Moved thumbnail position to content.js. */ .zoomThumbnailWrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0); transition: all ease .3s; -moz-transition: all ease .3s; -webkit-transition: all ease .3s; cursor: pointer; } .zoomThumbnailWrapper * { cursor: pointer; } .zoomThumbnailWrapper .zoomThumbnail { position: absolute; right: -44%; width: 100%; max-width: 30%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: all ease .3s; -moz-transition: all ease .3s; -webkit-transition: all ease .3s; opacity: 0; } .zoomThumbnailWrapper .zoomThumbnail .imgHolder { width: 100%; padding-top: calc(100% - 4px); border-radius: 50%; border: 2px solid #fff; overflow: hidden; -webkit-box-shadow: 0 3px 2px rgba(0,0,0,0.2); -moz-box-shadow: 0 3px 2px rgba(0,0,0,0.2); box-shadow: 0 3px 2px rgba(0,0,0,0.2); transition: all ease .3s; -moz-transition: all ease .3s; -webkit-transition: all ease .3s; } .zoomThumbnailWrapper .zoomThumbnail.initialized { opacity: 1; } .zoomThumbnailWrapper .areas { position: absolute; top: 50%; left: 0; width: 100%; height: 100%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .zoomThumbnailWrapper .areas .globalIcon.close { position: absolute; top: 20%; right: 10%; opacity: 0; transition: all ease .3s; -moz-transition: all ease .3s; -webkit-transition: all ease .3s; } @media only screen and (max-width: 850px){ .zoomThumbnailWrapper .zoomThumbnail { top: 45%; right: -35%; width: 100%; max-width: 40%; } .zoomThumbnailWrapper .zoomThumbnail.initialized { right: -8%; } } /************************/ /* abandoned cart popup */ /************************/ /* Added at 11.05.21. */ /* Edited at 12.05.21. Replaced with carousel */ /* Edited at 08.06.21. Resized popup. */ /* Edited at 16.06.21. Updated color of button. */ /* Edited at 09.08.21. Positioned carousel absolute to give it responsive height. */ /* Edited at 26.08.21. Fixed empty popup bug. */ /* Edited at 07.10.21. Fixed empty popup bug (again). */ /* Edited at 02.06.23. Replaced carousel with product grid. */ /* Edited at 05.06.23. Fixed bug causing too big product tiles. */ .popupNotificationWrapper.abandonedCart {} .popupNotificationWrapper.abandonedCart .popupNotificationContainer { top: 100px; -webkit-transform: translatex(-50%) translatey(0); transform: translatex(-50%) translatey(0); } .popupNotificationWrapper.abandonedCart .introWrapper {} .popupNotificationWrapper.abandonedCart .introWrapper .intro {} .popupNotificationWrapper.abandonedCart .introWrapper .intro h4.heading { margin-bottom: 0; } .popupNotificationWrapper.abandonedCart .introWrapper .intro p.bodycopy:last-child { margin-bottom: 0; } .popupNotificationWrapper.abandonedCart .productGridWrapper { margin: 30px auto; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .popupNotificationWrapper.abandonedCart .productGridWrapper.initialized { background-color: #fff; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; margin: 0 10px; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper { margin: 0 5px; width: calc(33.33% - 5px); } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper:first-child { margin-left: 0; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper:last-child { margin-right: 0; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile { padding: 0 5px; white-space: normal; display: flex; flex-direction: column; position: relative; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap { margin-bottom: 9px; overflow: hidden;} .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap [data-image] { opacity: 1; transition: all .3s ease-in-out; transition-delay: 0.3s; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap [data-image-hover] { opacity: 0; transition: all .3s ease-in-out; transition-delay: 0.3s; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap > .areas > div:nth-child(1), .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap > .areas > div:nth-child(2) { background: #fff url(../icons/2021_HL04/loader.gif) center center no-repeat; height: 100%; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap > .areas > div:nth-child(1) .imgHolder, .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap > .areas > div:nth-child(2) .imgHolder { position: absolute; top: 0; left: 0; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap .areas .product-swatches { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; background-color: rgba(255,255,255,0.85); padding: 5px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translatey(100%); transition: all .3s ease-in-out; transition-delay: 0.3s; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap .areas .product-swatches p.bodycopy { text-align: center; margin: 5px 0; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap .areas .promotion { position: absolute; bottom: 1.5em; left: 0; z-index: 2; width: auto; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap .areas .promotion.fluid { transition: all .3s ease-in-out; transition-delay: 0.3s; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap .areas .product-love { opacity: 0; z-index: 2; top: 10px; left: 10px; position: absolute; transition: all .3s ease-in-out; transition-delay: 0.3s; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap .areas .product-love a { opacity: 0; display: inline-block; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile.initialized > .imageMap .areas .product-love a { opacity: 1; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap .areas a .promotion div { position: relative; width: auto; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile .product-info {} .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile .product-info h4.product-brand { text-align: left; width: calc(100% - 10px); margin: 0 auto 5px; font-family: "Futura PT W01 Bold"; line-height: 1; letter-spacing: .5px; font-size: 14px; text-transform: uppercase; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile .product-info h3.product-name { width: calc(100% - 10px); margin: 0 auto 5px; font-size: 15px; text-align: left; text-transform: none; text-overflow: ellipsis; white-space: nowrap; font-family: 'Futura PT W01 Book'; letter-spacing: normal; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile .product-info h3.product-name:first-letter { text-transform: uppercase; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile .product-type { font-family: "Futura PT W01 Medium"; color: #7f7f7f; font-size: 14px; line-height: 18px; width: calc(100% - 10px); margin: 0 auto; text-align: left; padding: 0; display: block; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile .product-type span {} .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile .product-pricing { text-align: left; width: calc(100% - 10px); margin: 0 auto; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile .product-pricing .product-price { color: #000; display: inline-block; font-family: "Futura PT W01 Medium"; vertical-align: middle; font-size: 16px; font-weight: 600; letter-spacing: 1px; line-height: 21px; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile .product-pricing .product-price .price-sales { display: inline-block; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile .placeholder { margin-top: 18px; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile .bodycopy.ctas { margin: 0; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile .moreProductsOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile .moreProductsOverlay p.bodycopy { margin: 0 auto 50px; } .popupNotificationWrapper.abandonedCart .outroWrapper {} .popupNotificationWrapper.abandonedCart .outroWrapper .outro { padding: 0 20px; } .popupNotificationWrapper.abandonedCart .outroWrapper .outro p.bodycopy:first-child { margin: 0 auto; } .popupNotificationWrapper.abandonedCart .outroWrapper .outro p.bttns.ctas .cta { background-color: #00BF48; } .popupNotificationWrapper.abandonedCart .popupNotificationOverlay { background: rgba(0, 0, 0, 0.6); } .popupNotificationWrapper.abandonedCart .popupNotification { padding-top: 10px !important; } @media only screen and (min-width: 1024px){ .popupNotificationWrapper.abandonedCart .popupNotificationContainer { min-width: 423px; max-width: 850px; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap:hover [data-image] { opacity: 0; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap:hover [data-image-hover] { opacity: 1; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap:hover .areas .product-swatches { opacity: 1; transform: translatey(0); } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap:hover .areas .promotion.fluid { bottom: 46px; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap:hover .areas .product-love { opacity: 1; } .popupNotificationWrapper.abandonedCart .outroWrapper .outro p.bttns.ctas .cta:hover { background-image: linear-gradient(#00D852,#00BF48); } } @media only screen and (max-width: 1024px){ .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper .productGridTile > .imageMap .areas .product-love { opacity: 1; } } @media only screen and (max-width : 850px){ .popupNotificationWrapper.abandonedCart .popupNotification { padding-top: 10px !important; } .popupNotificationWrapper.abandonedCart .productGridWrapper { margin: 15px auto; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid { margin: 0 5px; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper { width: calc(50% - 5px); margin: 0 2.5px; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper:nth-child(1) { margin-left: 0; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper:nth-child(2) { margin-right: 0; } .popupNotificationWrapper.abandonedCart .productGridWrapper .productGrid .productGridTileWrapper:nth-child(3) { display: none; } } /***************/ /* timed popup */ /***************/ /* Added at 30.07.21. */ .timedPopupWrapper { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 98; } .timedPopupWrapper .timedPopupOverlay { position: fixed; background-color: rgba(0,0,0,0.8); top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .timedPopupWrapper .timedPopup { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 2; } .timedPopupWrapper .timedPopup .timedPopupClose { position: absolute; top: 0; right: 0; width: 50px; height: 50px; cursor: pointer; z-index: 1; } .timedPopupWrapper .timedPopup .timedPopupClose:before, .timedPopupWrapper .timedPopup .timedPopupClose:after { position: absolute; content: ""; top: 50%; left: 50%; width: 16px; height: 2px; background-color: #000; } .timedPopupWrapper .timedPopup .timedPopupClose:before { -ms-transform: translate(-50%) rotate(-45deg); -webkit-transform: translate(-50%) rotate(-45deg); transform: translate(-50%) rotate(-45deg); } .timedPopupWrapper .timedPopup .timedPopupClose:after { -ms-transform: translate(-50%) rotate(45deg); -webkit-transform: translate(-50%) rotate(45deg); transform: translate(-50%) rotate(45deg); } .timedPopupWrapper .timedPopup .timedPopupContent { background-color: #fff; padding: 20px; } @media only screen and (max-width: 850px){ .timedPopupWrapper .timedPopup { width: calc(100% - 40px); } .timedPopupWrapper .timedPopup .timedPopupContent { padding: 40px 20px; } } /******************/ /* gift generator */ /******************/ /* Added at 10.11.21. */ /* Edited at 15.11.21. Added specific styling for specific categories. */ /* Edited at 16.11.21. Updated specific styling. */ /* Edited at 19.11.21. Updated ctas styling. */ /* Edited at 23.11.21. Fixed background bug with specific styling. */ /* Edited at 25.11.21. Fixed background size on moile. */ .giftGenerator {} .giftGenerator .giftGeneratorCarouselWrapper { position: relative; z-index: 1; } .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel {} .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider {} .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide {} .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .bttns.ctas.equal a.cta{ display: flex; align-items: center; justify-content: center; } .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .imgHolder { padding-top: 65%; } .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(1) .slide > .imageMap > .imgHolder, .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(2) .slide > .imageMap > .imgHolder, .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(3) .slide > .imageMap > .imgHolder, .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(4) .slide > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2021_HL12_TEST/sparkle.gif'); background-repeat: repeat; } .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .contentBG { background-color: #fff; top: 20%; left: 20%; width: 60%; height: 60%; } .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .contentBG > .flex { width: calc(100% - 30px); margin: 0 15px; } .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(4) .slide > .imageMap > .contentBG { top: 10%; left: 10%; width: 80%; height: 80%; } .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .introArea { top: 14%; height: 7%; } .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .outroArea { top: 82%; height: 7%; } .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; } .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper { width: 100%; } .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper .productCarousel { width: 100%; } .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide {} .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide .slide { width: 100%; } @media only screen and (max-width: 850px){ .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .imgHolder { padding-top: 164%; } .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .contentBG { top: 7%; left: 10%; width: 80%; height: 86%; } .giftGenerator .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper { width: 100%; } } /* specific styling */ .giftGenerator.men .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide h4.heading { color: #fff; } .giftGenerator.men .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .bttns.ctas a.cta { background-color: #151A2D; border-radius: 30px; } .giftGenerator.men .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(1) .slide > .imageMap > .imgHolder, .giftGenerator.men .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(2) .slide > .imageMap > .imgHolder, .giftGenerator.men .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(3) .slide > .imageMap > .imgHolder, .giftGenerator.men .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(4) .slide > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2021_HL12_TEST/sparkle2.gif'); background-color: #151A2D; background-size: 12%; } .giftGenerator.men .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .contentBG { background-color: #223148; border: 4px dotted #F9CC35; border-radius: 30px; } .giftGenerator.men .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide .slide .product-info .product-brand, .giftGenerator.men .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide .slide .product-info .product-name, .giftGenerator.men .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide .slide .product-info .product-name a.name-link, .giftGenerator.men .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide .slide .product-pricing .product-price { color: #fff; } .giftGenerator.women .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide h4.heading { color: #fff; } .giftGenerator.women .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .bttns.ctas a.cta { background-color: #5E1230; border-radius: 30px; } .giftGenerator.women .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .imgHolder { padding-top: 65%; } .giftGenerator.women .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(1) .slide > .imageMap > .imgHolder, .giftGenerator.women .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(2) .slide > .imageMap > .imgHolder, .giftGenerator.women .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(3) .slide > .imageMap > .imgHolder, .giftGenerator.women .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(4) .slide > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2021_HL12_TEST/sparkle2.gif'); background-color: #5E1230; background-size: 12%; } .giftGenerator.women .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .contentBG { background-color: #78264A; border: 4px dotted #F9CC35; border-radius: 30px; } .giftGenerator.women .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide .slide .product-info .product-brand, .giftGenerator.women .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide .slide .product-info .product-name, .giftGenerator.women .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide .slide .product-info .product-name a.name-link, .giftGenerator.women .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide .slide .product-pricing .product-price { color: #fff; } .giftGenerator.kids .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide h4.heading { color: #fff; } .giftGenerator.kids .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .bttns.ctas a.cta { background-color: #905E1F; border-radius: 30px; } .giftGenerator.kids .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(1) .slide > .imageMap > .imgHolder, .giftGenerator.kids .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(2) .slide > .imageMap > .imgHolder, .giftGenerator.kids .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(3) .slide > .imageMap > .imgHolder, .giftGenerator.kids .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide:nth-child(4) .slide > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2021_HL12_TEST/sparkle2.gif'); background-color: #905E1F; background-size: 12%; } .giftGenerator.kids .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .contentBG { background-color: #B67B2B; border: 4px dotted #F9CC35; border-radius: 30px; } .giftGenerator.kids .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide .slide .product-info .product-brand, .giftGenerator.kids .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide .slide .product-info .product-name, .giftGenerator.kids .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide .slide .product-info .product-name a.name-link, .giftGenerator.kids .giftGeneratorCarouselWrapper .giftGeneratorCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide .slide .product-pricing .product-price { color: #fff; } @media only screen and (max-width: 850px){ .giftGenerator.men .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .imgHolder { background-size: 34% !important; padding-top: 164%; } .giftGenerator.women .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .imgHolder { background-size: 34% !important; padding-top: 164%; } .giftGenerator.kids .giftGeneratorCarouselWrapper .giftGeneratorCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .imgHolder { background-size: 34% !important; padding-top: 164%; } } /*****************/ /* questionnaire */ /*****************/ /* Added at 04.01.22. Based on gift generator. */ /* Edited at 09.02.22. Replaced background. */ /* Edited at 15.02.22. Added intro styling. */ /* Edited at 17.02.22. Removed border radius. */ .questionnaireIntro { max-width: 850px; margin: 0 auto 60px; padding: 0 30px; } .questionnaireIntro p { font-size: 18px; } @media only screen and (max-width: 850px){ .questionnaireIntro { margin: 50px auto 60px; } .questionnaireIntro p { font-size: 14px; } } .questionnaire {} .questionnaire .questionnaireCarouselWrapper { position: relative; z-index: 1; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel {} .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider {} .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide {} .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .bttns.ctas.equal a.cta { display: flex; align-items: center; justify-content: center; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide h4.heading { max-width: 500px; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .answers { width: 100%; max-width: 700px; margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide [data-answer-id] { display: inline-block; margin-bottom: 20px; cursor: pointer; background-color: #fff; padding: 10px 5px; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide [data-answer-id]:last-child { margin-bottom: 0; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide [data-answer-id] p.bodycopy { text-align: left; position: relative; padding: 0 5px 0 39px; color: #000; margin: 0; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide [data-answer-id] p.bodycopy .globalIcon { position: absolute; top: 50%; left: 5px; -webkit-transform: translatey(-50%); transform: translatey(-50%); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .imgHolder { padding-top: 65%; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_black > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/CP_COLORQUIZ_BG_BLACK.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_blue > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/CP_COLORQUIZ_BG_BLUE.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_green > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/CP_COLORQUIZ_BG_GREEN.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_lila > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/CP_COLORQUIZ_BG_LILA.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_orange > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/CP_COLORQUIZ_BG_ORANGE.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_pink > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/CP_COLORQUIZ_BG_PINK.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_red > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/CP_COLORQUIZ_BG_RED.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_yellow > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/CP_COLORQUIZ_BG_YELLOW.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_all > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/CP_COLORQUIZ_BG_ALL.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .contentBG { top: 10%; left: 10%; width: 80%; height: 80%; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .contentBG > .flex { width: calc(100% - 30px); margin: 0 15px; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .introArea { top: 7%; height: 93%; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide:last-child .slide > .imageMap > .introArea { top: 10%; left: 10%; width: 80%; height: 80%; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide:last-child .slide > .imageMap > .introArea p.bodycopy { max-width: 500px; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .outroArea { top: 82%; height: 7%; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .productResultWrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .productResultWrapper .productCarouselWrapper { width: 100%; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .productResultWrapper .productCarouselWrapper .productCarousel { width: 100%; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide {} .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .productResultWrapper .productCarouselWrapper .productCarousel .imageMap.cycle-slide .slide { width: 100%; } @media only screen and (min-width: 850px){ .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide [data-answer-id] p.bodycopy { font-size: 18px; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide:last-child .slide > .imageMap > .introArea p.bodycopy { font-size: 20px; } } @media only screen and (max-width: 850px){ .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .answers { margin-top: 20px; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide [data-answer-id] { margin-bottom: 10px; padding: 5px 3px; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide [data-answer-id] p.bodycopy { font-size: 14px; padding: 0 5px 0 39px} .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .imgHolder { padding-top: 164%; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_black > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/_mobile/CP_MOB_COLORQUIZ_BG_BLACK.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_blue > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/_mobile/CP_MOB_COLORQUIZ_BG_BLUE.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_green > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/_mobile/CP_MOB_COLORQUIZ_BG_GREEN.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_lila > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/_mobile/CP_MOB_COLORQUIZ_BG_LILA.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_orange > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/_mobile/CP_MOB_COLORQUIZ_BG_ORANGE.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_pink > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/_mobile/CP_MOB_COLORQUIZ_BG_PINK.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_red > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/_mobile/CP_MOB_COLORQUIZ_BG_RED.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_yellow > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/_mobile/CP_MOB_COLORQUIZ_BG_YELLOW.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide.bg_all > .imageMap > .imgHolder { background-image: url('../../Category pages/_general/2022_HL03_COLORQUIZ/_mobile/CP_MOB_COLORQUIZ_BG_ALL.jpg'); } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide .slide > .imageMap > .contentBG { top: 7%; left: 12%; width: 76%; height: 86%; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .categoryPageSlider .imageMap.cycle-slide:last-child .slide > .imageMap > .introArea { top: 7%; left: 18%; width: 66%; height: 86%; } .questionnaire .questionnaireCarouselWrapper .questionnaireCarousel .productResultWrapper .productCarouselWrapper { width: 100%; } } /****************/ /* vip shopping */ /****************/ /* Added at 01.04.22. */ .vipAppointmentTriggerWrapper { display: none; } .vipAppointmentTriggerWrapper .vipAppointmentTrigger {} /*******************/ /* brands overview */ /*******************/ /* Added at 24.05.22. */ /* Edited at 25.05.22. Added some styling. */ /* Edited at 02.06.22. Added styling to have content columned. */ .brandsOverviewIntro { margin-top: 30px; padding: 0 30px; margin-bottom: 30px; border-bottom: 1px solid #dedede; } .brandsOverviewWrapper { width: 100%; max-width: 1310px; padding: 0 30px; margin: 0 auto; } .brandsOverviewWrapper .brandsOverview {} .brandsOverviewWrapper .brandsOverview .overview { padding-bottom: 50px; margin-bottom: 50px; border-bottom: 1px solid #dedede; } .brandsOverviewWrapper .brandsOverview .overview:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .brandsOverviewWrapper .brandsOverview .overview h4.heading {} .brandsOverviewWrapper .brandsOverview .overview h4.heading a { color: #000; text-decoration: none; } .brandsOverviewWrapper .brandsOverview .overview .index { display: flex; flex-direction: row; flex-wrap: wrap; width: calc(100% + 10px); margin: 0 -5px; } .brandsOverviewWrapper .brandsOverview .overview .index a { display: block; width: calc(3.84% - 10px); height: 48px; line-height: 48px; text-align: center; font-size: 22px; color: #000; margin: 5px; text-decoration: none; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .brandsOverviewWrapper .brandsOverview .overview .index .placeholder { display: block; width: calc(3.84% - 10px); height: 48px; line-height: 48px; text-align: center; font-size: 22px; color: #666; margin: 5px; text-decoration: none; background: #dedede; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; border-radius: 2px; cursor: default; opacity: 0.25; } .brandsOverviewWrapper .brandsOverview .overview .indicator {} .brandsOverviewWrapper .brandsOverview .overview .indicator p.bodycopy { font-size: 22px; } .brandsOverviewWrapper .brandsOverview .overview .indicatorContent { column-count: 5; column-gap: 20px; width: 100%; max-width: 1310px; column-fill: balance; } .brandsOverviewWrapper .brandsOverview .overview .indicatorContent p.bodycopy:first-child { margin-top: 0; } @media only screen and (min-width: 850px){ .brandsOverviewWrapper .brandsOverview .overview .index a:hover { background-color: #000; color: #fff; } } @media only screen and (max-width: 850px){ .brandsOverviewWrapper .brandsOverview .overview .index a { width: calc(12.5% - 10px); } .brandsOverviewWrapper .brandsOverview .overview .index .placeholder { width: calc(12.5% - 10px); } } /**************************/ /* user generated content */ /**************************/ /* Added at 24.05.22. */ /* Edited at 13.06.22. Hide 'load more' button from homepage and mainpages. Removed 'initialized' class. */ /* Edited at 26.07.22. Hide title on pdp by default. */ /* Edited at 27.01.23. Updated h3 styling because function is turned off. Need to check later. */ .ugc-carousel { display: block; } .page-home .ugc-carousel div[role="list"] + button, .page-category-11 .ugc-carousel div[role="list"] + button, .page-category-12 .ugc-carousel div[role="list"] + button, .page-category-00 .ugc-carousel div[role="list"] + button { display: none !important; } /* following should be enabled if workaround is enabled. */ /* .ugc-carousel h3.pdp-subtitles { display: none; } */ /*****************/ /* products grid */ /*****************/ /* Added at 11.08.22. This will mainly be used for SEO content pages. */ /* Edited at 15.08.22. Updated styling for variationB. */ /* Edited at 26.08.22. Fixed padding. */ .productsGridTiles { display: flex; flex-direction: row; flex-wrap: nowrap; } .productsGridTiles.variationA {} .productsGridTiles .productsGridTile { width: 50%; } .productsGridTiles .productsGridTile:nth-child(1) { padding: 10px; } .productsGridTiles.variationA .productsGridTile:nth-child(1) { padding: 10px 10px 10px 0; } .productsGridTiles.variationA .productsGridTile:nth-child(2) { padding: 0 0 0 10px; } .productsGridTiles.variationB .productsGridTile:nth-child(1) { padding: 10px 0 10px 10px; order: 2; } .productsGridTiles.variationB .productsGridTile:nth-child(2) { padding: 0 10px 0 0; order: 1; } .productsGridTiles .productsGridTile .productsGridImage { width: 100%; height: 100%; background-position: center center; background-size: cover; position: relative; overflow: hidden; } .productsGridTiles .productsGridTile .productsGrid { display: flex; flex-direction: row; flex-wrap: wrap; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile { width: 50%; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail { padding: 10px; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile:nth-child(odd) .productThumbnail { padding-left: 0; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile:nth-child(even) .productThumbnail { padding-right: 0; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap { margin-bottom: 9px; overflow: hidden;} .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap [data-image] { opacity: 1; transition: all .3s ease-in-out; transition-delay: 0.3s; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap [data-image-hover] { opacity: 0; transition: all .3s ease-in-out; transition-delay: 0.3s; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap > .areas > div:nth-child(1), .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap > .areas > div:nth-child(2) { background: #fff url(../icons/2021_HL04/loader.gif) center center no-repeat; height: 100%; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap > .areas > div:nth-child(1) .imgHolder, .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap > .areas > div:nth-child(2) .imgHolder { position: absolute; top: 0; left: 0; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap .areas .product-swatches { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; background-color: rgba(255,255,255,0.85); padding: 5px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translatey(100%); transition: all .3s ease-in-out; transition-delay: 0.3s; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap .areas .product-swatches p.bodycopy { text-align: center; margin: 5px 0; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap .areas .promotion { position: absolute; bottom: 1.5em; left: 0; z-index: 2; width: auto; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap .areas .promotion.fluid { transition: all .3s ease-in-out; transition-delay: 0.3s; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap .areas .product-love { opacity: 0; z-index: 2; top: 10px; left: 10px; position: absolute; transition: all .3s ease-in-out; transition-delay: 0.3s; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap .areas .product-love a { opacity: 0; display: inline-block; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail.initialized > .imageMap .areas .product-love a { opacity: 1; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap .areas a .promotion div { position: relative; width: auto; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail .product-info {} .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail .product-info h4.product-brand { text-align: left; width: calc(100% - 10px); margin: 0 auto; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail .product-info h3.product-name { color: #030406; width: calc(100% - 10px); margin: 0 auto; text-align: left; line-height: 1.4; text-transform: none; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail .product-info h3.product-name a.name-link { color: #000; text-decoration: none; font-family: "Futura PT W01 Medium"; width: 100%; margin: 0 auto; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; display: block; letter-spacing: normal; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail .product-type { font-family: "Futura PT W01 Medium"; color: #7f7f7f; font-size: 14px; line-height: 18px; width: calc(100% - 10px); margin: 0 auto; text-align: left; padding: 0; display: block; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail .product-type span {} .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail .product-pricing { text-align: left; width: calc(100% - 10px); margin: 0 auto; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail .product-pricing .product-price { color: #000; display: inline-block; font-family: "Futura PT W01 Medium"; vertical-align: middle; font-size: 16px; font-weight: 600; letter-spacing: 1px; line-height: 21px; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail .product-pricing .product-price .price-sales { display: inline-block; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail .placeholder { margin-top: 18px; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail .bodycopy.ctas { margin: 0; } @media only screen and (min-width: 1024px){ .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap:hover [data-image] { opacity: 0; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap:hover [data-image-hover] { opacity: 1; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap:hover .areas .product-swatches { opacity: 1; transform: translatey(0); } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap:hover .areas .promotion.fluid { bottom: 46px; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap:hover .areas .product-love { opacity: 1; } } @media only screen and (max-width: 1024px){ .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap .areas .product-love { opacity: 1; } } @media only screen and (max-width: 850px){ .productsGridTiles { flex-wrap: wrap; } .productsGridTiles.variationA {} .productsGridTiles .productsGridTile { width: 100%; } .productsGridTiles.variationA .productsGridTile:nth-child(1) { padding: 0 0 10px 0; } .productsGridTiles.variationA .productsGridTile:nth-child(2) { padding: 0; } .productsGridTiles.variationB .productsGridTile:nth-child(1) { padding: 10px 0 0 0; order: 1; } .productsGridTiles.variationB .productsGridTile:nth-child(2) { padding: 0; order: 2; } .productsGridTiles .productsGridTile .productsGridImage { width: 100%; padding-top: 84.85%; background-size: contain; background-repeat: no-repeat; background-position: center top; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile:nth-child(odd) .productThumbnail { padding: 10px 2.5px 10px 0; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile:nth-child(even) .productThumbnail { padding: 10px 0 10px 2.5px; } .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap .areas .product-love .product-lovebutton, .productsGridTiles .productsGridTile .productsGrid .productThumbnailTile .productThumbnail > .imageMap .areas .product-love .product-lovedbutton { transform: scale(0.6); } } /**************************/ /* title based on filters */ /**************************/ /* Added at 10.11.22. */ [data-title-based-on-filter] { display: none; } /***********************/ /* maintenance overlay */ /***********************/ /* Added at 02.02.23. */ .maintenanceWrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } .maintenanceWrapper .maintenance { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,1.0); } .maintenanceWrapper .maintenance .maintenanceContent { display: flex; flex-direction: column; justify-content: center; height: 100%; } .maintenanceWrapper .maintenance .maintenanceContent > div { margin: 0 30px; } @media only screen and (max-width: 850px){ .maintenanceWrapper .maintenance .maintenanceContent > div { margin: 0 20px; } .maintenanceWrapper .maintenance .maintenanceContent p.bodycopy { font-size: 18px; } } /********************/ /* generate qr code */ /********************/ /* Added at 06.02.23. */ .imageMap .imgHolder[data-generate-qr] { opacity: 0; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .imageMap .imgHolder[data-generate-qr][data-generated-qr="true"] { opacity: 1; } .imageMap .imgHolder[data-generate-qr] > canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /********************/ /* trigger redirect */ /********************/ /* Added at 23.03.23. */ [data-trigger-redirect] { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background: url(../icons/2021_HL04/loader.gif) center center no-repeat; } /**********************/ /* in stock attribute */ /**********************/ /* Added at 02.05.23. */ [data-in-stock] { display: none; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } [data-in-stock="true"] { display: block; } /*************************/ /* txt banner variations */ /*************************/ /* Added at 15.06.23. */ .txtBannerVariationWrapper { position: relative; } .txtBannerVariationWrapper .txtBannerVariation {} .txtBannerVariationWrapper .txtBannerVariation .bodycopy, .txtBannerVariationWrapper .txtBannerVariation .heading { margin: 0; z-index: 3; } .txtBannerVariationWrapper .txtBannerVariation .hSpace { margin-top: 5px; } .txtBannerVariationWrapper .txtBannerVariation .ctas.bttns { position: relative; z-index: 4; } .txtBannerVariationWrapper .areas { max-width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .txtBannerVariationWrapper .areas a { display: block; z-index: 3; } .txtBannerVariationWrapper .areas a div { display: block; position: absolute; z-index: 2; } @media only screen and (min-width: 850px){ .txtBannerVariationWrapper .txtBannerVariation .ctas.bttns { width: fit-content; margin: 0 auto; } } /* homepage */ .homePageGridTile .txtBannerVariationWrapper { margin-bottom: 10px; } .homePageGridTile .txtBannerVariationWrapper .txtBannerVariation { padding: calc(1% + 15px) 0 1%; } @media only screen and (max-width: 850px){ .homePageGridTile .txtBannerVariationWrapper .txtBannerVariation { padding: calc(3% + 15px) 0 3%; } .homePageGridTile .txtBannerVariationWrapper .txtBannerVariation .hSpace { margin-top: 0; } } /* main pages */ .categoryMainGridTile .txtBannerVariationWrapper { margin-bottom: 10px; } .categoryMainGridTile .txtBannerVariationWrapper .txtBannerVariation { padding: calc(1% + 5px) 0 1%; } @media only screen and (max-width: 850px){ .categoryMainGridTile .txtBannerVariationWrapper .txtBannerVariation { padding: calc(3% + 5px) 0 3%; } .categoryMainGridTile .txtBannerVariationWrapper .txtBannerVariation .hSpace { margin-top: 0; } } /* specific styling */ .homePageGridTile .txtBannerVariationWrapper.outlet .txtBannerVariation h1.heading { font-size: 60px; } .categoryMainGridTile .txtBannerVariationWrapper.outlet .txtBannerVariation h1.heading { font-size: 60px; } .homePageGridTile .txtBannerVariationWrapper.preSale .txtBannerVariation h1.heading { font-size: 60px; } .categoryMainGridTile .txtBannerVariationWrapper.preSale .txtBannerVariation h1.heading { font-size: 60px; } .homePageGridTile .txtBannerVariationWrapper.sale .txtBannerVariation h1.heading { font-size: 60px; } .categoryMainGridTile .txtBannerVariationWrapper.sale .txtBannerVariation h1.heading { font-size: 60px; } .homePageGridTile .txtBannerVariationWrapper.coupledSales .txtBannerVariation h1.heading { font-size: 60px; } .categoryMainGridTile .txtBannerVariationWrapper.coupledSales .txtBannerVariation h1.heading { font-size: 60px; } @media only screen and (max-width: 850px){ .homePageGridTile .txtBannerVariationWrapper.outlet .txtBannerVariation h1.heading { font-size: 36px; } .categoryMainGridTile .txtBannerVariationWrapper.outlet .txtBannerVariation h1.heading { font-size: 36px; } .homePageGridTile .txtBannerVariationWrapper.preSale .txtBannerVariation h1.heading { font-size: 36px; } .categoryMainGridTile .txtBannerVariationWrapper.preSale .txtBannerVariation h1.heading { font-size: 36px; } .homePageGridTile .txtBannerVariationWrapper.sale .txtBannerVariation h1.heading { font-size: 36px; } .categoryMainGridTile .txtBannerVariationWrapper.sale .txtBannerVariation h1.heading { font-size: 36px; } .homePageGridTile .txtBannerVariationWrapper.coupledSales .txtBannerVariation h1.heading { font-size: 36px; } .categoryMainGridTile .txtBannerVariationWrapper.coupledSales .txtBannerVariation h1.heading { font-size: 36px; } } /************************************************************************* 03.0 Navigation *************************************************************************/ /************************************************************************* 03.1 General */ /********************/ /* country selector */ /********************/ /* Edited at 07.11.19. Added HL13 as comment. */ /* Edited at 18.11.19. Removed comment. */ /* Edited at 31.12.12. */ /* Edited at 10.01.01. Added general background. */ /* Edited at 18.10.22. Updated styling, z-index and HTML elements/wrappers. */ /* Edited at 07.02.23. Removed z-index. */ .splash { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; background-image: url('../Navigation/country-selector/2020_HL03_GENERAL/Splash_Image_HL03_EN.jpg'); background-position: center top; background-size: cover; } /************************************************************************* 03.2 Header */ /***********/ /* meganav */ /***********/ /* Edited at 17.09.19. Adjusted some styles to fix coupon fonts. */ /* Edited at 17.05.23. Updated styling that conflicted with coupons. */ .mega-nav-dropdown { padding-bottom: 30px; padding-right: 27px; box-shadow: 0 5px 5px rgba( 0, 0, 0, 0.1); -webkit-box-shadow: 0 5px 5px rgba( 0, 0, 0, 0.25); } .mega-nav-dropdown .jsMegaNav { width: 1024px; } .mega-nav-dropdown .jsMegaNav tr{} .mega-nav-dropdown .jsMegaNav tr td { width: 25%; } .mega-nav-dropdown .jsMegaNav tr td ul { margin: 5px 20px 5px 0; float: none;} .mega-nav-dropdown .jsMegaNav tr td ul li { text-transform: none; line-height: initial; padding-bottom: 0; line-height: 27px; letter-spacing: 0.1em; } .mega-nav-dropdown .jsMegaNav tr td ul li .heading { line-height: initial; letter-spacing: initial; } .mega-nav-dropdown .jsMegaNav tr td ul li.jsMegaNavTitle { font-size: 20px; color: #000; font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: underline; cursor: default; } .mega-nav-dropdown .jsMegaNav tr td ul li.jsMegaNavTitle a { font-size: 20px; color: #000 !important; font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; } .mega-nav-dropdown .jsMegaNav tr td ul li.jsMegaNavTitle a:hover { font-size: 20px; color: #000 !important; } .mega-nav-dropdown .jsMegaNav tr td ul li.jsMegaNavSubtitle { font-size: 16px; color: #000; font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; cursor: default; } .mega-nav-dropdown .jsMegaNav tr td ul li.jsMegaNavSubtitle a { font-size: 16px; color: #000 !important; font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; } .mega-nav-dropdown .jsMegaNav tr td ul li.jsMegaNavSubtitle a:hover { font-size: 16px; color: #000 !important; } .mega-nav-dropdown .jsMegaNav tr td ul li a { color: #808080 !important; font-size: 11px; display: block; padding: 0; text-transform: uppercase; font-family: 'Futura PT W01 Book', arial, sans-serif; } .mega-nav-dropdown .jsMegaNav tr td ul li a:hover { color: #000 !important; font-size: 11px; border-bottom: none; padding: 0; font-weight: normal; } .mega-nav-dropdown .jsMegaNav tr td ul li a sup { text-transform: none; } .mega-nav-dropdown .jsMegaNav tr td ul li p.bodycopy.ctas a.cta { color: #000 !important; font-family: 'Futura PT W01 Heavy', arial, sans-serif; letter-spacing: 0; } .mega-nav-dropdown .jsMegaNav tr td ul li .inverse p.bodycopy.ctas a.cta { color: #fff !important; } /*******************/ /* meganav coupons */ /*******************/ /* Added at 08.11.17. */ /* Edited at 27.02.18. */ /* Edited at 23.07.19. Renamed and rearranged styling for new coupons. */ /* Edited at 19.09.19. Removed bunch of old styling. Added 100% width to h4 to fix IE bug. */ /* Edited at 02.06.21. Replaced H4 with normal P. */ /* Edited at 20.07.21. Adjusted size of first flex layer. */ /* Edited at 09.03.23. Updated margin of title. */ .meganavCouponWrapper { width: 100%; max-width: 180px; } .meganavCouponWrapper .meganavCoupon { position: relative; z-index: 1; } .meganavCouponWrapper .meganavCoupon .flex p.title { width: 100%; font-family: "Futura PT W01 Heavy", arial, sans-serif; text-transform: uppercase; white-space: normal; color: #000; font-size: 22px; margin-bottom: 0; } .meganavCouponWrapper .meganavCoupon .flex p.title sup { top: -0.5em; font-size: 0.6em; } .meganavCouponWrapper .meganavCoupon .inverse p.title { color: #fff; } .meganavCouponWrapper .meganavCoupon .center p.title { text-align: center; } .meganavCouponWrapper .meganavCoupon > .imageMap > .areas > .flex { height: calc(100% - 30px); } /****************/ /* meganav USPs */ /****************/ /* Added at 28.03.18. */ /* Edited at 18.06.20. Removed tick icon. */ /* Edited at 28.12.20. Added styling to display new tick icon. */ /* Edited at 09.11.21. Updated USPs with start/end date spans. */ /* Edited at 29.06.22. Removed letterspacing. */ .mega-nav-dropdown .meganavUspsWrapper { transform: translatey(30px); -webkit-transform: translatey(30px); } .mega-nav-dropdown .meganavUspsWrapper .meganavUsps { padding: 20px; background-color: #fafafa; border-top: 1px solid #dedede; } .mega-nav-dropdown .meganavUspsWrapper .meganavUsps ul { list-style: none; margin: 0 auto; padding: 0 10px; width: 100%; max-width: 1560px; float: none; } .mega-nav-dropdown .meganavUspsWrapper .meganavUsps ul li { display: inline-block !important; font-size: 16px; letter-spacing: 0; text-align: left; line-height: 30px; margin: 0 50px 0 0!important; vertical-align: top; padding-bottom: 0; text-transform: none; z-index: 1; position: relative; } .mega-nav-dropdown .meganavUspsWrapper .meganavUsps ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) { position: relative; width: 24px; height: 17px; display: inline-block; margin-right: 5px; } .mega-nav-dropdown .meganavUspsWrapper .meganavUsps ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) .globalIcon { position: absolute; top: 0; left: 0; } @media only screen and (max-width: 850px){ .mega-nav-dropdown .meganavUspsWrapper { padding: 0 10px; } .mega-nav-dropdown .meganavUspsWrapper .meganavUsps ul { margin: 0 0 0 40px; } .mega-nav-dropdown .meganavUspsWrapper .meganavUsps ul li { display: list-item; text-align: left; line-height: normal; float: none !important; } .mega-nav-dropdown .meganavUspsWrapper .meganavUsps ul li:first-child { margin-top: 0 !important; } .mega-nav-dropdown .meganavUspsWrapper .meganavUsps ul li:last-child { margin-bottom: 0 !important; } } /************************************************************************* 03.3 LHN */ /*****************/ /* category tags */ /*****************/ /* Added at 29.10.19. */ /* Edited at 03.01.20. Fixed IE Bug. */ /* Edited at 19.11.20. Fixed overflow on mobile. */ /* Edited at 04.03.21. Updated superscript styling. */ /* Edited at 24.01.23. Updated script to fit replatforming. */ /* Edited at 13.02.23. Fixed bugs in mobile menu. */ a span.tag { margin-left: 5px; padding: 3px 5px; color: #fff; font-family: 'Futura PT W01 Heavy', arial, sans-serif; background-color: #000; font-size: 9px; line-height: 10px; text-transform: uppercase; border-top: none !important; display: inline-block; -webkit-transform: translatey(-2px); transform: translatey(-2px); } a span.tag sup { top: 0.45em; vertical-align: super; } a span.tagIcon { margin-left: 3px; width: 13px; height: 15px; overflow: hidden; border-top: none !important; display: inline-block; -webkit-transform: translatey(2px); transform: translatey(2px); } @media only screen and (max-width : 850px){ a span.tag { font-size: 11px; line-height: 13px; -webkit-transform: translatey(-3px); transform: translatey(-3px); } a span.tagIcon { margin-left: 0; width: 18px; height: 15px; position: relative; overflow: visible; } a span.tagIcon svg { position: absolute; top: -50%; left: 0; } .menu-category li.level-1-category :first-of-type { border-top: none } } /* fix for mobile menu */ .dropdown-menu a > span[data-category-marker] { margin-right: auto; } .dropdown-menu a > .tag { margin-right: auto; } /************************************************************************* 03.4 Footer */ /***************/ /* light optin */ /***************/ /* Added at 25.09.19. */ .selligent-asset-container { clear: both; } /****************/ /* livechat bar */ /****************/ /* Added at 25.09.20. */ /* Edited at 29.09.20. Forced hidden livechat bar from FAQ with important. This can be updated to only none, after schedule is removed from content. */ /* Edited at 03.02.23. Updated styling to fit replatforming. */ /* hide from specific pages */ body[class*="folderid-cs-faq-"] .footer-livechat.general { display: none; } /**********************/ /* subscription popup */ /**********************/ /* Added at 07.05.20. */ /* Edited at 11.03.21. Replaced loader icon. */ /* Edited at 09.11.22. Updated styling after adding image. */ .subscriptionPopupWrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; display: none; } .subscriptionPopupWrapper.active { display: block; } .subscriptionPopupWrapper .subscriptionPopupOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0,0,0,0.5); cursor: pointer; } .subscriptionPopupWrapper .subscriptionPopupLoader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; background: url(../icons/2021_HL04/loader.gif) center center no-repeat rgba(255, 255, 255, 0.5); display: none; } .subscriptionPopupWrapper .subscriptionPopup { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; max-width: 500px; padding: 20px 20px 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff; z-index: 2; } .subscriptionPopupWrapper .subscriptionPopup .imageMapWrapper { width: 100%; margin-top: 30px; } .subscriptionPopupWrapper .subscriptionPopup .subscriptionPopupClose { position: absolute; top: 0; right: 0; width: 50px; height: 50px; cursor: pointer; z-index: 1; } .subscriptionPopupWrapper .subscriptionPopup .subscriptionPopupClose:before, .subscriptionPopupWrapper .subscriptionPopup .subscriptionPopupClose:after { position: absolute; content: ""; top: 50%; left: 50%; width: 16px; height: 2px; background-color: #000; } .subscriptionPopupWrapper .subscriptionPopup .subscriptionPopupClose:before { -ms-transform: translate(-50%) rotate(-45deg); -webkit-transform: translate(-50%) rotate(-45deg); transform: translate(-50%) rotate(-45deg); } .subscriptionPopupWrapper .subscriptionPopup .subscriptionPopupClose:after { -ms-transform: translate(-50%) rotate(45deg); -webkit-transform: translate(-50%) rotate(45deg); transform: translate(-50%) rotate(45deg); } .subscriptionPopupWrapper .subscriptionPopup .content form {} .subscriptionPopupWrapper .subscriptionPopup .content form .formElements { display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; } .subscriptionPopupWrapper .subscriptionPopup .content form .formElements .formElement {} .subscriptionPopupWrapper .subscriptionPopup .content form label[generated="true"] { padding: 10px; background-color: #FFDE88; border: 1px solid #F4BD2D; position: relative; text-align: left; margin: 7px 0 0 0; display: inline-block; float: none; } .subscriptionPopupWrapper .subscriptionPopup .content form label[generated="true"]:before, .subscriptionPopupWrapper .subscriptionPopup .content form label[generated="true"]:after { content: ""; position: absolute; border: 10px solid transparent; width: 0; height: 0; } .subscriptionPopupWrapper .subscriptionPopup .content form label[generated="true"]:before { left: 10px; top: -20px; border-left-color: transparent; border-bottom-color: #F4BD2D; } .subscriptionPopupWrapper .subscriptionPopup .content form label[generated="true"]:after { left: 10px; top: -19px; border-left-color: transparent; border-bottom-color: #FFDE88; } .subscriptionPopupWrapper .subscriptionPopup .content form button { padding: 15px 26px; background-color: #000; color: #fff; text-transform: uppercase; font-size: 12px; font-family: 'Futura PT W01 Heavy', arial, sans-serif; border: none; appearance: none; -webkit-appearance: none; cursor: pointer; } .subscriptionPopupWrapper .subscriptionPopup .content.subscribe { display: flex; flex-direction: column; justify-content: center; align-items: center; } .subscriptionPopupWrapper .subscriptionPopup .content.subscribe .copy p.bttns.ctas a { margin: 0; } .subscriptionPopupWrapper .subscriptionPopup .content.subscribe form {} .subscriptionPopupWrapper .subscriptionPopup .content.subscribe form input[type="email"] { width: 100%; height: 43px; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences { display: flex; flex-direction: row; justify-content: center; align-items: top; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form .formElements { flex-direction: column; align-items: start; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form .formElements .formElement .checkBox label, .subscriptionPopupWrapper .subscriptionPopup .content.preferences form .formElements .formElement .checkBox .label { display: inline-block; font-weight: normal; cursor: pointer; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form .formElements .formElement .checkBox label .labelHolder.chckBx { display: inline-block; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form .formElements .formElement .checkBox .checkBoxHolder { width: 25px; height: 25px; cursor: pointer; display: inline-block; background-color: #dedede; position: relative; margin-right: 10px; -ms-transform: translatey(5px); -webkit-transform: translatey(5px); -moz-transform: translatey(5px); -o-transform: translatey(5px); transform: translatey(5px); } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form .formElements .formElement .checkBox .checkBoxHolder:after { content: ""; position: absolute; display: none; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form .formElements .formElement .checkBox .checkBoxHolder:after { left: 9px; top: 5px; width: 7px; height: 12px; border: 1px solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form .formElements .formElement .checkBox input:checked ~ .checkBoxHolder { background-color: #000; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form .formElements .formElement .checkBox input:checked ~ .checkBoxHolder:after { display: block; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form button { margin-top: 10px; } .subscriptionPopupWrapper .subscriptionPopup .content.confirmation { display: flex; flex-direction: column; justify-content: center; align-items: center; } .page-cart .subscriptionPopupWrapper, .page-account .subscriptionPopupWrapper { height: 0px; border-bottom: 1px solid #dedede; } .page-cart .subscriptionPopupWrapper .subscriptionPopup, .page-account .subscriptionPopupWrapper .subscriptionPopup, .folderid-selligent-light-optin-page .subscriptionPopupWrapper .subscriptionPopup { display: none; } @media only screen and (min-width: 850px){ .subscriptionPopupWrapper .subscriptionPopup .content.subscribe .copy { display: flex; flex-direction: column; align-items: center; } .subscriptionPopupWrapper .subscriptionPopup .content.subscribe .copy p.bodycopy {} .subscriptionPopupWrapper .subscriptionPopup .content.subscribe .copy p.bodycopy.uppercase { margin-bottom: 0; } .subscriptionPopupWrapper .subscriptionPopup .content.subscribe form { display: inline-block; text-align: left; } .subscriptionPopupWrapper .subscriptionPopup .content.subscribe form input[type="email"] { width: 400px; } .subscriptionPopupWrapper .subscriptionPopup .content.subscribe form button { margin-left: 8px; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences { max-width: 1024px; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences .copy { max-width: 50%; margin-right: 20px; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences .copy p.bodycopy.uppercase { margin-bottom: 0; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form .formElements { flex-direction: row; flex-wrap: wrap; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form .formElements .formElement { width: 50%; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form .formElements .formElement:last-child { width: 100%; } .subscriptionPopupWrapper .subscriptionPopup .content.confirmation .copy { display: flex; flex-direction: column; align-items: center; } .subscriptionPopupWrapper .subscriptionPopup .content.confirmation .copy p.bodycopy {} .subscriptionPopupWrapper .subscriptionPopup .content.confirmation .copy p.bodycopy.uppercase { margin-bottom: 0; } } @media only screen and (max-width: 850px){ .subscriptionPopupWrapper .subscriptionPopup .content form .formElements { flex-direction: column; justify-content: center; } .subscriptionPopupWrapper .subscriptionPopup .content form .formElements .formElement { width: 100%; padding-bottom: 10px; text-align: center; } .subscriptionPopupWrapper .subscriptionPopup .content form .formElements .formElement:last-child { padding-bottom: 0; } .subscriptionPopupWrapper .subscriptionPopup .content form button {} .subscriptionPopupWrapper .subscriptionPopup .content.subscribe { flex-direction: column; } .subscriptionPopupWrapper .subscriptionPopup .content.subscribe .copy p.bodycopy { text-align: center; } .subscriptionPopupWrapper .subscriptionPopup .content.subscribe form { width: 100%; } .subscriptionPopupWrapper .subscriptionPopup .content.subscribe form input[type="email"] { height: 38px; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences { flex-direction: column; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form { width: 100%; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form .formElements { flex-direction: row; flex-wrap: wrap; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form .formElements .formElement { width: 50%; } .subscriptionPopupWrapper .subscriptionPopup .content.preferences form .formElements .formElement:last-child { width: 100%; } .subscriptionPopupWrapper .subscriptionPopup .content.confirmation { flex-direction: column; } } /************************************************************************* 04.0 Homepage *************************************************************************/ /***********/ /* general */ /***********/ /* Edited at 05.08.19. */ /* Edited at 12.08.19. Changed max-width from 1600px to 1920px. */ /* Edited at 21.08.20. Changed max-width from 1920px to 1600px. */ /* Edited at 23.23.20. Removed margin from content asset wrapper. */ .page-home {} /********/ /* USPs */ /********/ /* Added at 27.11.19. */ /* Edited at 05.06.20. Styled b. */ /* Edited at 18.06.20. Removed tick icon. */ /* Edited at 28.12.20. Added styling to display new tick icon. */ /* Edited at 09.11.21. Updated USPs with start/end date spans. */ /* Edited at 29.06.22. Removed letterspacing. */ .homeUspsWrapper { background-color: #fff; } .homeUspsWrapper .homeUsps { padding: 6px 0 6px; } .homeUspsWrapper .homeUsps ul { max-width: 1600px; position: relative; list-style: none; margin: 0 auto; padding: 0 30px; display: flex; flex-wrap: nowrap; justify-content: flex-start; } .homeUspsWrapper .homeUsps ul li { display: block; width: auto; font-size: 15px; letter-spacing: 0; text-align: center; margin: 0 10px; z-index: 1; position: relative; } .homeUspsWrapper .homeUsps ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) { position: relative; width: 16px; height: 13px; display: inline-block; margin-right: 2px; } .homeUspsWrapper .homeUsps ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) .globalIcon { position: absolute; top: 0; left: 0; } .homeUspsWrapper .homeUsps ul li:first-child { margin-left: 0; } .homeUspsWrapper .homeUsps ul li:last-child { margin-right: 0; } .homeUspsWrapper .homeUsps ul li b { font-family: 'Futura PT W01 Medium', arial, sans-serif; font-weight: 900; } @media only screen and (max-width: 1024px){ .homeUspsWrapper .homeUsps ul { justify-content: center; } } @media only screen and (max-width: 850px){ .homeUspsWrapper .cycle-slideshow .cycle-slide { width: 100%; } .homeUspsWrapper .homeUsps { padding: 6px 0 1px; } .homeUspsWrapper .homeUsps ul { justify-content: center; } } /***************/ /* grid (2020) */ /***************/ /* Added at 03.07.19. This grid with more banners was introduced with 2019_HL10. */ /* Edited at 03.07.19. */ /* Edited at 15.07.19. Updated font sizes. Added fix to margin recommendations carousel. */ /* Edited at 25.07.19. Changed H3 styling to only text alignment. Also edited H3 of Certona. */ /* Edited at 31.07.20. Added four columned layout. */ /* Edited at 19.08.20. Added max width to homepage 'full' grid tile. */ /* Edited at 17.01.22. Removed specialOpeningHours bar styling. Added extra styling for grid-4 on category mains. */ /* Edited at 10.01.23. Added grid-row styling that is not existing anymore on new platform. */ .grid-row.grid-1 { width: 33.33333%; } .homePageGridTile { position: relative; z-index: 1; } .homePageGridTile.full { max-width: 1600px; margin-left: auto; margin-right: auto; } .homePageGridTile.full h3.heading { text-align: center; } /* two columns */ .homePageGridTile.col-1-2 { margin-right: 5px; } .homePageGridTile.col-2-2 { margin-left: 5px; } /* three columns */ .homePageGridTile.col-1-3 { margin-right: 6.5px; } .homePageGridTile.col-2-3 { margin-left: 3.25px; margin-right: 3.25px; } .homePageGridTile.col-3-3 { margin-left: 6.5px; } /* four columns */ .homePageGridTile.col-1-4 { margin: 0 6.5px 0 0; } .homePageGridTile.col-2-4 { margin: 0 5px 0 3.5px; } .homePageGridTile.col-3-4 { margin: 0 3.5px 0 5px; } .homePageGridTile.col-4-4 { margin: 0 0 0 6.5px; } /* imagemaps */ .homePageGridTile.full > .imageMap, .homePageGridTile.col-1-2 > .imageMap, .homePageGridTile.col-2-2 > .imageMap, .homePageGridTile.col-1-3 > .imageMap, .homePageGridTile.col-2-3 > .imageMap, .homePageGridTile.col-3-3 > .imageMap, .homePageGridTile.col-1-4 > .imageMap, .homePageGridTile.col-2-4 > .imageMap, .homePageGridTile.col-3-4 > .imageMap, .homePageGridTile.col-4-4 > .imageMap, .homePageGridTile.full > .homePageSlider, .homePageGridTile.col-1-2 > .homePageSlider, .homePageGridTile.col-2-2 > .homePageSlider, .homePageGridTile.col-1-3 > .homePageSlider, .homePageGridTile.col-2-3 > .homePageSlider, .homePageGridTile.col-3-3 > .homePageSlider, .homePageGridTile.col-1-4 > .homePageSlider, .homePageGridTile.col-2-4 > .homePageSlider, .homePageGridTile.col-3-4 > .homePageSlider, .homePageGridTile.col-4-4 > .homePageSlider { margin-bottom: 10px; } .homePageGridTile.full > .navigation-overlay > .imageMap, .homePageGridTile.col-1-2 > .navigation-overlay > .imageMap, .homePageGridTile.col-2-2 > .navigation-overlay > .imageMap, .homePageGridTile.col-1-3 > .navigation-overlay > .imageMap, .homePageGridTile.col-2-3 > .navigation-overlay > .imageMap, .homePageGridTile.col-3-3 > .navigation-overlay > .imageMap, .homePageGridTile.col-1-4 > .navigation-overlay > .imageMap, .homePageGridTile.col-2-4 > .navigation-overlay > .imageMap, .homePageGridTile.col-3-4 > .navigation-overlay > .imageMap, .homePageGridTile.col-4-4 > .navigation-overlay > .imageMap { margin-top: -10px; } /* mobile only */ @media only screen and (max-width: 850px){ .grid-row.grid-1 { width: 50%; } .page-home .grid-row.grid-2 { width: 50%; } .homePageGridTile.full {} /* two columns */ .homePageGridTile.col-1-2, .homePageGridTile.col-2-2 { width: 100%; margin: 0; } /* three columns */ .homePageGridTile.col-1-3, .homePageGridTile.col-2-3, .homePageGridTile.col-3-3 {} /* four columns */ .homePageGridTile.col-1-4 { margin: 0 5px 0 0; } .homePageGridTile.col-2-4 { margin: 0 0 0 5px; } .homePageGridTile.col-3-4 { margin: 0 5px 0 0; } .homePageGridTile.col-4-4 { margin: 0 0 0 5px; } /* imagemaps */ .homePageGridTile.full > .imageMap, .homePageGridTile.col-1-2 > .imageMap, .homePageGridTile.col-2-2 > .imageMap, .homePageGridTile.col-1-3 > .imageMap, .homePageGridTile.col-2-3 > .imageMap, .homePageGridTile.col-3-3 > .imageMap, .homePageGridTile.col-1-4 > .imageMap, .homePageGridTile.col-2-4 > .imageMap, .homePageGridTile.col-3-4 > .imageMap, .homePageGridTile.col-4-4 > .imageMap, .homePageGridTile.full > .homePageSlider, .homePageGridTile.col-1-2 > .homePageSlider, .homePageGridTile.col-2-2 > .homePageSlider, .homePageGridTile.col-1-3 > .homePageSlider, .homePageGridTile.col-2-3 > .homePageSlider, .homePageGridTile.col-3-3 > .homePageSlider, .homePageGridTile.col-1-4 > .homePageSlider, .homePageGridTile.col-2-4 > .homePageSlider, .homePageGridTile.col-3-4 > .homePageSlider, .homePageGridTile.col-4-4 > .homePageSlider { margin-bottom: 10px; } .homePageGridTile.full > .navigation-overlay > .imageMap, .homePageGridTile.col-1-2 > .navigation-overlay > .imageMap, .homePageGridTile.col-2-2 > .navigation-overlay > .imageMap, .homePageGridTile.col-1-3 > .navigation-overlay > .imageMap, .homePageGridTile.col-2-3 > .navigation-overlay > .imageMap, .homePageGridTile.col-3-3 > .navigation-overlay > .imageMap, .homePageGridTile.col-1-4 > .navigation-overlay > .imageMap, .homePageGridTile.col-2-4 > .navigation-overlay > .imageMap, .homePageGridTile.col-3-4 > .navigation-overlay > .imageMap, .homePageGridTile.col-4-4 > .navigation-overlay > .imageMap { margin-top: -10px; } } /* additions */ .grid-row.grid-4 { width: 25%; float: left; } @media only screen and (max-width: 1024px){ .page-category-11 .grid-row.grid-4, .page-category-12 .grid-row.grid-4, .page-category-00 .grid-row.grid-4 { width: 50%; } } @media only screen and (max-width: 850px){ .grid-row.grid-4 { width: 50%; } } /* fixes */ .page-home .get-the-look { padding-top: 0.1px; } .page-home .get-the-look .product-reco-slider { margin-top: 0; } .page-home .get-the-look .product-reco-slider .pdp-subtitles { font-size: 24px; margin-top: 1.5em; } @media only screen and (max-width: 850px){ .page-home .get-the-look .product-reco-slider .pdp-subtitles { font-size: 22px; } } /**********************************/ /* faq button for visitors in app */ /**********************************/ /* Added at 23.12.16 */ .app_button_faq { background: #1A1A1A; padding: 0.75em 3.0em; } .app_button_faq a { color: #949494; text-transform: uppercase; margin: 0 auto; background: #0C0C0C; text-align: center; text-decoration: none; display: block; font-size: 1.0em; line-height: 3.5em; font-family: 'Futura PT W01 Book', arial, sans-serif; font-weight: bold; } .app_button_faq a:hover { color: #FF690C; } .app_button_faq a span {} /*******************/ /* shopping awards */ /*******************/ /* Added at 06.02.20. Can be removed after 29.02.20. */ .page-home .shoppingAwardsWrapperDesktop {} .page-home .shoppingAwardsWrapperDesktop .imageMap {} .page-home .shoppingAwardsWrapperDesktop .imageMap .imgHolder { padding-top: 4.9%; } .page-home .shoppingAwardsWrapperDesktop .imageMap > .imgHolder { background-image: url('../Home page/2020_HL03/HP_HL03_SHOPPINGAWARD_BACKGROUND_EN.jpg'); } .page-home .shoppingAwardsWrapperDesktop .imageMap .areas > .imgHolder { background-image: url('../Home page/2020_HL03/HP_HL03_SHOPPINGAWARD_TXT_NL.png'); } .page-home .shoppingAwardsWrapperMobile {} .page-home .shoppingAwardsWrapperMobile .imageMap {} .page-home .shoppingAwardsWrapperMobile .imageMap .imgHolder { padding-top: 23%; } .page-home .shoppingAwardsWrapperMobile .imageMap > .imgHolder { background-image: url('../Home page/2020_HL03/_mobile/HP_MOB_HL03_SHOPPINGAWARD_BACKGROUND_EN.jpg'); } .page-home .shoppingAwardsWrapperMobile .imageMap .areas > .imgHolder { background-image: url('../Home page/2020_HL03/_mobile/HP_MOB_HL03_SHOPPINGAWARD_TXT_NL.png'); } /************************************************************************* 05.0 Main pages *************************************************************************/ /***************/ /* grid (2018) */ /***************/ /* Added at 20.08.18. This grid with smaller margins was introduced with 2018_HL11. */ /* Edited at 01.02.22. Added 4 columned grid. */ /* Edited at 03.11.22. Updated styling to maintain margin on mobile. */ .grid-row.grid-1-3 { width: 33.33333%; } .categoryMainGridTile { position: relative; z-index: 1; } .categoryMainGridTile.full {} /* two columns */ .categoryMainGridTile.col-1-2 { margin-right: 5px; } .categoryMainGridTile.col-2-2 { margin-left: 5px; } /* three columns */ .categoryMainGridTile.col-1-3 { margin-right: 6.5px; } .categoryMainGridTile.col-2-3 { margin-left: 3.25px; margin-right: 3.25px; } .categoryMainGridTile.col-3-3 { margin-left: 6.5px; } /* four columns */ .categoryMainGridTile.col-1-4 { margin: 0 7.5px 0 0; } .categoryMainGridTile.col-2-4 { margin: 0 5px 0 2.5px; } .categoryMainGridTile.col-3-4 { margin: 0 2.5px 0 5px; } .categoryMainGridTile.col-4-4 { margin: 0 0 0 7.5px; } /* imagemaps */ .categoryMainGridTile.full > .imageMap { margin-bottom: 10px; } .categoryMainGridTile.col-1-2 > .imageMap, .categoryMainGridTile.col-2-2 > .imageMap, .categoryMainGridTile.col-1-3 > .imageMap, .categoryMainGridTile.col-2-3 > .imageMap, .categoryMainGridTile.col-3-3 > .imageMap, .categoryMainGridTile.col-1-4 > .imageMap, .categoryMainGridTile.col-2-4 > .imageMap, .categoryMainGridTile.col-3-4 > .imageMap, .categoryMainGridTile.col-4-4 > .imageMap, .categoryMainGridTile.full > .categoryMainSlider, .categoryMainGridTile.col-1-2 > .categoryMainSlider, .categoryMainGridTile.col-2-2 > .categoryMainSlider, .categoryMainGridTile.col-1-3 > .categoryMainSlider, .categoryMainGridTile.col-2-3 > .categoryMainSlider, .categoryMainGridTile.col-3-3 > .categoryMainSlider, .categoryMainGridTile.col-1-4 > .categoryMainSlider, .categoryMainGridTile.col-2-4 > .categoryMainSlider, .categoryMainGridTile.col-3-4 > .categoryMainSlider, .categoryMainGridTile.col-4-4 > .categoryMainSlider { margin-bottom: 10px; } .categoryMainGridTile.full > .navigation-overlay > .imageMap, .categoryMainGridTile.col-1-2 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-2-2 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-1-3 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-2-3 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-3-3 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-1-4 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-2-4 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-3-4 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-4-4 > .navigation-overlay > .imageMap { margin-top: -10px; } @media only screen and (max-width: 1024px){ /* four columns */ .categoryMainGridTile.col-1-4 { margin: 0 5px 0 0; } .categoryMainGridTile.col-2-4 { margin: 0 0 0 5px; } .categoryMainGridTile.col-3-4 { margin: 0 5px 0 0; } .categoryMainGridTile.col-4-4 { margin: 0 0 0 5px; } } @media only screen and (max-width: 850px){ .grid-row.grid-1-3 { width: 100%; } .categoryMainGridTile.full {} /* two columns */ .categoryMainGridTile.col-1-2:not([data-maintain-margin]), .categoryMainGridTile.col-2-2:not([data-maintain-margin]) { margin-left: 0; margin-right: 0; } /* three columns */ .categoryMainGridTile.col-1-3:not([data-maintain-margin]), .categoryMainGridTile.col-2-3:not([data-maintain-margin]), .categoryMainGridTile.col-3-3:not([data-maintain-margin]) { margin-left: 0; margin-right: 0; } /* imagemaps */ .categoryMainGridTile.full > .imageMap { margin-bottom: 20px; } .categoryMainGridTile.col-1-2 > .imageMap, .categoryMainGridTile.col-2-2 > .imageMap, .categoryMainGridTile.col-1-3 > .imageMap, .categoryMainGridTile.col-2-3 > .imageMap, .categoryMainGridTile.col-3-3 > .imageMap, .categoryMainGridTile.col-1-4 > .imageMap, .categoryMainGridTile.col-2-4 > .imageMap, .categoryMainGridTile.col-3-4 > .imageMap, .categoryMainGridTile.col-4-4 > .imageMap, .categoryMainGridTile.full > .categoryMainSlider, .categoryMainGridTile.col-1-2 > .categoryMainSlider, .categoryMainGridTile.col-2-2 > .categoryMainSlider, .categoryMainGridTile.col-1-3 > .categoryMainSlider, .categoryMainGridTile.col-2-3 > .categoryMainSlider, .categoryMainGridTile.col-3-3 > .categoryMainSlider, .categoryMainGridTile.col-1-4 > .categoryMainSlider, .categoryMainGridTile.col-2-4 > .categoryMainSlider, .categoryMainGridTile.col-3-4 > .categoryMainSlider, .categoryMainGridTile.col-4-4 > .categoryMainSlider { margin-bottom: 20px; } .categoryMainGridTile.full > .navigation-overlay > .imageMap, .categoryMainGridTile.col-1-2 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-2-2 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-1-3 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-2-3 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-3-3 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-1-4 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-2-4 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-3-4 > .navigation-overlay > .imageMap, .categoryMainGridTile.col-4-4 > .navigation-overlay > .imageMap { margin-top: -20px; } } /*******************/ /* brands we loves */ /*******************/ /* Added at 02.07.21. */ /* Edited at 08.07.21. Adjusted top padding of carousel. */ /* Edited at 09.09.21. Fixes. */ /* Edited at 31.03.22. Updated listWrapper styling. */ .brandsWELovesOverview { background-color: #f2f2f2; padding: 30px; margin-bottom: 10px; } .brandsWELovesOverview h3.heading { margin-top: 0; } .brandsWELovesOverview .brandsCarousel { padding: 10px 0 20px; overflow: hidden; } .brandsWELovesOverview .brandsCarousel .categoryPageSlider .slide > .imageMap > .areas:before { content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: 5px solid #fff; } .brandsWELovesOverview .brandsCarousel .categoryPageSlider .slide > .imageMap { border-radius: 50%; overflow: hidden; } .brandsWELovesOverview .brandsCarousel .categoryPageSlider .slide { padding: 0 10px; white-space: normal; display: flex; flex-direction: column; } .brandsWELovesOverview .brandsCarousel .categoryPageSlider .slide .heading { margin: 10px 0; } .brandsWELovesOverview .brandsCarousel .categoryPageSlider .slide .bodycopy.ctas { margin: 0; } .brandsWELovesOverview .brandsCarousel .categoryPageSlider .slide .imgHolder.brandLogo { top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); } .brandsWELovesOverview .listWrapper { display: flex; flex-direction: row; align-items: center; justify-content: center; } .brandsWELovesOverview .listWrapper .list { width: fit-content; } .brandsWELovesOverview .listWrapper .list ul { padding: 0; } .brandsWELovesOverview .listWrapper .list ul li { list-style-type: none; line-height: 28px; } .brandsWELovesOverview .listWrapper .list ul li a {} @media only screen and (min-width: 1024px){ .brandsWELovesOverview .brandsCarousel .cycle-nav-external-wrapper { padding: 0 48px; z-index: 1; } .brandsWELovesOverview .brandsCarousel .cycle-nav-external-wrapper .cycle-nav-external.inverse.cycle-prev { left: 10px; } .brandsWELovesOverview .brandsCarousel .cycle-nav-external-wrapper .cycle-nav-external.inverse.cycle-next { right: 10px; } .brandsWELovesOverview .brandsCarousel .cycle-nav-external-wrapper.wide { padding: 0 calc(0% + 48px); } .brandsWELovesOverview .brandsCarousel .cycle-nav-external-wrapper.wide .cycle-nav-external.inverse.cycle-prev { left: calc(0% + 10px); } .brandsWELovesOverview .brandsCarousel .cycle-nav-external-wrapper.wide .cycle-nav-external.inverse.cycle-next { right: calc(0% + 10px); } } @media only screen and (max-width: 1024px){ .brandsWELovesOverview .brandsCarousel { padding: 10px 0; } .brandsWELovesOverview > .center > .imageMapWrapper { max-width: 200px; } .brandsWELovesOverview .brandsCarousel .categoryPageSlider { overflow: visible !important; max-width: 80%; left: 10%; } .brandsWELovesOverview .brandsCarousel .categoryPageSlider .imageMap.cycle-slide { padding-bottom: 51px; } .brandsWELovesOverview .brandsCarousel .categoryPageSlider.cycle-slideshow .cycle-custom-pager { width: 100%; } } @media only screen and (max-width: 850px){ .brandsWELovesOverview { margin-bottom: 20px; } .brandsWELovesOverview { padding: 30px 10px; } .brandsWELovesOverview .listWrapper { justify-content: left; margin: 0 10px; } } /***************/ /* main USPs */ /***************/ /* Added at 29.06.22. This is part of an AB test. */ /* Edited at 21.07.22. Updated to mainUsps. Not an AB test anymore. */ /* Edited at 22.07.22. Fixed last styling and added separated afterpay and klarna styling. */ /* Edited at 26.01.23. Fixed styling for single usp display. */ .mainUspsWrapper {} [data-tablet-desktop-visible] .mainUspsWrapper { margin-bottom: 10px; } .mainUspsWrapper .mainUsps { padding: 0 20px; background-color: #f2f2f2; } .mainUspsWrapper .mainUsps > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: center; } .mainUspsWrapper .mainUsps > ul li { display: block; width: 33.3%; letter-spacing: 0; font-size: 15px; line-height: 17.25px; text-align: center; margin: 10px 0 10px 0 !important; position: relative; z-index: 1; } .mainUspsWrapper .mainUsps > ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) { position: relative; width: 24px; height: 17px; display: inline-block; margin-right: 5px; } .mainUspsWrapper .mainUsps > ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) .globalIcon { position: absolute; top: 0; left: 0; } .mainUspsWrapper .mainUsps > ul li b { font-family: 'Futura PT W01 Medium', arial, sans-serif; font-weight: 900; } /* carousel */ .mainUspsCarousel .placeHolder { display: none; } [data-tab="active"] .mainUspsCarousel .placeHolder { display: block; } .mainUspsCarousel .placeHolder:after { content: ""; width: 20px; height: 20px; position: absolute; top: 18px; left: 50%; background: url('../icons/sprite-left-right-nav-hover.png') -10px -10px no-repeat; -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } .mainUspsCarousel .categoryPageSlider .mainUspsWrapper .mainUsps:after { content: ""; width: 20px; height: 20px; position: absolute; top: 10px; right: 20px; background: url('../icons/sprite-left-right-nav-hover.png') -49px -10px no-repeat; -webkit-transform: rotate(90deg); transform: rotate(90deg); } [data-tab="active"] .mainUspsCarousel .categoryPageSlider { display: none; } @media only screen and (max-width: 1024px){ .mainUspsWrapper {} .mainUspsWrapper .mainUsps { padding: 8px 15px; } .mainUspsWrapper .mainUsps > ul { margin: 0; flex-direction: column; } .mainUspsWrapper .mainUsps > ul li { display: initial; width: 100%; text-align: left; float: none !important; margin: 5px 0 5px 0 !important; } .mainUspsWrapper .mainUsps > ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) { width: 17px; } .mainUspsWrapper .mainUsps > ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) .globalIcon { top: 3px; } .mainUspsWrapper .mainUsps > ul li:first-child { margin-top: 0 !important; } .mainUspsWrapper .mainUsps > ul li:last-child { margin-bottom: 0 !important; } /* carousel */ .mainUspsCarousel .placeHolder:after { top: 25px; } .mainUspsCarousel .placeHolder .mainUsps { padding: 15px 15px; } .mainUspsCarousel .categoryPageSlider .mainUspsWrapper .mainUsps:after { top: 12px; right: 20px; } .mainUspsCarousel .categoryPageSlider .mainUspsWrapper .mainUsps > ul { align-items: center; } .mainUspsCarousel .categoryPageSlider .mainUspsWrapper .mainUsps > ul li { width: auto; } .mainUspsCarousel .categoryPageSlider .mainUspsWrapper .mainUsps > ul li { margin: 5px 0 5px 0 !important; } .mainUspsContent { margin-bottom: 10px; } } @media only screen and (max-width: 850px){ .mainUspsWrapper .mainUsps { padding: 5px 10px; } .mainUspsWrapper .mainUsps > ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) { width: 17px; } .mainUspsWrapper .mainUsps > ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) .globalIcon { top: 3px; } /* carousel */ .mainUspsCarousel .mainUspsWrapper.placeHolder .mainUsps > ul { margin-left: 0; justify-content: center; } .mainUspsCarousel .placeHolder:after { top: 22px; } .mainUspsCarousel .placeHolder .mainUsps { padding: 12px 15px; } .mainUspsCarousel .categoryPageSlider .mainUspsWrapper .mainUsps:after { top: 10px; right: 20px; } .mainUspsContent { margin-bottom: -5px; } .mainUspsContent .mainUspsWrapper .mainUsps { padding: 10px; } } /* Riverty */ .mainUspsWrapper.rivertyBannerrow { margin-bottom: 10px; } .mainUspsWrapper.rivertyBannerrow .mainUsps {} .mainUspsWrapper.rivertyBannerrow .mainUsps > ul {} .mainUspsWrapper.rivertyBannerrow .mainUsps > ul li { width: auto; text-transform: uppercase; font-family: "Futura PT W01 Heavy", arial, sans-serif; } @media only screen and (max-width: 1024px){ } @media only screen and (max-width: 850px){ .mainUspsWrapper.rivertyBannerrow { margin-bottom: 0; } .cart-top .mainUspsWrapper.rivertyBannerrow .mainUsps > ul { align-items: center; } .cart-top .mainUspsWrapper.rivertyBannerrow { margin-top: 10px; } } /* Klarna */ .mainUspsWrapper.klarnaBannerrow { margin-bottom: 10px; } .mainUspsWrapper.klarnaBannerrow .mainUsps {} .mainUspsWrapper.klarnaBannerrow .mainUsps > ul {} .mainUspsWrapper.klarnaBannerrow .mainUsps > ul li { width: auto; text-transform: uppercase; font-family: "Futura PT W01 Heavy", arial, sans-serif; } @media only screen and (max-width: 1024px){ } @media only screen and (max-width: 850px){ .mainUspsWrapper.klarnaBannerrow { margin-bottom: 0; } .cart-top .mainUspsWrapper.klarnaBannerrow .mainUsps > ul { align-items: center; } .cart-top .mainUspsWrapper.klarnaBannerrow { margin-top: 10px; } } /*******************/ /* main sale fixes */ /*******************/ /* Added at 13.06.23. Added after the sale implementation was renewed to using content assets. */ @media only screen and (min-width: 850px){ .page-category-sale .product-grid .html-asset-container:not(:first-child) { width: 33.33%; } } @media only screen and (max-width: 850px){ .page-category-sale .product-grid .html-asset-container:nth-child(2) { width: 50%; } .page-category-sale .product-grid .html-asset-container:nth-child(3) { width: 50%; } } /************************************************************************* 06.0 Product list page (categories) *************************************************************************/ /***********/ /* general */ /***********/ /* Edited at 19.07.19. Added .flex styling to have a maximum width. */ /* Edited at 21.08.19. Added width to categoryPageBanner. */ /* Edited at 03.10.19. Added margin to category_Secondary_Banner_Bottom. */ /* Edited at 21.10.19. Added 'First_Banner' variation. */ /* Edited at 14.11.19. Added 'general' category search hero variation. */ /* Edited at 18.11.19. Added video holder adjustments to 'general' variation. */ /* Edited at 19.11.19. Removed margin from heading when categoryPageComponent is part of a search hero banner. */ /* Edited at 04.12.19. Added 'minimal' category search hero variation for plain backgrounds. */ /* Edited at 17.03.21. Updated overflow and z-index. */ /* Edited at 28.10.22. Updated z-index again for replatforming. */ /* Edited at 03.02.23. Updated styling to fit replatforming. */ .categoryPageBanner { position: relative; width: 100%; z-index: 1; } .category_Search_Hero_Banner, .category_Secondary_Banner, .category_Secondary_Banner_Bottom, .categoryBottomBanner { position: relative; width: 100%; max-width: 1540px; clear: both; overflow: visible; z-index: 1; } .category_Search_Hero_Banner { max-width: 100%; } .category_Search_Hero_Banner .flex { max-width: 1580px; margin: 0 auto; } .category_Search_Hero_Banner.general {} .category_Search_Hero_Banner.minimal {} .category_Search_Hero_Banner.general .imageMap .imgHolder { padding-top: 30.1%; background-position: center; } .category_Search_Hero_Banner.minimal .imageMap .imgHolder { padding-top: 18%; background-position: center; } .category_Search_Hero_Banner .categoryPageComponentWrapper h1.heading, .category_Search_Hero_Banner .categoryPageComponentWrapper h2.heading, .category_Search_Hero_Banner .categoryPageComponentWrapper h3.heading, .category_Search_Hero_Banner .categoryPageComponentWrapper h4.heading, .category_Search_Hero_Banner .categoryPageComponentWrapper h5.heading, .category_Search_Hero_Banner .categoryPageComponentWrapper h6.heading, .category_Search_Hero_Banner .categoryPageComponentWrapper p.bodycopy { margin: 0 auto; } .category_Search_Hero_Banner.general .categoryPageComponentWrapper .imgLayer, .category_Search_Hero_Banner.minimal .categoryPageComponentWrapper .imgLayer { background-size: 175%; } .category_Search_Hero_Banner.general.lft .categoryPageComponentWrapper .imgLayer, .category_Search_Hero_Banner.minimal.lft .categoryPageComponentWrapper .imgLayer { background-position: left top; } .category_Search_Hero_Banner.general.rght .categoryPageComponentWrapper .imgLayer, .category_Search_Hero_Banner.minimal.rght .categoryPageComponentWrapper .imgLayer { background-position: right top; } .category_Secondary_Banner { margin: 0 auto 20px; } .category_Secondary_Banner_Bottom { margin: 0 auto 20px; } .category_First_Banner { margin: 0 auto 20px; } @media only screen and (max-width: 850px){ .category_Search_Hero_Banner { margin: 0 auto; } .category_Search_Hero_Banner.general {} .category_Search_Hero_Banner.minimal {} .category_Search_Hero_Banner.general .categoryPageComponentWrapper .core .categoryPageComponent .content { padding-bottom: 0; } .category_Search_Hero_Banner.general .categoryPageComponentWrapper .core .categoryPageComponent .scrollIconWrapper { margin-top: 10px; } .category_Search_Hero_Banner.general .imageMap .imgHolder, .category_Search_Hero_Banner.minimal .imageMap .imgHolder { padding-top: 52.2%; background-size: cover; } .category_Search_Hero_Banner.general.lft .imageMap .imgHolder, .category_Search_Hero_Banner.minimal.lft .imageMap .imgHolder { background-position: left; } .category_Search_Hero_Banner.general.rght .imageMap .imgHolder, .category_Search_Hero_Banner.minimal.rght .imageMap .imgHolder { background-position: right; } .category_Search_Hero_Banner.general .imageMap .videoHolder, .category_Search_Hero_Banner.minimal .imageMap .videoHolder { left: -40% !important; width: 180% !important; } .category_Search_Hero_Banner.general.lft .imageMap .videoHolder, .category_Search_Hero_Banner.minimal.lft .imageMap .videoHolder { left: 0 !important; } .category_Search_Hero_Banner.general.rght .imageMap .videoHolder, .category_Search_Hero_Banner.minimal.rght .imageMap .videoHolder { right: 0 !important; } .category_Secondary_Banner { margin: 20px auto 20px; } .category_Secondary_Banner_Bottom { margin: 20px auto; } .categoryBottomBanner {} } /*******************/ /* brands we loves */ /*******************/ /* Added at 28.07.21. */ .category_Search_Hero_Banner .brandLogo { position: absolute; bottom: 20px; right: 30px; background-repeat: no-repeat; background-position: bottom; } .category_Search_Hero_Banner .brandsWELovesLogo { position: absolute; bottom: 20px; left: 30px; background-image: url('../icons/2021_HL06/Brands_WE_loves.svg'); background-repeat: no-repeat; width: 20%; padding-top: 30%; background-position: bottom; } /***************/ /* grid (2019) */ /***************/ /* Added at 17.07.19. */ /* Edited at 18.07.19. Updated media query from 850px to 1024px to fit the content better to the page. */ /* Edited at 21.08.19. Added 'crop70' variation. To add a margin variant. Added 4 column variation. Removed old 'imgCaptionWrapper' styling. Rebuilt column grid with calc width. */ /* Edited at 12.09.19. Added 'wrapped' option. */ /* Edited at 02.10.19. Added 'ellipse' option. */ /* Edited at 04.10.19. Added 'zero' option. */ /* Edited at 20.12.19. Added width on 'full' variation. */ /* Edited at 07.10.21. Added indepth styling variations for promotions. */ /* Edited at 24.02.23. Added 'merged' variations of three columned layout. */ /* Edited at 14.03.23. Added 'wide' variation for two columned layout. */ .categoryPageBanner .categoryPageGridTilesWrapper { margin-bottom: 20px; } .categoryPageGridTilesWrapper { width: 100%; } .categoryPageGridTilesWrapper.crop70 { padding: 0 70px; } .categoryPageGridTilesWrapper.wrapped { padding: 30px; } .categoryPageGridTilesWrapper.narrow.wrapped { padding: 10px; } .categoryPageGridTiles { display: flex; flex-wrap: nowrap; justify-content: center; } .categoryPageGridTileWrapper {} .categoryPageGridTileWrapper .categoryPageGridTile { position: relative; z-index: 1; } .categoryPageGridTileWrapper.full { width: 100%; } .categoryPageGridTileWrapper.full .categoryPageGridTile {} /* two columns */ .categoryPageGridTileWrapper.col-1-2 { width: calc(50% - 15px); margin-right: 15px; } .categoryPageGridTileWrapper.col-2-2 { width: calc(50% - 15px); margin-left: 15px; } .zero .categoryPageGridTileWrapper.col-1-2 { width: 50%; margin-right: 0; } .zero .categoryPageGridTileWrapper.col-2-2 { width: 50%; margin-left: 0; } .narrow .categoryPageGridTileWrapper.col-1-2 { width: calc(50% - 5px); margin-right: 5px; } .narrow .categoryPageGridTileWrapper.col-2-2 { width: calc(50% - 5px); margin-left: 5px; } .wide .categoryPageGridTileWrapper.col-1-2 { width: calc(50% - 35px); margin-right: 35px; } .wide .categoryPageGridTileWrapper.col-2-2 { width: calc(50% - 35px); margin-left: 35px; } .ellipse .categoryPageGridTileWrapper.col-1-2 { width: calc(50% - 25px); margin-right: 25px; } .ellipse .categoryPageGridTileWrapper.col-2-2 { width: calc(50% - 25px); margin-left: 25px; } /* three columns */ .categoryPageGridTileWrapper.col-1-3 { width: calc(33.33% - 15px); margin-right: 15px; } .categoryPageGridTileWrapper.col-2-3 { width: calc(33.33% - 15px); margin-left: 7.5px; margin-right: 7.5px; } .categoryPageGridTileWrapper.col-3-3 { width: calc(33.33% - 15px); margin-left: 15px; } .categoryPageGridTileWrapper.col-1-3.merged { width: calc(66.66% - 15px); } .categoryPageGridTileWrapper.col-3-3.merged { width: calc(66.66% - 15px); } .zero .categoryPageGridTileWrapper.col-1-3 { width: 33.33%; margin-right: 0; } .zero .categoryPageGridTileWrapper.col-2-3 { width: 33.33%; margin-left: 0; margin-right: 0; } .zero .categoryPageGridTileWrapper.col-3-3 { width: 33.33%; margin-left: 0; } .zero .categoryPageGridTileWrapper.col-1-3.merged { width: 66.66%; } .zero .categoryPageGridTileWrapper.col-3-3.merged { width: 66.66%; } .narrow .categoryPageGridTileWrapper.col-1-3 { width: calc(33.33% - 6.66px); margin-right: 6.66px; } .narrow .categoryPageGridTileWrapper.col-2-3 { width: calc(33.33% - 6.66px); margin-left: 3.33px; margin-right: 3.33px; } .narrow .categoryPageGridTileWrapper.col-3-3 { width: calc(33.33% - 6.66px); margin-left: 6.66px; } .narrow .categoryPageGridTileWrapper.col-1-3.merged { width: calc(66.66% - 6.66px); margin-left: 3.33px; } .narrow .categoryPageGridTileWrapper.col-3-3.merged { width: calc(66.66% - 6.66px); margin-left: 3.33px; } .ellipse .categoryPageGridTileWrapper.col-1-3 { width: calc(33.33% - 50px); margin-right: 50px; } .ellipse .categoryPageGridTileWrapper.col-2-3 { width: calc(33.33% - 50px); margin-left: 25px; margin-right: 25px; } .ellipse .categoryPageGridTileWrapper.col-3-3 { width: calc(33.33% - 50px); margin-left: 50px; } .ellipse .categoryPageGridTileWrapper.col-1-3.merged { width: calc(66.66% - 50px); } .ellipse .categoryPageGridTileWrapper.col-3-3.merged { width: calc(66.66% - 50px); } .narrow.ellipse .categoryPageGridTileWrapper.col-1-3 { width: calc(33.33% - 6.66px); margin-right: 6.66px; } .narrow.ellipse .categoryPageGridTileWrapper.col-2-3 { width: calc(33.33% - 6.66px); margin-left: 3.33px; margin-right: 3.33px; } .narrow.ellipse .categoryPageGridTileWrapper.col-3-3 { width: calc(33.33% - 6.66px); margin-left: 6.66px; } .narrow.ellipse .categoryPageGridTileWrapper.col-1-3.merged { width: calc(66.66% - 3.33px); margin-right: 3.33px; } .narrow.ellipse .categoryPageGridTileWrapper.col-3-3.merged { width: calc(66.66% - 3.33px); margin-left: 3.33px; } /* four columns */ .categoryPageGridTileWrapper.col-1-4 { width: calc(25% - 22.5px); margin-right: 22.5px; } .categoryPageGridTileWrapper.col-2-4 { width: calc(25% - 22.5px); margin-left: 7.5px; margin-right: 15px; } .categoryPageGridTileWrapper.col-3-4 { width: calc(25% - 22.5px); margin-left: 15px; margin-right: 7.5px; } .categoryPageGridTileWrapper.col-4-4 { width: calc(25% - 22.5px); margin-left: 22.5px; } .zero .categoryPageGridTileWrapper.col-1-4 { width: 25%; margin-right: 0; } .zero .categoryPageGridTileWrapper.col-2-4 { width: 25%; margin-left: 0; margin-right: 0; } .zero .categoryPageGridTileWrapper.col-3-4 { width: 25%; margin-left: 0; margin-right: 0; } .zero .categoryPageGridTileWrapper.col-4-4 { width: 25%; margin-left: 0; } .narrow .categoryPageGridTileWrapper.col-1-4 { width: calc(25% - 6.5px); margin-right: 6.5px; } .narrow .categoryPageGridTileWrapper.col-2-4 { width: calc(25% - 7px); margin-left: 3.5px; margin-right: 5px; } .narrow .categoryPageGridTileWrapper.col-3-4 { width: calc(25% - 7px); margin-left: 5px; margin-right: 3.5px; } .narrow .categoryPageGridTileWrapper.col-4-4 { width: calc(25% - 6.5px); margin-left: 6.5px; } .ellipse .categoryPageGridTileWrapper.col-1-4 { width: calc(25% - 50px); margin-right: 25px; } .ellipse .categoryPageGridTileWrapper.col-2-4 { width: calc(25% - 50px); margin-left: 25px; margin-right: 25px; } .ellipse .categoryPageGridTileWrapper.col-3-4 { width: calc(25% - 50px); margin-left: 25px; margin-right: 25px; } .ellipse .categoryPageGridTileWrapper.col-4-4 { width: calc(25% - 50px); margin-left: 25px; } .narrow.ellipse .categoryPageGridTileWrapper.col-1-4 { width: calc(25% - 6.5px); margin-right: 6.5px; } .narrow.ellipse .categoryPageGridTileWrapper.col-2-4 { width: calc(25% - 7px); margin-left: 3.5px; margin-right: 5px; } .narrow.ellipse .categoryPageGridTileWrapper.col-3-4 { width: calc(25% - 7px); margin-left: 5px; margin-right: 3.5px; } .narrow.ellipse .categoryPageGridTileWrapper.col-4-4 { width: calc(25% - 6.5px); margin-left: 6.5px; } /* ellipse */ .categoryPageGridTilesWrapper.ellipse .categoryPageGridTile > .imageMap { border-radius: 50%; overflow: hidden; } /* imagemaps */ .categoryPageGridTileWrapper.full .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-1-3 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-3-3 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-1-3.merged .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-3-3.merged .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-1-4 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-2-4 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-3-4 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-4-4 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.full .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-1-3 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-3-3 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-1-3.merged .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-3-3.merged .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-1-4 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-2-4 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-3-4 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-4-4 .categoryPageGridTile > .categoryPageSlider { margin-bottom: 10px; } .categoryPageGridTileWrapper.full .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-1-3 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-3-3 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-1-3.merged .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-3-3.merged .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-1-4 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-2-4 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-3-4 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-4-4 .categoryPageGridTile > .navigation-overlay > .imageMap { margin-top: -10px; } @media only screen and (max-width: 1024px){ .categoryPageGridTilesWrapper.crop70 { padding: 0; } .categoryPageGridTilesWrapper.wrapped { padding: 20px; } .categoryPageGridTilesWrapper.narrow.wrapped { padding: 10px; } .categoryPageGridTiles { flex-direction: column; } [data-maintain-direction] .categoryPageGridTiles { flex-direction: row; flex-wrap: wrap; } .categoryPageGridTilesWrapper.margin70 { margin: 0 auto; } /* two columns */ .categoryPageGridTileWrapper.col-1-2 { width: 100%; margin-right: 0; } .categoryPageGridTileWrapper.col-2-2 { width: 100%; margin-left: 0; } .zero .categoryPageGridTileWrapper.col-1-2 { width: 100%; margin-right: 0; } .zero .categoryPageGridTileWrapper.col-2-2 { width: 100%; margin-left: 0; } .narrow .categoryPageGridTileWrapper.col-1-2 { width: 100%; margin-right: 0; } .narrow .categoryPageGridTileWrapper.col-2-2 { width: 100%; margin-left: 0; } .wide .categoryPageGridTileWrapper.col-1-2 { width: 100%; margin-right: 0; } .wide .categoryPageGridTileWrapper.col-2-2 { width: 100%; margin-left: 0; } [data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 { width: calc(50% - 15px); margin-right: 15px; } [data-maintain-direction] .categoryPageGridTileWrapper.col-2-2 { width: calc(50% - 15px); margin-left: 15px; } .zero[data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 { width: 50%; margin-right: 0; } .zero[data-maintain-direction] .categoryPageGridTileWrapper.col-2-2 { width: 50%; margin-left: 0; } .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 { width: calc(50% - 5px); margin-right: 5px; } .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-2-2 { width: calc(50% - 5px); margin-left: 5px; } .wide[data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 { width: calc(50% - 35px); margin-right: 35px; } .wide[data-maintain-direction] .categoryPageGridTileWrapper.col-2-2 { width: calc(50% - 35px); margin-left: 35px; } .ellipse [data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 { width: calc(50% - 25px); margin-right: 25px; } .ellipse [data-maintain-direction] .categoryPageGridTileWrapper.col-2-2 { width: calc(50% - 25px); margin-left: 25px; } /* three columns */ .categoryPageGridTileWrapper.col-1-3 { width: 100%; margin-right: 0; } .categoryPageGridTileWrapper.col-2-3 { width: 100%; margin-left: 0; margin-right: 0; } .categoryPageGridTileWrapper.col-3-3 { width: 100%; margin-left: 0; } .categoryPageGridTileWrapper.col-1-3.merged { width: 100%; } .categoryPageGridTileWrapper.col-3-3.merged { width: 100%; } .zero .categoryPageGridTileWrapper.col-1-3 { width: 100%; margin-right: 0; } .zero .categoryPageGridTileWrapper.col-2-3 { width: 100%; margin-left: 0; margin-right: 0; } .zero .categoryPageGridTileWrapper.col-3-3 { width: 100%; margin-left: 0; } .zero .categoryPageGridTileWrapper.col-1-3.merged { width: 100%; } .zero .categoryPageGridTileWrapper.col-3-3.merged { width: 100%; } .narrow .categoryPageGridTileWrapper.col-1-3 { width: 100%; margin-right: 0; } .narrow .categoryPageGridTileWrapper.col-2-3 { width: 100%; margin-left: 0; margin-right: 0; } .narrow .categoryPageGridTileWrapper.col-3-3 { width: 100%; margin-left: 0; } .narrow .categoryPageGridTileWrapper.col-1-3.merged { width: 100%; } .narrow .categoryPageGridTileWrapper.col-3-3.merged { width: 100%; } .ellipse .categoryPageGridTileWrapper.col-1-3 { width: 100%; margin-right: 0; } .ellipse .categoryPageGridTileWrapper.col-2-3 { width: 100%; margin-left: 0; margin-right: 0; } .ellipse .categoryPageGridTileWrapper.col-3-3 { width: 100%; margin-left: 0; } .ellipse .categoryPageGridTileWrapper.col-1-3.merged { width: 100%; } .ellipse .categoryPageGridTileWrapper.col-3-3.merged { width: 100%; } [data-maintain-direction] .categoryPageGridTileWrapper.col-1-3 { width: calc(50% - 15px); margin-right: 15px; } [data-maintain-direction] .categoryPageGridTileWrapper.col-2-3 { width: calc(50% - 15px); margin-left: 15px; margin-right: 0; } [data-maintain-direction] .categoryPageGridTileWrapper.col-3-3 { width: calc(50% - 15px); margin-left: 0; margin-right: 15px; } [data-maintain-direction] .categoryPageGridTileWrapper.col-1-3.merged { width: calc(50% - 15px); } [data-maintain-direction] .categoryPageGridTileWrapper.col-3-3.merged { width: calc(50% - 15px); } .zero[data-maintain-direction] .categoryPageGridTileWrapper.col-1-3 { width: 50%; margin-right: 0; } .zero[data-maintain-direction] .categoryPageGridTileWrapper.col-2-3 { width: 50%; margin-left: 0; margin-right: 0; } .zero[data-maintain-direction] .categoryPageGridTileWrapper.col-3-3 { width: 50%; margin-left: 0; margin-right: 0; } .zero[data-maintain-direction] .categoryPageGridTileWrapper.col-1-3.merged { width: 50%; } .zero[data-maintain-direction] .categoryPageGridTileWrapper.col-3-3.merged { width: 50%; } .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-1-3 { width: calc(50% - 5px); margin-right: 5px; } .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-2-3 { width: calc(50% - 5px); margin-left: 5px; margin-right: 0; } .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-3-3 { width: calc(50% - 5px); margin-left: 0; margin-right: 5px; } .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-1-3.merged { width: calc(50% - 5px); } .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-3-3.merged { width: calc(50% - 5px); } .ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-1-3 { width: calc(50% - 25px); margin-right: 25px; } .ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-2-3 { width: calc(50% - 25px); margin-left: 25px; margin-right: 0; } .ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-3-3 { width: calc(50% - 25px); margin-left: 0; margin-right: 25px; } .ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-1-3.merged { width: calc(50% - 25px); } .ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-3-3.merged { width: calc(50% - 25px); } .narrow.ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-1-3 { width: calc(50% - 5px); margin-right: 5px; } .narrow.ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-2-3 { width: calc(50% - 5px); margin-left: 5px; margin-right: 0; } .narrow.ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-3-3 { width: calc(50% - 5px); margin-left: 0; margin-right: 5px; } .narrow.ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-1-3.merged { width: calc(50% - 5px); } .narrow.ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-3-3.merged { width: calc(50% - 5px); } /* four columns */ .categoryPageGridTileWrapper.col-1-4 { width: 100%; margin-right: 0; } .categoryPageGridTileWrapper.col-2-4 { width: 100%; margin-left: 0; margin-right: 0; } .categoryPageGridTileWrapper.col-3-4 { width: 100%; margin-left: 0; margin-right: 0; } .categoryPageGridTileWrapper.col-4-4 { width: 100%; margin-left: 0; } .zero .categoryPageGridTileWrapper.col-1-4 { width: 100%; margin-right: 0; } .zero .categoryPageGridTileWrapper.col-2-4 { width: 100%; margin-left: 0; margin-right: 0; } .zero .categoryPageGridTileWrapper.col-3-4 { width: 100%; margin-left: 0; margin-right: 0; } .zero .categoryPageGridTileWrapper.col-4-4 { width: 100%; margin-left: 0; } .narrow .categoryPageGridTileWrapper.col-1-4 { width: 100%; margin-right: 0; } .narrow .categoryPageGridTileWrapper.col-2-4 { width: 100%; margin-left: 0; margin-right: 0; } .narrow .categoryPageGridTileWrapper.col-3-4 { width: 100%; margin-left: 0; margin-right: 0; } .narrow .categoryPageGridTileWrapper.col-4-4 { width: 100%; margin-left: 0; } .ellipse .categoryPageGridTileWrapper.col-1-4 { width: 100%; margin-right: 0; } .ellipse .categoryPageGridTileWrapper.col-2-4 { width: 100%; margin-left: 0; margin-right: 0; } .ellipse .categoryPageGridTileWrapper.col-3-4 { width: 100%; margin-left: 0; margin-right: 0; } .ellipse .categoryPageGridTileWrapper.col-4-4 { width: 100%; margin-left: 0; } [data-maintain-direction] .categoryPageGridTileWrapper.col-1-4 { width: calc(50% - 15px); margin-right: 15px; } [data-maintain-direction] .categoryPageGridTileWrapper.col-2-4 { width: calc(50% - 15px); margin-left: 15px; margin-right: 0; } [data-maintain-direction] .categoryPageGridTileWrapper.col-3-4 { width: calc(50% - 15px); margin-left: 0; margin-right: 15px; } [data-maintain-direction] .categoryPageGridTileWrapper.col-4-4 { width: calc(50% - 15px); margin-left: 15px; } .zero[data-maintain-direction] .categoryPageGridTileWrapper.col-1-4 { width: 50%; margin-right: 0; } .zero[data-maintain-direction] .categoryPageGridTileWrapper.col-2-4 { width: 50%; margin-left: 0; margin-right: 0; } .zero[data-maintain-direction] .categoryPageGridTileWrapper.col-3-4 { width: 50%; margin-left: 0; margin-right: 0; } .zero[data-maintain-direction] .categoryPageGridTileWrapper.col-4-4 { width: 50%; margin-left: 0; } .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-1-4 { width: calc(50% - 5px); margin-right: 5px; } .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-2-4 { width: calc(50% - 5px); margin-left: 5px; margin-right: 0; } .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-3-4 { width: calc(50% - 5px); margin-left: 0; margin-right: 5px; } .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-4-4 { width: calc(50% - 5px); margin-left: 5px; } .ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-1-4 { width: calc(50% - 25px); margin-right: 25px; } .ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-2-4 { width: calc(50% - 25px); margin-left: 25px; margin-right: 0; } .ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-3-4 { width: calc(50% - 25px); margin-left: 0; margin-right: 25px; } .ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-4-4 { width: calc(50% - 25px); margin-left: 25px; } .narrow.ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-1-4 { width: calc(50% - 5px); margin-right: 5px; } .narrow.ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-2-4 { width: calc(50% - 5px); margin-left: 5px; margin-right: 0; } .narrow.ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-3-4 { width: calc(50% - 5px); margin-left: 0; margin-right: 5px; } .narrow.ellipse[data-maintain-direction] .categoryPageGridTileWrapper.col-4-4 { width: calc(50% - 5px); margin-left: 5px; } /* imagemaps */ .categoryPageGridTileWrapper.full .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-1-3 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-3-3 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-1-3.merged .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-3-3.merged .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-1-4 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-2-4 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-3-4 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.col-4-4 .categoryPageGridTile > .imageMap, .categoryPageGridTileWrapper.full .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-1-3 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-3-3 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-1-3.merged .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-3-3.merged .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-1-4 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-2-4 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-3-4 .categoryPageGridTile > .categoryPageSlider, .categoryPageGridTileWrapper.col-4-4 .categoryPageGridTile > .categoryPageSlider { margin-bottom: 30px; } .narrow .categoryPageGridTileWrapper.full .categoryPageGridTile > .imageMap, .narrow .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .imageMap, .narrow .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile > .imageMap, .narrow .categoryPageGridTileWrapper.col-1-3 .categoryPageGridTile > .imageMap, .narrow .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile > .imageMap, .narrow .categoryPageGridTileWrapper.col-3-3 .categoryPageGridTile > .imageMap, .narrow .categoryPageGridTileWrapper.col-1-3.merged .categoryPageGridTile > .imageMap, .narrow .categoryPageGridTileWrapper.col-3-3.merged .categoryPageGridTile > .imageMap, .narrow .categoryPageGridTileWrapper.col-1-4 .categoryPageGridTile > .imageMap, .narrow .categoryPageGridTileWrapper.col-2-4 .categoryPageGridTile > .imageMap, .narrow .categoryPageGridTileWrapper.col-3-4 .categoryPageGridTile > .imageMap, .narrow .categoryPageGridTileWrapper.col-4-4 .categoryPageGridTile > .imageMap, .narrow .categoryPageGridTileWrapper.full .categoryPageGridTile > .categoryPageSlider, .narrow .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .categoryPageSlider, .narrow .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile > .categoryPageSlider, .narrow .categoryPageGridTileWrapper.col-1-3 .categoryPageGridTile > .categoryPageSlider, .narrow .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile > .categoryPageSlider, .narrow .categoryPageGridTileWrapper.col-3-3 .categoryPageGridTile > .categoryPageSlider, .narrow .categoryPageGridTileWrapper.col-1-3.merged .categoryPageGridTile > .categoryPageSlider, .narrow .categoryPageGridTileWrapper.col-3-3.merged .categoryPageGridTile > .categoryPageSlider, .narrow .categoryPageGridTileWrapper.col-1-4 .categoryPageGridTile > .categoryPageSlider, .narrow .categoryPageGridTileWrapper.col-2-4 .categoryPageGridTile > .categoryPageSlider, .narrow .categoryPageGridTileWrapper.col-3-4 .categoryPageGridTile > .categoryPageSlider, .narrow .categoryPageGridTileWrapper.col-4-4 .categoryPageGridTile > .categoryPageSlider { margin-bottom: 10px; } .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-1-4 .categoryPageGridTile > .categoryPageSlider, .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-2-4 .categoryPageGridTile > .categoryPageSlider, .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-3-4 .categoryPageGridTile > .categoryPageSlider, .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-4-4 .categoryPageGridTile > .categoryPageSlider { margin-bottom: 10px; } .categoryPageGridTileWrapper.full .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-1-3 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-3-3 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-1-3.merged .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-3-3.merged .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-1-4 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-2-4 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-3-4 .categoryPageGridTile > .navigation-overlay > .imageMap, .categoryPageGridTileWrapper.col-4-4 .categoryPageGridTile > .navigation-overlay > .imageMap { margin-top: -30px; } .narrow .categoryPageGridTileWrapper.full .categoryPageGridTile > .navigation-overlay > .imageMap, .narrow .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .navigation-overlay > .imageMap, .narrow .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile > .navigation-overlay > .imageMap, .narrow .categoryPageGridTileWrapper.col-1-3 .categoryPageGridTile > .navigation-overlay > .imageMap, .narrow .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile > .navigation-overlay > .imageMap, .narrow .categoryPageGridTileWrapper.col-3-3 .categoryPageGridTile > .navigation-overlay > .imageMap, .narrow .categoryPageGridTileWrapper.col-1-3.merged .categoryPageGridTile > .navigation-overlay > .imageMap, .narrow .categoryPageGridTileWrapper.col-3-3.merged .categoryPageGridTile > .navigation-overlay > .imageMap, .narrow .categoryPageGridTileWrapper.col-1-4 .categoryPageGridTile > .navigation-overlay > .imageMap, .narrow .categoryPageGridTileWrapper.col-2-4 .categoryPageGridTile > .navigation-overlay > .imageMap, .narrow .categoryPageGridTileWrapper.col-3-4 .categoryPageGridTile > .navigation-overlay > .imageMap, .narrow .categoryPageGridTileWrapper.col-4-4 .categoryPageGridTile > .navigation-overlay > .imageMap { margin-top: -10px; } .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-1-4 .categoryPageGridTile > .navigation-overlay > .imageMap, .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-2-4 .categoryPageGridTile > .navigation-overlay > .imageMap, .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-3-4 .categoryPageGridTile > .navigation-overlay > .imageMap, .narrow[data-maintain-direction] .categoryPageGridTileWrapper.col-4-4 .categoryPageGridTile > .navigation-overlay > .imageMap { margin-top: -10px; } } /* promotions */ .homePageGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-1-2 { width: 60%; margin-right: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile .imgHolder { padding-top: 76.35%; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 { width: 40%; margin-left: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 112.55%; width: calc(100% - 5px); margin-left: 5px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .homePageGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 25px); left: 15px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-1-2 { width: 60%; margin-right: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile .imgHolder { padding-top: 76.35%; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 { width: 40%; margin-left: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 114.35%; width: calc(100% - 5px); margin-left: 5px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 25px); left: 15px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-1-2 { width: 60%; margin-right: 0; order: 2; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile .imgHolder { padding-top: 76.35%; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 { width: 40%; margin-left: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 112.55%; width: calc(100% - 5px); margin-right: 5px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .homePageGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 25px); left: 10px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-1-2 { width: 60%; margin-right: 0; order: 2; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile .imgHolder { padding-top: 76.35%; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 { width: 40%; margin-left: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 114.35%; width: calc(100% - 5px); margin-right: 5px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 25px); left: 10px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-1-2 { width: 54.56%; margin-right: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile { height: 100%; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .imgHolder { position: absolute; top: 20px; left: 20px; width: calc(100% - 40px); height: calc(100% - 40px); border: 5px solid #fff; background-size: cover; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 { width: 45.44%; margin-left: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 99%; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .homePageGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 20px); left: 10px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-1-2 { width: 55.5%; margin-right: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile { height: 100%; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .imgHolder { position: absolute; top: 20px; left: 20px; width: calc(100% - 40px); height: calc(100% - 40px); border: 5px solid #fff; background-size: cover; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 { width: 44.5%; margin-left: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 103%; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 20px); left: 10px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-1-2 { width: 54.56%; margin-right: 0; order: 2; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile { height: 100%; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .imgHolder { position: absolute; top: 20px; left: 20px; width: calc(100% - 40px); height: calc(100% - 40px); border: 5px solid #fff; background-size: cover; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 { width: 45.44%; margin-left: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 99%; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .homePageGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 20px); left: 10px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-1-2 { width: 55.5%; margin-right: 0; order: 2; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile { height: 100%; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .imgHolder { position: absolute; top: 20px; left: 20px; width: calc(100% - 40px); height: calc(100% - 40px); border: 5px solid #fff; background-size: cover; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 { width: 44.5%; margin-left: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 103%; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 20px); left: 10px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-1-3 { width: 29%; margin-right: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-1-3 .categoryPageGridTile .imgHolder { padding-top: 154.75%; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 { width: 42%; margin-left: 0; margin-right: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile .imgHolder { padding-top: 106.85%; width: calc(100% - 10px); margin: 0 5px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile .areas:nth-child(2), .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 30px); left: 15px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-3-3 { width: 29%; margin-left: 0; margin-right: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-3-3 .categoryPageGridTile .imgHolder { padding-top: 154.75%; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-1-3 { width: 29.5%; margin-right: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-1-3 .categoryPageGridTile .imgHolder { padding-top: 155.1%; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 { width: 41%; margin-left: 0; margin-right: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile .imgHolder { padding-top: 111.4%; width: calc(100% - 10px); margin: 0 5px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile .areas:nth-child(2), .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 30px); left: 15px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-3-3 { width: 29.5%; margin-left: 0; margin-right: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-3-3 .categoryPageGridTile .imgHolder { padding-top: 155.1%; } @media only screen and (max-width: 1024px){ .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-1-2 { width: 38.34%; margin-right: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile .imgHolder { padding-top: 220.15%; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 { width: 61.66%; margin-left: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 137%; width: calc(100% - 5px); margin-left: 5px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 25px); left: 15px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-1-2 { width: 38.34%; margin-right: 0; order: 2; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile .imgHolder { padding-top: 220.15%; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 { width: 61.66%; margin-left: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 137%; width: calc(100% - 5px); margin-right: 5px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 25px); left: 10px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-1-2 { width: 43.5%; margin-right: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile { height: 100%; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .imgHolder { position: absolute; top: 20px; left: 20px; width: calc(100% - 40px); height: calc(100% - 40px); border: 5px solid #fff; background-size: cover; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 { width: 56.5%; margin-left: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 150.15%; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 20px); left: 10px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-1-2 { width: 43.5%; margin-right: 0; order: 2; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile { height: 100%; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .imgHolder { position: absolute; top: 20px; left: 20px; width: calc(100% - 40px); height: calc(100% - 40px); border: 5px solid #fff; background-size: cover; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 { width: 56.5%; margin-left: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 150.15%; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 20px); left: 10px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-1-3 { width: 21.5%; margin-right: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-1-3 .categoryPageGridTile .imgHolder { padding-top: 393.4%; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 { width: 57%; margin-left: 0; margin-right: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile .imgHolder { padding-top: 148.35%; width: calc(100% - 10px); margin: 0 5px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile .areas:nth-child(2), .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 30px); left: 15px; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-3-3 { width: 21.5%; margin-left: 0; margin-right: 0; } .categoryMainGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-3-3 .categoryPageGridTile .imgHolder { padding-top: 393.4%; } } @media only screen and (max-width: 850px){ .homePageGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-1-2 { width: 38.34%; margin-right: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile .imgHolder { padding-top: 220.15%; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 { width: 61.66%; margin-left: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 137%; width: calc(100% - 5px); margin-left: 5px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .homePageGridTile .categoryPageGridTilesWrapper.promoVariationA .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 25px); left: 15px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-1-2 { width: 38.34%; margin-right: 0; order: 2; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile .imgHolder { padding-top: 220.15%; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 { width: 61.66%; margin-left: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 137%; width: calc(100% - 5px); margin-right: 5px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .homePageGridTile .categoryPageGridTilesWrapper.promoVariationB .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 25px); left: 10px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-1-2 { width: 43.5%; margin-right: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile { height: 100%; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .imgHolder { position: absolute; top: 20px; left: 20px; width: calc(100% - 40px); height: calc(100% - 40px); border: 5px solid #fff; background-size: cover; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 { width: 56.5%; margin-left: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 150.15%; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .homePageGridTile .categoryPageGridTilesWrapper.promoVariationC .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 20px); left: 10px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-1-2 { width: 43.5%; margin-right: 0; order: 2; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile { height: 100%; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile > .imgHolder { position: absolute; top: 20px; left: 20px; width: calc(100% - 40px); height: calc(100% - 40px); border: 5px solid #fff; background-size: cover; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 { width: 56.5%; margin-left: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .imgHolder { padding-top: 150.15%; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(2), .homePageGridTile .categoryPageGridTilesWrapper.promoVariationD .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 20px); left: 10px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-1-3 { width: 21.5%; margin-right: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-1-3 .categoryPageGridTile .imgHolder { padding-top: 393.4%; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 { width: 57%; margin-left: 0; margin-right: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile .imgHolder { padding-top: 148.35%; width: calc(100% - 10px); margin: 0 5px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile .areas:nth-child(2), .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTile .areas:nth-child(4) { width: calc(100% - 30px); left: 15px; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-3-3 { width: 21.5%; margin-left: 0; margin-right: 0; } .homePageGridTile .categoryPageGridTilesWrapper.promoVariationE .categoryPageGridTileWrapper.col-3-3 .categoryPageGridTile .imgHolder { padding-top: 393.4%; } } /***********************/ /* groupfilter buttons */ /***********************/ /* Added at 01.07.20. */ /* Edited at 06.07.20. Added loader overlay. */ /* Edited at 11.03.21. Replaced loader icon. */ /* Edited at 08.02.23. Updated styling to fit replatforming. */ /* Edited at 21.07.23. Fixed word wrap and margin. */ .groupFiltersWrapper {} .groupFiltersWrapper .groupFilters { display: flex; flex-direction: row; flex-wrap: wrap; } .groupFiltersWrapper .groupFilters .groupFilter { border: 1px solid #000; margin: 0 7px; font-family: 'Futura PT W01 Medium', arial, sans-serif; font-size: 12px; line-height: 28px; text-decoration: none; color: #000; text-transform: uppercase; text-align: center; white-space: nowrap; } .groupFiltersWrapper .groupFilters .groupFilter:after { display: none; } .groupFilterLoader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 98; background: url(../icons/2021_HL04/loader.gif) center center no-repeat rgba(255, 255, 255, 0.5); display: none; } @media only screen and (max-width: 1200px) and (min-width: 851px){ .groupFiltersWrapper { margin-right: 14px; } .groupFiltersWrapper .groupFilters .groupFilter:nth-child(1) { width: calc(50% - 3.5px); margin: 0 3.5px 0 0; } .groupFiltersWrapper .groupFilters .groupFilter:nth-child(2) { width: calc(50% - 3.5px); margin: 0 0 0 3.5px; } .groupFiltersWrapper .groupFilters .groupFilter:nth-child(3) { width: calc(50% - 3.5px); margin: 0 3.5px 0 0; } .groupFiltersWrapper .groupFilters .groupFilter:nth-child(4) { width: calc(50% - 3.5px); margin: 0 0 0 3.5px; } } @media only screen and (min-width: 850px){ .groupFiltersWrapper { margin: 0 7px 0 auto; } .groupFiltersWrapper .groupFilters .groupFilter { padding: 0 20px; } .groupFiltersWrapper .groupFilters .groupFilter:hover { background-color: #000; color: #fff; } } @media only screen and (max-width: 850px){ .groupFiltersWrapper[data-mobile-visible] { width: 100%; margin-bottom: 10px; } .groupFiltersWrapper .groupFilters { width: calc(100% - 10px); justify-content: center; flex-wrap: nowrap; margin: 0 5px; } .groupFiltersWrapper .groupFilters .groupFilter:nth-child(1) { width: calc(25% - 6.5px); margin: 0 6.5px 0 0; } .groupFiltersWrapper .groupFilters .groupFilter:nth-child(2) { width: calc(25% - 7px); margin: 0 5px 0 3.5px; } .groupFiltersWrapper .groupFilters .groupFilter:nth-child(3) { width: calc(25% - 7px); margin: 0 3.5px 0 5px; } .groupFiltersWrapper .groupFilters .groupFilter:nth-child(4) { width: calc(25% - 6.5px); margin: 0 0 0 6.5px; } } /*******************/ /* inclose content */ /*******************/ /* Added at 02.10.19. Added to be able to add a flexible margin to content. */ .incloseWrapper {} .incloseWrapper .inclose { display: flex; flex-direction: row; } /****************************/ /* category page components */ /****************************/ /* Added at 13.08.19. */ /* Edited at 20.08.19. Rebuild categoryPageComponent with flexbox. */ /* Edited at 22.08.19. Added 'variationAC' (A desktop, C mobile). Removed fixed padding for background image from css to content. Changed media query to meet tablet size breakpoint. */ /* Edited at 21.11.19. Added 'variationF'. */ /* Edited at 07.01.20. Fixed 'flexbox' issue on IE. */ .categoryPageComponentWrapper { background-repeat: no-repeat; position: relative; } .categoryPageComponentWrapper .imgLayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-repeat: no-repeat; } .categoryPageComponentWrapper .core { position: relative; z-index: 2; display: flex; } .categoryPageComponentWrapper .core .categoryPageComponent { position: relative; display: flex; } .categoryPageComponentWrapper .core .categoryPageComponent .areas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .categoryPageComponentWrapper .core .categoryPageComponent .areas a { display: block; z-index: 3; } .categoryPageComponentWrapper .core .categoryPageComponent .areas a div { display: block; position: absolute; z-index: 2; } .categoryPageComponentWrapper .core .categoryPageComponent .content { background-color: #fff; padding: 30px; display: flex; flex-direction: column; flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; } .categoryPageComponentWrapper .core .categoryPageComponent:nth-child(1) { flex-direction: column; } .categoryPageComponentWrapper.col-1-2 .core .categoryPageComponent:nth-child(1) { width: 50%; } .categoryPageComponentWrapper.col-1-2 .core .categoryPageComponent:nth-child(2) { width: 50%; } .categoryPageComponentWrapper.col-1-3 .core .categoryPageComponent:nth-child(1) { width: 33.33%; } .categoryPageComponentWrapper.col-1-3 .core .categoryPageComponent:nth-child(2) { width: 66.66%; } .categoryPageComponentWrapper.col-2-3 .core .categoryPageComponent:nth-child(1) { width: 66.66%; } .categoryPageComponentWrapper.col-2-3 .core .categoryPageComponent:nth-child(2) { width: 33.33%; } .categoryPageComponentWrapper.variationA .imgLayer, .categoryPageComponentWrapper.variationAC .imgLayer, .categoryPageComponentWrapper.variationB .imgLayer, .categoryPageComponentWrapper.variationBC .imgLayer { background-size: contain; } .categoryPageComponentWrapper.variationA .imgLayer, .categoryPageComponentWrapper.variationAC .imgLayer { background-position: right; } .categoryPageComponentWrapper.variationB .imgLayer, .categoryPageComponentWrapper.variationBC .imgLayer { background-position: left; } .categoryPageComponentWrapper.variationA .core, .categoryPageComponentWrapper.variationAC .core, .categoryPageComponentWrapper.variationB .core { flex-direction: row; } .categoryPageComponentWrapper.variationA .core .categoryPageComponent:nth-child(1), .categoryPageComponentWrapper.variationAC .core .categoryPageComponent:nth-child(1), .categoryPageComponentWrapper.variationB .core .categoryPageComponent:nth-child(1), .categoryPageComponentWrapper.variationBC .core .categoryPageComponent:nth-child(1) {} .categoryPageComponentWrapper.variationB .core .categoryPageComponent:nth-child(1), .categoryPageComponentWrapper.variationBC .core .categoryPageComponent:nth-child(1) { order: 2; } .categoryPageComponentWrapper.variationA .core .categoryPageComponent:nth-child(2), .categoryPageComponentWrapper.variationAC .core .categoryPageComponent:nth-child(2), .categoryPageComponentWrapper.variationB .core .categoryPageComponent:nth-child(2), .categoryPageComponentWrapper.variationBC .core .categoryPageComponent:nth-child(2) {} .categoryPageComponentWrapper.variationC .imgLayer, .categoryPageComponentWrapper.variationD .imgLayer { background-size: 100%; } .categoryPageComponentWrapper.variationC .imgLayer { background-position: center top; } .categoryPageComponentWrapper.variationD .imgLayer { background-position: center bottom; } .categoryPageComponentWrapper.variationC .core, .categoryPageComponentWrapper.variationD .core { flex-direction: column; } .categoryPageComponentWrapper.variationC .core .categoryPageComponent:nth-child(1), .categoryPageComponentWrapper.variationD .core .categoryPageComponent:nth-child(1) { flex-direction: row; } .categoryPageComponentWrapper.variationC .core .categoryPageComponent:nth-child(1) { order: 2; } .categoryPageComponentWrapper.variationC .core .categoryPageComponent:nth-child(2), .categoryPageComponentWrapper.variationD .core .categoryPageComponent:nth-child(2) {} .categoryPageComponentWrapper.variationF .imgLayer { background-size: cover; background-position: center; } .categoryPageComponentWrapper.variationF .core { flex-direction: row; } .categoryPageComponentWrapper.variationF.col-1-2 .core .categoryPageComponent:nth-child(1) { width: 25%; } .categoryPageComponentWrapper.variationF.col-1-2 .core .categoryPageComponent:nth-child(2) { width: 50%; flex-direction: column; } .categoryPageComponentWrapper.variationF.col-1-2 .core .categoryPageComponent:nth-child(3) { width: 25%; } .categoryPageComponentWrapper.variationF.col-1-3 .core .categoryPageComponent:nth-child(1) { width: 33.33%; } .categoryPageComponentWrapper.variationF.col-1-3 .core .categoryPageComponent:nth-child(2) { width: 33.33%; flex-direction: column; } .categoryPageComponentWrapper.variationF.col-1-3 .core .categoryPageComponent:nth-child(3) { width: 33.33%; } .categoryPageComponentWrapper.variationF.col-2-3 .core .categoryPageComponent:nth-child(1) { width: 16.665%; } .categoryPageComponentWrapper.variationF.col-2-3 .core .categoryPageComponent:nth-child(2) { width: 66.66%; flex-direction: column; } .categoryPageComponentWrapper.variationF.col-2-3 .core .categoryPageComponent:nth-child(3) { width: 16.665%; } @media only screen and (max-width: 1024px){ .categoryPageComponentWrapper .core .categoryPageComponent .content { padding: 20px; } .categoryPageComponentWrapper.variationAC .imgLayer, .categoryPageComponentWrapper.variationBC .imgLayer { background-size: 100%; background-position: center top; } .categoryPageComponentWrapper.variationA .core .categoryPageComponent:nth-child(1), .categoryPageComponentWrapper.variationB .core .categoryPageComponent:nth-child(1) {} .categoryPageComponentWrapper.variationAC .core, .categoryPageComponentWrapper.variationBC .core, .categoryPageComponentWrapper.variationC .core, .categoryPageComponentWrapper.variationD .core { flex-direction: column; } .categoryPageComponentWrapper.variationAC .core .categoryPageComponent .content, .categoryPageComponentWrapper.variationBC .core .categoryPageComponent .content, .categoryPageComponentWrapper.variationC .core .categoryPageComponent .content, .categoryPageComponentWrapper.variationD .core .categoryPageComponent .content { flex: 1; } .categoryPageComponentWrapper.variationAC .core .categoryPageComponent:nth-child(1), .categoryPageComponentWrapper.variationBC .core .categoryPageComponent:nth-child(1), .categoryPageComponentWrapper.variationC .core .categoryPageComponent:nth-child(1), .categoryPageComponentWrapper.variationD .core .categoryPageComponent:nth-child(1) { flex-direction: row; } .categoryPageComponentWrapper.variationAC .core .categoryPageComponent:nth-child(1) { order: 2; } .categoryPageComponentWrapper.variationAC .core .categoryPageComponent:nth-child(2), .categoryPageComponentWrapper.variationBC .core .categoryPageComponent:nth-child(2), .categoryPageComponentWrapper.variationC .core .categoryPageComponent:nth-child(2), .categoryPageComponentWrapper.variationD .core .categoryPageComponent:nth-child(2) {} .categoryPageComponentWrapper.variationAC.col-1-2 .core .categoryPageComponent:nth-child(1) { width: auto; } .categoryPageComponentWrapper.variationAC.col-1-2 .core .categoryPageComponent:nth-child(2) { width: 100%; } .categoryPageComponentWrapper.variationAC.col-1-3 .core .categoryPageComponent:nth-child(1) { width: auto; } .categoryPageComponentWrapper.variationAC.col-1-3 .core .categoryPageComponent:nth-child(2) { width: 100%; } .categoryPageComponentWrapper.variationAC.col-2-3 .core .categoryPageComponent:nth-child(1) { width: auto; } .categoryPageComponentWrapper.variationAC.col-2-3 .core .categoryPageComponent:nth-child(2) { width: 100%; } .categoryPageComponentWrapper.variationBC.col-1-2 .core .categoryPageComponent:nth-child(1) { width: auto; } .categoryPageComponentWrapper.variationBC.col-1-2 .core .categoryPageComponent:nth-child(2) { width: 100%; } .categoryPageComponentWrapper.variationBC.col-1-3 .core .categoryPageComponent:nth-child(1) { width: auto; } .categoryPageComponentWrapper.variationBC.col-1-3 .core .categoryPageComponent:nth-child(2) { width: 100%; } .categoryPageComponentWrapper.variationBC.col-2-3 .core .categoryPageComponent:nth-child(1) { width: auto; } .categoryPageComponentWrapper.variationBC.col-2-3 .core .categoryPageComponent:nth-child(2) { width: 100%; } } /*************/ /* triptychs */ /*************/ /* Added at 15.08.19. */ /* Edited at 21.08.19. Added triptych variation with extra margins. */ /* Edited at 22.08.19. Adjusted media query to meet tablet size, not mobile size. Adjusted mobile variants E, F, G & H. */ /* Edited at 09.09.19. Added option 'narrow'. */ /* Edited at 13.09.19. Added option 'border' to content div, to add white border to images on desktop. */ /* Edited at 02.10.19. Added option 'data-maintain-direction' for variation A, B, C and D. */ /* Edited at 07.01.20. Fixed 'flexbox' issue on IE. */ /* Edited at 17.02.20. Added option to content, to add padding when background is not blank. */ /* Edited at 29.10.20. Added fix to overrule some h2 styling. */ /* Edited at 15.02.23. Updated styling to fit replatforming. */ .categoryPageBanner .categoryTriptychs { margin-bottom: 20px; } .categoryTriptychs { display: flex; flex-direction: row; align-items: stretch; } .categoryTriptychs.wrapped { padding: 30px; } .categoryTriptychs.narrow.wrapped { padding: 10px; } .categoryTriptychs .categoryTriptych { width: 50%; display: flex; flex-direction: column; align-items: stretch; } .categoryTriptychs .categoryTriptych > .content { width: calc(100% - 15px); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; position: relative; } .categoryTriptychs .categoryTriptych > .content.border { border: 5px solid #fff; } .categoryTriptychs.narrow .categoryTriptych > .content { width: calc(100% - 5px); } .categoryTriptychs .categoryTriptych > .content .areas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .categoryTriptychs .categoryTriptych > .content .areas a { display: block; z-index: 3; } .categoryTriptychs .categoryTriptych > .content .areas a div { display: block; position: absolute; z-index: 2; } .categoryTriptychs.variationA .categoryTriptych:nth-child(1) > .content:nth-child(1), .categoryTriptychs.variationB .categoryTriptych:nth-child(1) > .content:nth-child(1), .categoryTriptychs.variationC .categoryTriptych:nth-child(1) > .content:nth-child(1), .categoryTriptychs.variationD .categoryTriptych:nth-child(1) > .content:nth-child(1), .categoryTriptychs.variationE .categoryTriptych:nth-child(1) > .content:nth-child(1), .categoryTriptychs.variationF .categoryTriptych:nth-child(1) > .content:nth-child(1), .categoryTriptychs.variationI .categoryTriptych:nth-child(1) > .content:nth-child(1), .categoryTriptychs.variationJ .categoryTriptych:nth-child(1) > .content:nth-child(1) { padding: 20px 0; flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; display: flex; flex-direction: column; justify-content: center; } .categoryTriptychs.variationA .categoryTriptych:nth-child(1) > .content.padding:nth-child(1), .categoryTriptychs.variationB .categoryTriptych:nth-child(1) > .content.padding:nth-child(1), .categoryTriptychs.variationC .categoryTriptych:nth-child(1) > .content.padding:nth-child(1), .categoryTriptychs.variationD .categoryTriptych:nth-child(1) > .content.padding:nth-child(1), .categoryTriptychs.variationE .categoryTriptych:nth-child(1) > .content.padding:nth-child(1), .categoryTriptychs.variationF .categoryTriptych:nth-child(1) > .content.padding:nth-child(1), .categoryTriptychs.variationI .categoryTriptych:nth-child(1) > .content.padding:nth-child(1), .categoryTriptychs.variationJ .categoryTriptych:nth-child(1) > .content.padding:nth-child(1) { padding: 20px; } .categoryTriptychs .categoryTriptych > .content h1.heading, .categoryTriptychs .categoryTriptych > .content h2.heading, .pt_product-search-noresult #primary .categoryTriptychs .categoryTriptych > .content h2.heading, .pt_product-search-result #primary .categoryTriptychs .categoryTriptych > .content h2.heading, .categoryTriptychs .categoryTriptych > .content h3.heading, .categoryTriptychs .categoryTriptych > .content h4.heading, .categoryTriptychs .categoryTriptych > .content h5.heading, .categoryTriptychs .categoryTriptych > .content h6.heading, .categoryTriptychs .categoryTriptych > .content p.bodycopy { margin: 0; } .categoryTriptychs .categoryTriptych > .content h6.heading { margin-top: 5px; } .categoryTriptychs .categoryTriptych > .content p.bodycopy:nth-child(2) { margin-top: 20px; } .categoryTriptychs.variationA .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 15px 15px 0; } .categoryTriptychs.variationA .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 15px 15px 0 0; } .categoryTriptychs.variationA .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 0 15px; flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; } .categoryTriptychs.narrow.variationA .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 5px 5px 0; } .categoryTriptychs.narrow.variationA .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 5px 5px 0 0; } .categoryTriptychs.narrow.variationA .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 0 5px; } .categoryTriptychs.variationB .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 15px 15px 0 0; } .categoryTriptychs.variationB .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 15px 15px 0; order: -1; } .categoryTriptychs.variationB .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 0 15px; flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; } .categoryTriptychs.narrow.variationB .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 5px 5px 0 0; } .categoryTriptychs.narrow.variationB .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 5px 5px 0; } .categoryTriptychs.narrow.variationB .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 0 5px; } .categoryTriptychs.variationC .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 0 15px 15px; } .categoryTriptychs.variationC .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 15px 0 0 15px; } .categoryTriptychs.variationC .categoryTriptych:nth-child(2) { order: -1; } .categoryTriptychs.variationC .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 15px 0 0; flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; } .categoryTriptychs.narrow.variationC .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 0 5px 5px; } .categoryTriptychs.narrow.variationC .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 5px 0 0 5px; } .categoryTriptychs.narrow.variationC .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 5px 0 0; } .categoryTriptychs.variationD .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 15px 0 0 15px; } .categoryTriptychs.variationD .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 0 15px 15px; order: -1; } .categoryTriptychs.variationD .categoryTriptych:nth-child(2) { order: -1; } .categoryTriptychs.variationD .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 15px 0 0; flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; } .categoryTriptychs.narrow.variationD .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 5px 0 0 5px; } .categoryTriptychs.narrow.variationD .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 0 5px 5px; } .categoryTriptychs.narrow.variationD .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 5px 0 0; } .categoryTriptychs.variationE .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 15px 0 0; flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; } .categoryTriptychs.variationE .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 15px 15px; } .categoryTriptychs.variationE .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 15px 0 0 15px; } .categoryTriptychs.narrow.variationE .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 5px 0 0; } .categoryTriptychs.narrow.variationE .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 5px 5px; } .categoryTriptychs.narrow.variationE .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 5px 0 0 5px; } .categoryTriptychs.variationF .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 0 0 15px; flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; } .categoryTriptychs.variationF .categoryTriptych:nth-child(2) { order: -1; } .categoryTriptychs.variationF .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 15px 15px 0; } .categoryTriptychs.variationF .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 15px 15px 0 0; } .categoryTriptychs.narrow.variationF .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 0 0 5px; } .categoryTriptychs.narrow.variationF .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 5px 5px 0; } .categoryTriptychs.narrow.variationF .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 5px 5px 0 0; } .categoryTriptychs.variationG .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 15px 0 0; flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; } .categoryTriptychs.variationG .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 15px 15px; } .categoryTriptychs.variationG .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 15px 0 0 15px; } .categoryTriptychs.narrow.variationG .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 5px 0 0; } .categoryTriptychs.narrow.variationG .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 5px 5px; } .categoryTriptychs.narrow.variationG .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 5px 0 0 5px; } .categoryTriptychs.variationH .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 0 0 15px; flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; } .categoryTriptychs.variationH .categoryTriptych:nth-child(2) { order: -1; } .categoryTriptychs.variationH .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 15px 15px 0; } .categoryTriptychs.variationH .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 15px 15px 0 0; } .categoryTriptychs.narrow.variationH .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 0 0 5px; } .categoryTriptychs.narrow.variationH .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 5px 5px 0; } .categoryTriptychs.narrow.variationH .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 5px 5px 0 0; } .categoryTriptychs.variationI .categoryTriptych:nth-child(1) { padding: 6% 6% 6% 3%; } .categoryTriptychs.variationI .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 15px 0 0 15px; } .categoryTriptychs.variationI .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 0 15px 15px; order: -1; } .categoryTriptychs.variationI .categoryTriptych:nth-child(2) { padding-right: 3%; } .categoryTriptychs.variationI .categoryTriptych:nth-child(2) { order: -1; } .categoryTriptychs.variationI .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 15px 0 0; flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; } .categoryTriptychs.narrow.variationI .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 5px 0 0 5px; } .categoryTriptychs.narrow.variationI .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 0 5px 5px; } .categoryTriptychs.narrow.variationI .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 5px 0 0; } .categoryTriptychs.variationJ .categoryTriptych:nth-child(1) { padding: 6% 3% 6% 6%; } .categoryTriptychs.variationJ .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 15px 0 0 15px; } .categoryTriptychs.variationJ .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 0 15px 15px; order: -1; } .categoryTriptychs.variationJ .categoryTriptych:nth-child(2) { padding-left: 3%; } .categoryTriptychs.variationJ .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 15px 0 0; flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; } .categoryTriptychs.narrow.variationJ .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 5px 0 0 5px; } .categoryTriptychs.narrow.variationJ .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 0 5px 5px; } .categoryTriptychs.narrow.variationJ .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 5px 0 0; } @media only screen and (max-width : 1024px){ .categoryPageBanner .categoryTriptychs {} .categoryTriptychs { flex-direction: column; } .categoryTriptychs[data-maintain-direction] { flex-direction: row; } .categoryTriptychs.wrapped { padding: 20px; } .categoryTriptychs.narrow.wrapped { padding: 10px; } .categoryTriptychs .categoryTriptych { width: 100%; } .categoryTriptychs[data-maintain-direction] .categoryTriptych { width: 50%; } .categoryTriptychs .categoryTriptych > .content { width: 100%; } .categoryTriptychs .categoryTriptych > .content.border { border: 0; } .categoryTriptychs.variationA .categoryTriptych:nth-child(1) > .content:nth-child(1), .categoryTriptychs.variationB .categoryTriptych:nth-child(1) > .content:nth-child(1), .categoryTriptychs.variationC .categoryTriptych:nth-child(1) > .content:nth-child(1), .categoryTriptychs.variationD .categoryTriptych:nth-child(1) > .content:nth-child(1), .categoryTriptychs.variationE .categoryTriptych:nth-child(1) > .content:nth-child(1), .categoryTriptychs.variationF .categoryTriptych:nth-child(1) > .content:nth-child(1), .categoryTriptychs.variationI .categoryTriptych:nth-child(1) > .content:nth-child(1), .categoryTriptychs.variationJ .categoryTriptych:nth-child(1) > .content:nth-child(1) { padding: 20px 0; flex: initial; } .categoryTriptychs.variationA .categoryTriptych:nth-child(1) > .content.padding:nth-child(1), .categoryTriptychs.variationB .categoryTriptych:nth-child(1) > .content.padding:nth-child(1), .categoryTriptychs.variationC .categoryTriptych:nth-child(1) > .content.padding:nth-child(1), .categoryTriptychs.variationD .categoryTriptych:nth-child(1) > .content.padding:nth-child(1), .categoryTriptychs.variationE .categoryTriptych:nth-child(1) > .content.padding:nth-child(1), .categoryTriptychs.variationF .categoryTriptych:nth-child(1) > .content.padding:nth-child(1), .categoryTriptychs.variationI .categoryTriptych:nth-child(1) > .content.padding:nth-child(1), .categoryTriptychs.variationJ .categoryTriptych:nth-child(1) > .content.padding:nth-child(1) { padding: 20px; } .categoryTriptychs.variationA .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 0 10px 0; } .categoryTriptychs.variationA .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 10px 0 10px 0; } .categoryTriptychs.variationA .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 10px 0 0 0; } .categoryTriptychs.variationA[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 15px 15px 0; } .categoryTriptychs.variationA[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 15px 15px 0 0; } .categoryTriptychs.variationA[data-maintain-direction] .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 0 15px; } .categoryTriptychs.narrow.variationA .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 0 5px 0; } .categoryTriptychs.narrow.variationA .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 5px 0 5px 0; } .categoryTriptychs.narrow.variationA .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 5px 0 0 0; } .categoryTriptychs.narrow.variationA[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 5px 5px 0; } .categoryTriptychs.narrow.variationA[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 5px 5px 0 0; } .categoryTriptychs.narrow.variationA[data-maintain-direction] .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 0 5px; } .categoryTriptychs.variationB .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 10px 0 10px 0; } .categoryTriptychs.variationB .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 0 10px 0; } .categoryTriptychs.variationB .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 10px 0 0 0; } .categoryTriptychs.variationB[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 15px 15px 0 0; } .categoryTriptychs.variationB[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 15px 15px 0; } .categoryTriptychs.variationB[data-maintain-direction] .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 0 15px; } .categoryTriptychs.narrow.variationB .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 5px 0 5px 0; } .categoryTriptychs.narrow.variationB .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 0 5px 0; } .categoryTriptychs.narrow.variationB .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 5px 0 0 0; } .categoryTriptychs.narrow.variationB[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 5px 5px 0 0; } .categoryTriptychs.narrow.variationB[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 5px 5px 0; } .categoryTriptychs.narrow.variationB[data-maintain-direction] .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 0 5px; } .categoryTriptychs.variationC .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 10px 0 10px 0; } .categoryTriptychs.variationC .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 10px 0 0 0; } .categoryTriptychs.variationC .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 10px 0; } .categoryTriptychs.variationC[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 0 15px 15px; } .categoryTriptychs.variationC[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 15px 0 0 15px; } .categoryTriptychs.variationC[data-maintain-direction] .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 15px 0 0; } .categoryTriptychs.narrow.variationC .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 5px 0 5px 0; } .categoryTriptychs.narrow.variationC .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 5px 0 0 0; } .categoryTriptychs.narrow.variationC .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 5px 0; } .categoryTriptychs.narrow.variationC[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 0 5px 5px; } .categoryTriptychs.narrow.variationC[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 5px 0 0 5px; } .categoryTriptychs.narrow.variationC[data-maintain-direction] .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 5px 0 0; } .categoryTriptychs.variationD .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 10px 0 0 0; } .categoryTriptychs.variationD .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 10px 0 10px 0; } .categoryTriptychs.variationD .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 10px 0; } .categoryTriptychs.variationD[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 15px 0 0 15px; } .categoryTriptychs.variationD[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 0 15px 15px; } .categoryTriptychs.variationD[data-maintain-direction] .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 15px 0 0; } .categoryTriptychs.narrow.variationD .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 5px 0 0 0; } .categoryTriptychs.narrow.variationD .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 5px 0 5px 0; } .categoryTriptychs.narrow.variationD .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 5px 0; } .categoryTriptychs.narrow.variationD[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 5px 0 0 5px; } .categoryTriptychs.narrow.variationD[data-maintain-direction] .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 0 5px 5px; } .categoryTriptychs.narrow.variationD[data-maintain-direction] .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 5px 0 0; } .categoryTriptychs.variationE { flex-direction: column; } .categoryTriptychs.variationE .categoryTriptych { flex-direction: row; width: 100%; } .categoryTriptychs.variationE .categoryTriptych:nth-child(1) > .content { width: 100%; } .categoryTriptychs.variationE .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 0 10px 0; } .categoryTriptychs.variationE .categoryTriptych:nth-child(2) > .content { width: 50%; } .categoryTriptychs.variationE .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 10px 10px 0 0; } .categoryTriptychs.variationE .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 10px 0 0 10px; } .categoryTriptychs.narrow.variationE .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 0 5px 0; } .categoryTriptychs.narrow.variationE .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 5px 5px 0 0; } .categoryTriptychs.narrow.variationE .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 5px 0 0 5px; } .categoryTriptychs.variationF { flex-direction: column; } .categoryTriptychs.variationF .categoryTriptych { flex-direction: row; width: 100%; } .categoryTriptychs.variationF .categoryTriptych:nth-child(1) > .content { width: 100%; } .categoryTriptychs.variationF .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 10px 0 0 0; } .categoryTriptychs.variationF .categoryTriptych:nth-child(2) > .content { width: 50%; } .categoryTriptychs.variationF .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 10px 10px 0; } .categoryTriptychs.variationF .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 0 0 10px 10px; } .categoryTriptychs.narrow.variationF .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 5px 0 0 0; } .categoryTriptychs.narrow.variationF .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 5px 5px 0; } .categoryTriptychs.narrow.variationF .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 0 0 5px 5px; } .categoryTriptychs.variationG { flex-direction: column; } .categoryTriptychs.variationG .categoryTriptych { flex-direction: row; width: 100%; } .categoryTriptychs.variationG .categoryTriptych:nth-child(1) > .content { width: 100%; } .categoryTriptychs.variationG .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 0 10px 0; } .categoryTriptychs.variationG .categoryTriptych:nth-child(2) > .content { width: 50%; } .categoryTriptychs.variationG .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 10px 10px 0 0; } .categoryTriptychs.variationG .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 10px 0 0 10px; } .categoryTriptychs.narrow.variationG .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 0 0 5px 0; } .categoryTriptychs.narrow.variationG .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 5px 5px 0 0; } .categoryTriptychs.narrow.variationG .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 5px 0 0 5px; } .categoryTriptychs.variationH { flex-direction: column; } .categoryTriptychs.variationH .categoryTriptych { flex-direction: row; width: 100%; } .categoryTriptychs.variationH .categoryTriptych:nth-child(1) > .content { width: 100%; } .categoryTriptychs.variationH .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 10px 0 0 0; } .categoryTriptychs.variationH .categoryTriptych:nth-child(2) > .content { width: 50%; } .categoryTriptychs.variationH .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 10px 10px 0; } .categoryTriptychs.variationH .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 0 0 10px 10px; } .categoryTriptychs.narrow.variationH .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 5px 0 0 0; } .categoryTriptychs.narrow.variationH .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 5px 5px 0; } .categoryTriptychs.narrow.variationH .categoryTriptych:nth-child(2) > .content:nth-child(2) { margin: 0 0 5px 5px; } .categoryTriptychs.variationI .categoryTriptych:nth-child(1) { padding: 0; } .categoryTriptychs.variationI .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 10px 0 10px 0; } .categoryTriptychs.variationI .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 10px 0 0 0; order: 2; } .categoryTriptychs.variationI .categoryTriptych:nth-child(2) { padding: 0; } .categoryTriptychs.variationI .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 10px 0; } .categoryTriptychs.narrow.variationI .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 5px 0 5px 0; } .categoryTriptychs.narrow.variationI .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 5px 0 0 0; order: 2; } .categoryTriptychs.narrow.variationI .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 0 0 5px 0; } .categoryTriptychs.variationJ .categoryTriptych:nth-child(1) { padding: 0; } .categoryTriptychs.variationJ .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 10px 0 10px 0; } .categoryTriptychs.variationJ .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 0 10px 0; } .categoryTriptychs.variationJ .categoryTriptych:nth-child(2) { padding: 0; } .categoryTriptychs.variationJ .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 10px 0 10px 0; } .categoryTriptychs.narrow.variationJ .categoryTriptych:nth-child(1) > .content:nth-child(1) { margin: 5px 0 5px 0; } .categoryTriptychs.narrow.variationJ .categoryTriptych:nth-child(1) > .content:nth-child(2) { margin: 0 0 5px 0; } .categoryTriptychs.narrow.variationJ .categoryTriptych:nth-child(2) > .content:nth-child(1) { margin: 5px 0 5px 0; } } /********/ /* USPs */ /********/ /* Added at 25.01.18. */ /* Edited at 15.03.18. */ /* Edited at 05.08.19. Updated styling to flex box styling. */ /* Edited at 12.09.19. Adjusted styling to meet the same setup as PDP USPs. */ /* Edited at 02.06.20. Removed text style bold. */ /* Edited at 05.06.20. Styled b. */ /* Edited at 18.06.20. Removed tick icon. */ /* Edited at 31.12.20. Updated styling for mobile. */ /* Edited at 09.11.21. Updated USPs with start/end date spans. */ /* Edited at 29.06.22. Removed letterspacing. */ .plpUspsWrapper {} .plpUspsWrapper .plpUsps { padding: 20px; background-color: #f2f2f2; } .plpUspsWrapper .plpUsps ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: flex-start; } .plpUspsWrapper .plpUsps ul li { display: block; width: 33.3%; letter-spacing: 0; font-size: 15px; line-height: 17.25px; text-align: center; margin: 10px 0 10px 0 !important; position: relative; z-index: 1; } .plpUspsWrapper .plpUsps ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) { position: relative; width: 24px; height: 17px; display: inline-block; margin-right: 5px; } .plpUspsWrapper .plpUsps ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) .globalIcon { position: absolute; top: 0; left: 0; } .plpUspsWrapper .plpUsps ul li b { font-family: 'Futura PT W01 Medium', arial, sans-serif; font-weight: 900; } @media only screen and (max-width: 1024px){ .plpUspsWrapper .plpUsps ul { margin: 0; flex-direction: column; } .plpUspsWrapper .plpUsps ul li { display: initial; width: 100%; text-align: left; float: none !important; } .plpUspsWrapper .plpUsps ul li:first-child { margin-top: 0 !important; } .plpUspsWrapper .plpUsps ul li:last-child { margin-bottom: 0 !important; } } @media only screen and (max-width: 850px){ .plpUspsWrapper { padding: 0 20px; } .plpUspsWrapper .plpUsps ul { margin-left: 34px; } .plpUspsWrapper .plpUsps ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) { position: absolute; left: -34px; height: 20px; } .plpUspsWrapper .plpUsps ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) .globalIcon { top: inherit; bottom: 0; } /* fix */ .pt_product-search-result .search-result-items:not(.recommendations-crsl) li:not(.grid-tile) .plpUspsWrapper .plpUsps ul li { margin: 10px 0 10px 0 !important; } .pt_product-search-result .search-result-items:not(.recommendations-crsl) li:not(.grid-tile) .plpUspsWrapper .plpUsps ul li:first-child { margin-top: 0 !important; } .pt_product-search-result .search-result-items:not(.recommendations-crsl) li:not(.grid-tile) .plpUspsWrapper .plpUsps ul li:last-child { margin-bottom: 0 !important; } } /***********************/ /* USPs Product Heroes */ /***********************/ /* Added at 17.10.19. */ /* Edited at 21.10.19. Added mobile styling. */ /* Edited at 29.06.22. Removed letterspacing. */ .heroUspsWrapper {} .heroUspsWrapper .heroUsps {} .heroUspsWrapper .heroUsps ol { margin: 0; padding: 0 0 0 18px; } .heroUspsWrapper .heroUsps ol li { width: 100%; letter-spacing: 0; font-size: 15px; line-height: 17.25px; text-align: left; float: none !important; } /* fix */ .pt_product-search-result .search-result-items:not(.recommendations-crsl) .heroUspsWrapper .heroUsps ol li:not(.grid-tile) { width: 100% !important; margin: 0 0 15px 0 !important; } .pt_product-search-noresult .search-result-items:not(.recommendations-crsl) .heroUspsWrapper .heroUsps ol li:not(.grid-tile):last-child { margin: 0 !important; } @media only screen and (max-width: 850px){ /* fix */ .pt_product-search-noresult .search-result-items:not(.recommendations-crsl) .heroUspsWrapper .heroUsps ol li:not(.grid-tile) { width: 100% !important; margin: 0 0 10px 0 !important; } .pt_product-search-noresult .search-result-items:not(.recommendations-crsl) .heroUspsWrapper .heroUsps ol li:not(.grid-tile):last-child { margin: 0 !important; } } /******************************/ /* Coming Soon Product Heroes */ /******************************/ /* Added at 17.10.19. */ /* Edited at 21.10.19. Added mobile styling. */ /* Edited at 29.06.22. Removed letterspacing. */ .comingSoonStickerWrapper {} .comingSoonStickerWrapper .comingSoonSticker {} .comingSoonStickerWrapper .comingSoonSticker .comingSoonStickerBG { fill: #000000; } .comingSoonStickerWrapper .comingSoonSticker .comingSoonStickerTXT { fill:#ffffff; } .inverse .comingSoonStickerWrapper .comingSoonSticker .comingSoonStickerBG { fill: #ffffff; } .inverse .comingSoonStickerWrapper .comingSoonSticker .comingSoonStickerTXT { fill:#000000; } /******************/ /* listing banner */ /******************/ /* Added at 03.09.20. */ /* Edited at 14.02.23. Updated styling to fit replatforming. */ .listingBannerWrapper { width: 100%; margin-bottom: 30px; } .listingBannerWrapper .listingBanner { padding: 20px; background-color: #f2f2f2; } .listingBannerWrapper .listingBanner ul { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; } .listingBannerWrapper .listingBanner ul li { display: block; width: 33.3%; letter-spacing: 1px; font-size: 15px; line-height: 17.25px; text-align: center; margin: 10px 0 10px 0 !important; position: relative; z-index: 1; } .listingBannerWrapper .listingBanner ul li b { font-family: 'Futura PT W01 Medium', arial, sans-serif; font-weight: 900; } .listingBannerWrapper .listingBanner ul li .globalIcon.border { border: 0 !important; } @media only screen and (min-width: 1024px){ .listingBannerWrapper .listingBanner ul li { max-width: 25%; } .listingBannerWrapper .listingBanner ul li p.bodycopy { margin-top: 10px; } } @media only screen and (max-width: 1024px){ .listingBannerWrapper .listingBanner ul { margin: 30px; flex-direction: column; } .listingBannerWrapper .listingBanner ul li { display: initial; width: 100%; text-align: left; float: none !important; line-height: 48px; padding-left: 68px; } .listingBannerWrapper .listingBanner ul li .globalIcon { position: absolute; left: 0; top: 0; } .listingBannerWrapper .listingBanner ul li:first-child { margin-top: 0 !important; } .listingBannerWrapper .listingBanner ul li:last-child { margin-bottom: 0 !important; } } @media only screen and (max-width: 850px){ .listingBannerWrapper { padding: 0 20px; } /* fix */ .pt_product-search-result .search-result-items:not(.recommendations-crsl) li:not(.grid-tile) .listingBannerWrapper .listingBanner ul li { margin: 10px 0 10px 0 !important; } .pt_product-search-result .search-result-items:not(.recommendations-crsl) li:not(.grid-tile) .listingBannerWrapper .listingBanner ul li:first-child { margin-top: 0 !important; } .pt_product-search-result .search-result-items:not(.recommendations-crsl) li:not(.grid-tile) .listingBannerWrapper .listingBanner ul li:last-child { margin-bottom: 0 !important; } } /*****************/ /* hero products */ /*****************/ /* Edited at 01.08.19. Added promotion sticker positioning. */ /* Edited at 02.08.19. Added fix to image sticker dimensions. */ /* Edited at 21.10.19. Added styling to hero usp products. */ /* Edited at 13.12.19. Changed setup of heroUSPProduct to flexbox equivalent. */ /* Edited at 13.05.20. Fixed height of USP container on iOS Safari (mobile). */ /* Edited at 08.02.21. Updated styling of 'heroUSPProduct'. */ /* Edited at 18.01.23. Updated styling to fit replatforming. Not final yet. */ /* Edited at 20.01.23. Removed hotfix. */ .heroProductWrapper { position: relative; z-index: 1; } .heroProductWrapper .heroProduct {} .heroProductWrapper .heroProduct .imgWrapper { display: flex; flex-direction: row; flex-wrap: nowrap; margin-bottom: 10px; } .heroProductWrapper .heroProduct .imgWrapper .imgHolder { width: 50%; } .heroProductWrapper .heroProduct .promotion { position: absolute; bottom: 1.5em; left: 0; z-index: 1; } .heroProductWrapper .heroProduct img.promotion { width: auto; height: auto; } .heroProductWrapper .heroProduct .flex.inverse .product-pricing {} .heroProductWrapper .heroProduct .flex.inverse .product-pricing .product-price {} .heroProductWrapper .heroProduct .flex.inverse .product-pricing .product-price .price-standard { font-size: 22px; } .heroProductWrapper .heroProduct .flex.inverse .product-pricing .product-price .price-sales { font-size: 22px; } .heroProductWrapper .heroProduct.heroUSPProduct {} .heroProductWrapper .heroProduct.heroUSPProduct .imageMap { display: flex; } .heroProductWrapper .heroProduct.heroUSPProduct .imageMap > div:nth-child(1) img { width: 100%; } .heroProductWrapper .heroProduct.heroUSPProduct .imageMap .flex.left { width: calc(100% - 20px); margin: 0 auto 0 0; } .heroProductWrapper .heroProduct.heroUSPProduct .imageMap h4.heading a.cta { font-size: 22px } @media only screen and (min-width: 1024px){ .heroProductWrapper .heroProduct.heroUSPProduct .imageMap { flex-direction: row; } .heroProductWrapper .heroProduct.heroUSPProduct .imageMap > div { width: 50%; position: relative; } } @media only screen and (max-width: 1024px){ .heroProductWrapper .heroProduct.heroUSPProduct .imageMap { flex-direction: column; } .heroProductWrapper .heroProduct.heroUSPProduct .imageMap > div { width: 100%; position: relative; } .heroProductWrapper .heroProduct.heroUSPProduct .imageMap > div:nth-child(2) {} .heroProductWrapper .heroProduct.heroUSPProduct .imageMap > div:nth-child(2) .areas { position: relative; height: fit-content; height: -moz-fit-content; height: -webkit-fit-content; } .heroProductWrapper .heroProduct.heroUSPProduct .imageMap > div:nth-child(2) .areas .flex { padding: 20px 0 20px 20px; } .heroProductWrapper .heroProduct.heroUSPProduct .imageMap .flex.left { width: calc(100% - 10px); margin: 0 auto; } } /*******************/ /* fitguide (2019) */ /*******************/ /* Added at 17.07.19. */ /* Edited at 31.07.19. Added heading margins. */ .page-category-1216-fitguide .pt_product-search-result #primary h2.heading { margin: 0 auto; } .fitGuideByRiseWrapper { background-color: #f2f2f2; padding: 15px; } .fitGuideByLegWrapper { background-color: #f2f2f2; padding: 15px 0; } .fitGuideByLegWrapper .fitGuide .categoryPageSlider {} .fitGuideByLegWrapper .fitGuide .categoryPageSlider .inverse.cycle-prev, .fitGuideByLegWrapper .fitGuide .categoryPageSlider .inverse.cycle-next { background-color: rgba(255,255,255,1.0); } .fitGuideByLegWrapper .fitGuide .categoryPageSlider .inverse.cycle-prev { left: 15px; } .fitGuideByLegWrapper .fitGuide .categoryPageSlider .inverse.cycle-next { right: 15px; } .fitGuideByLegWrapper .fitGuide .categoryPageSlider .slide { padding: 15px; white-space: normal; display: flex; flex-direction: column; } .fitGuideByLegWrapper .fitGuide .categoryPageSlider.centeredSlideCarousel {} .fitGuideByLegWrapper .fitGuide .categoryPageSlider.centeredSlideCarousel .carouselTile { padding: 0 15px; white-space: normal; display: flex; flex-direction: column; } /*******************/ /* stills carousel */ /*******************/ /* Added at 24.03.21. */ /* Edited at 23.04.21. Increased padding of carousel. */ /* Edited at 23.11.21. Added styling for no border. */ /* Edited at 18.11.22. Added dot for copy. */ .stillsCarouselWrapper { background-color: #f2f2f2; } .stillsCarouselWrapper .stillsCarousel { padding: 40px 0; overflow: hidden; } .stillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide > .imageMap > .areas:before { content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: 5px solid #fff; } .stillsCarouselWrapper.noBorder .stillsCarousel .categoryPageSlider .slide > .imageMap > .areas:before { display: none; } .stillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide { padding: 0 10px; white-space: normal; display: flex; flex-direction: column; } .stillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide .heading { margin: 10px 0; } .stillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide .bodycopy.ctas { margin: 0; } .stillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide .dot.list-item { background-color: #000; width: 5px; height: 5px; -moz-border-radius: 8px; border-radius: 8px; display: inline-block; margin-right: 5px; } .stillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide .inverse .dot.list-item { background-color: #fff; } .stillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide .title.list-item { line-height: 15pt; } @media only screen and (min-width: 1024px){ .stillsCarouselWrapper .stillsCarousel .cycle-nav-external-wrapper { padding: 0 48px; } .stillsCarouselWrapper .stillsCarousel .cycle-nav-external-wrapper .cycle-nav-external.inverse.cycle-prev { left: 10px; } .stillsCarouselWrapper .stillsCarousel .cycle-nav-external-wrapper .cycle-nav-external.inverse.cycle-next { right: 10px; } } @media only screen and (max-width: 1024px){ .stillsCarouselWrapper .stillsCarousel .categoryPageSlider { overflow: visible !important; max-width: 80%; left: 10%; } } /***************************/ /* wedding stills carousel */ /***************************/ /* Added at 23.03.22. Based on stills carousel. */ .weddingStillsCarouselWrapper { background-color: #f5f2ee; } .weddingStillsCarouselWrapper .stillsCarousel { padding: 40px 0; overflow: hidden; } .weddingStillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide > .imageMap > .areas { height: calc(94% - 4px); top: 50%; width: calc(94% - 4px); left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .weddingStillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide > .imageMap > .areas:before { content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } .weddingStillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide > .imageMap .imgHolder:nth-child(1) { border: #999 2px solid; border-radius: 5%; } .weddingStillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide > .imageMap .areas .imgHolder:nth-child(1) { border: none; border-radius: 3%; } .weddingStillsCarouselWrapper.noBorder .stillsCarousel .categoryPageSlider .slide > .imageMap > .areas:before { display: none; } .weddingStillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide { padding: 0 10px; white-space: normal; display: flex; flex-direction: column; } .weddingStillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide .heading { margin: 10px 0; } .weddingStillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide .bodycopy.ctas { margin: 0; } @media only screen and (min-width: 1024px){ .weddingStillsCarouselWrapper .stillsCarousel .cycle-nav-external-wrapper { padding: 0 48px; } .weddingStillsCarouselWrapper .stillsCarousel .cycle-nav-external-wrapper .cycle-nav-external.inverse.cycle-prev { left: 10px; } .weddingStillsCarouselWrapper .stillsCarousel .cycle-nav-external-wrapper .cycle-nav-external.inverse.cycle-next { right: 10px; } } @media only screen and (max-width: 1024px){ .weddingStillsCarouselWrapper .stillsCarousel .categoryPageSlider { overflow: visible !important; max-width: 80%; left: 10%; } .weddingStillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide > .imageMap > .areas { height: calc(94% - 4px); top: 50%; width: calc(94% - 4px); left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} .weddingStillsCarouselWrapper .stillsCarousel .categoryPageSlider .slide > .imageMap .areas .imgHolder:nth-child(2) { border: none; border-radius: 3%; } } /*******************/ /* brands carousel */ /*******************/ /* Added at 16.04.21. */ /* Edited at 19.04.21. Added max width to bodycopy. */ /* Edited at 20.04.21. Replaced h3 by image. */ /* Edited at 25.05.21. Added brandLogo class. */ /* Edited at 04.06.21. Replaced logo. */ .brandsCarouselWrapper { background-color: #f2f2f2; } .brandsCarouselWrapper > .center { padding: 50px 20px 0 20px; } .brandsCarouselWrapper > .center > .imageMapWrapper { max-width: 300px; margin: 0 auto 25px; } .brandsCarouselWrapper > .center > .imageMapWrapper .imageMap {} .brandsCarouselWrapper > .center > .imageMapWrapper .imageMap .imgHolder { background-image: url('../icons/2021_HL06/Brands_WE_loves.svg'); padding-top: 7%; } .brandsCarouselWrapper > .center > p.bodycopy { max-width: 850px; margin-left: auto; margin-right: auto; } .brandsCarouselWrapper > .center > *:last-child { margin-bottom: 0; } .brandsCarouselWrapper .brandsCarousel { padding: 40px 0 50px; overflow: hidden; } .brandsCarouselWrapper .brandsCarousel .categoryPageSlider .slide > .imageMap > .areas:before { content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: 5px solid #fff; } .brandsCarouselWrapper .brandsCarousel .categoryPageSlider .slide { padding: 0 10px; white-space: normal; display: flex; flex-direction: column; } .brandsCarouselWrapper .brandsCarousel .categoryPageSlider .slide .heading { margin: 10px 0; } .brandsCarouselWrapper .brandsCarousel .categoryPageSlider .slide .bodycopy.ctas { margin: 0; } .brandsCarouselWrapper .brandsCarousel .categoryPageSlider .slide .imgHolder.brandLogo { top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); } @media only screen and (min-width: 1024px){ .brandsCarouselWrapper .brandsCarousel .cycle-nav-external-wrapper { padding: 0 48px; } .brandsCarouselWrapper .brandsCarousel .cycle-nav-external-wrapper .cycle-nav-external.inverse.cycle-prev { left: 10px; } .brandsCarouselWrapper .brandsCarousel .cycle-nav-external-wrapper .cycle-nav-external.inverse.cycle-next { right: 10px; } .brandsCarouselWrapper .brandsCarousel .cycle-nav-external-wrapper.wide { padding: 0 calc(10% + 48px); } .brandsCarouselWrapper .brandsCarousel .cycle-nav-external-wrapper.wide .cycle-nav-external.inverse.cycle-prev { left: calc(10% + 10px); } .brandsCarouselWrapper .brandsCarousel .cycle-nav-external-wrapper.wide .cycle-nav-external.inverse.cycle-next { right: calc(10% + 10px); } } @media only screen and (max-width: 1024px){ .brandsCarouselWrapper > .center > .imageMapWrapper { max-width: 200px; } .brandsCarouselWrapper .brandsCarousel .categoryPageSlider { overflow: visible !important; max-width: 60%; left: 20%; } /* .brandsCarouselWrapper .brandsCarousel .categoryPageSlider .imageMap.cycle-slide { padding-bottom: 51px; } .brandsCarouselWrapper .brandsCarousel .categoryPageSlider.cycle-slideshow .cycle-custom-pager { width: 100%; } */ } /********************/ /* product carousel */ /********************/ /* Added at 12.04.21. */ /* Edited at 13.04.21. Added styling for promotion stickers. */ /* Edited at 14.04.21. Added styling for product swatches. */ /* Edited at 15.04.21. Added relative positioning to wrapper for z-index of child elements. */ /* Edited at 08.09.21. Added product brand. */ /* Edited at 11.11.21. Removed change in opacity as this was causing a bug in the carousel height. */ /* Edited at 01.12.21. Updated typography. */ /* Edited at 02.01.23. Added class for specific styling single columned product carousel. */ .productCarouselWrapper { position: relative; z-index: 1; } .productCarouselWrapper .productCarousel { padding: 20px 0; } .productCarouselWrapper .productCarousel.initialized {} .productCarouselWrapper .productCarousel .categoryPageSlider {} .productCarouselWrapper .productCarousel .categoryPageSlider .slide { padding: 0 5px; white-space: normal; display: flex; flex-direction: column; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap { margin-bottom: 9px; overflow: hidden;} .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap [data-image] { opacity: 1; transition: all .3s ease-in-out; transition-delay: 0.3s; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap [data-image-hover] { opacity: 0; transition: all .3s ease-in-out; transition-delay: 0.3s; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap > .areas > div:nth-child(1), .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap > .areas > div:nth-child(2) { background: #fff url(../icons/2021_HL04/loader.gif) center center no-repeat; height: 100%; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap > .areas > div:nth-child(1) .imgHolder, .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap > .areas > div:nth-child(2) .imgHolder { position: absolute; top: 0; left: 0; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap .areas .product-swatches { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; background-color: rgba(255,255,255,0.85); padding: 5px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translatey(100%); transition: all .3s ease-in-out; transition-delay: 0.3s; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap .areas .product-swatches p.bodycopy { text-align: center; margin: 5px 0; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap .areas .promotion { position: absolute; bottom: 1.5em; left: 0; z-index: 2; width: auto; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap .areas .promotion.fluid { transition: all .3s ease-in-out; transition-delay: 0.3s; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap .areas .product-love { opacity: 0; z-index: 2; top: 10px; left: 10px; position: absolute; transition: all .3s ease-in-out; transition-delay: 0.3s; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap .areas .product-love a { opacity: 0; display: inline-block; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide.initialized > .imageMap .areas .product-love a { opacity: 1; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap .areas a .promotion div { position: relative; width: auto; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-info {} .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-info h4.product-brand { text-align: left; width: calc(100% - 10px); margin: 0 auto; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-info h3.product-name { color: #030406; width: calc(100% - 10px); margin: 0 auto; text-align: left; line-height: 1.4; text-transform: none; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-info h3.product-name a.name-link { color: #000; text-decoration: none; font-family: "Futura PT W01 Medium"; width: 100%; margin: 0 auto; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; display: block; letter-spacing: normal; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-type { font-family: "Futura PT W01 Medium"; color: #7f7f7f; font-size: 14px; line-height: 18px; width: calc(100% - 10px); margin: 0 auto; text-align: left; padding: 0; display: block; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-type span {} .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-pricing { text-align: left; width: calc(100% - 10px); margin: 0 auto; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-pricing .product-price { color: #000; display: inline-block; font-family: "Futura PT W01 Medium"; vertical-align: middle; font-size: 16px; font-weight: 600; letter-spacing: 1px; line-height: 21px; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-pricing .product-price .price-sales { display: inline-block; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide .placeholder { margin-top: 18px; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide .bodycopy.ctas { margin: 0; } @media only screen and (min-width: 1024px){ .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap:hover [data-image] { opacity: 0; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap:hover [data-image-hover] { opacity: 1; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap:hover .areas .product-swatches { opacity: 1; transform: translatey(0); } .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap:hover .areas .promotion.fluid { bottom: 46px; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap:hover .areas .product-love { opacity: 1; } .productCarouselWrapper .productCarousel .cycle-nav-external-wrapper { padding: 0 48px; } .productCarouselWrapper .productCarousel .cycle-nav-external-wrapper .cycle-nav-external.inverse.cycle-prev { left: 10px; } .productCarouselWrapper .productCarousel .cycle-nav-external-wrapper .cycle-nav-external.inverse.cycle-next { right: 10px; } } @media only screen and (max-width: 1024px){ .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap .areas .product-love { opacity: 1; } .productCarouselWrapper .productCarousel .cycle-nav-external-wrapper { padding: 0 10px; } .productCarouselWrapper .productCarousel .categoryPageSlider {} } /***************************/ /* product carousel tweaks */ /***************************/ /* Added at 25.05.21. */ /* Edited at 26.05.21. */ /* Edited at 06.07.21. Replaced logo. */ /* Edited at 12.07.21. Added bodycopy styling. */ /* Edited at 19.07.21. Updated styling. */ /* Edited at 03.07.23. Edited styling to fit replatforming. */ /* Edited at 04.07.23. Edited some styling. */ .brand-recommendations[js-category] { margin-bottom: 28px; padding: 4% 2% 4%; background-color: #f2f2f2; } .brand-recommendations[js-category] .brandsWELovesLogo.imageMapWrapper { max-width: 300px; margin: 0 auto 10px; } .brand-recommendations[js-category] .brandsWELovesLogo.imageMapWrapper .imageMap {} .brand-recommendations[js-category] .brandsWELovesLogo.imageMapWrapper .imageMap .imgHolder { background-image: url('../icons/2021_HL06/Brands_WE_loves.svg'); padding-top: 7%; } .brand-recommendations[js-category] p.bodycopy { text-align: center; } .brand-recommendations[js-category] p.bodycopy.uppercase { margin: 0 auto 40px; } .brand-recommendations[js-category] p.bodycopy.ctas { margin: 30px auto 0; } .brand-recommendations[js-category] .swiper-wrapper { height: auto; } .brand-recommendations[js-category] .product-carousel.container { margin-bottom: 0; } .brand-recommendations[js-category] .product-grid .product-tile .tile-image { background-color: #fff; } @media only screen and (min-width: 850px){ .brand-recommendations[js-category] .pdp-subtitles { display: none; } .brand-recommendations[js-category] .product-reco-nextbtn { margin-right: 10px; } .brand-recommendations[js-category] .product-reco-prevbtn { margin-left: 10px; } .brand-recommendations[js-category] .thumb-link { min-height: auto !important; background-color: #fff; } .brand-recommendations[js-category] .thumb-link:hover { min-height: auto !important; } } @media only screen and (max-width: 850px){ .brand-recommendations[js-category] { padding: 30px 0; } .brand-recommendations[js-category] .brandsWELovesLogo.imageMapWrapper { max-width: 200px; margin: 0 auto 30px; } .brand-recommendations[js-category] .product-reco-slide { width: 46%; } .brand-recommendations[js-category] .swiper-wrapper { padding-bottom: 30px; } } /*******************/ /* product collage */ /*******************/ /* Added at 30.06.21 */ /* Edited at 09.07.21. Added loader icon. */ .productCollageWrapper {} .productCollageWrapper .productCollage { position: relative; } .productCollageWrapper .productCollage .productThumbnailTile { position: absolute; background: #fff url(../icons/2021_HL04/loader.gif) center center no-repeat; } .productCollageWrapper .productCollage .productThumbnailTile.active {} .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail {} .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap { overflow: hidden; } .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap [data-image] { opacity: 1; transition: all .3s ease-in-out; } .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap [data-image-hover] { opacity: 0; transition: all .3s ease-in-out; } .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap .areas .imgHolder { position: absolute; top: 0; left: 0; } .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap .areas .product-swatches { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; background-color: rgba(255,255,255,0.85); padding: 5px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translatey(100%); transition: all .3s ease-in-out; transition-delay: 0.3s; } .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap .areas .product-swatches p.bodycopy { text-align: center; margin: 5px 0; } .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap .areas .promotion { position: absolute; bottom: 1.5em; left: 0; z-index: 2; width: auto; } .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap .areas .promotion.fluid { transition: all .3s ease-in-out; transition-delay: 0.3s; } .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap .areas .product-love { opacity: 1; z-index: 2; top: 10px; left: 10px; position: absolute; transition: all .3s ease-in-out; transition-delay: 0.3s; } .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap .areas .product-love a { opacity: 0; display: inline-block; } .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail.initialized > .imageMap .areas .product-love a { opacity: 1; } .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap .areas a .promotion div { position: relative; width: auto; } /* hide specific product details */ .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap .areas .product-swatches { display: none; } @media only screen and (min-width: 1024px){ .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap:hover [data-image] { opacity: 0; } .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap:hover [data-image-hover] { opacity: 1; } /* .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap:hover .areas .product-swatches { opacity: 1; transform: translatey(0); } .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap:hover .areas .promotion.fluid { bottom: 46px; } */ .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap:hover .areas .product-love { opacity: 1; } } @media only screen and (max-width: 1024px){ .productCollageWrapper .productCollage {} .productCollageWrapper .productCollage .productThumbnailTile .productThumbnail > .imageMap .areas .product-love { opacity: 1; } } /* variation A */ .productCollageWrapper.variationA .productCollage { padding-top: 80% } .productCollageWrapper.variationA .productCollage .productThumbnailTile { -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.1); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 2px 1px rgba(0,0,0,0.1); } .productCollageWrapper.variationA .productCollage .productThumbnailTile .productThumbnail { border: 5px solid #fff; } .productCollageWrapper.variationA .productCollage .productThumbnailTile:nth-child(1) { top: 21%; left: 2%; width: 15%; } .productCollageWrapper.variationA .productCollage .productThumbnailTile:nth-child(1) .productThumbnail {} .productCollageWrapper.variationA .productCollage .productThumbnailTile:nth-child(2) { top: 51%; left: 2%; width: 15%; } .productCollageWrapper.variationA .productCollage .productThumbnailTile:nth-child(2) .productThumbnail {} .productCollageWrapper.variationA .productCollage .productThumbnailTile:nth-child(3) { top: 11%; left: 19%; width: 41%; z-index: 1; } .productCollageWrapper.variationA .productCollage .productThumbnailTile:nth-child(3) .productThumbnail {} .productCollageWrapper.variationA .productCollage .productThumbnailTile:nth-child(4) { top: 3%; left: 62%; width: 15%; z-index: 1; } .productCollageWrapper.variationA .productCollage .productThumbnailTile:nth-child(4) .productThumbnail {} .productCollageWrapper.variationA .productCollage .productThumbnailTile:nth-child(5) { top: 3%; left: 79%; width: 15%; z-index: 1; } .productCollageWrapper.variationA .productCollage .productThumbnailTile:nth-child(5) .productThumbnail {} .productCollageWrapper.variationA .productCollage .productThumbnailTile:nth-child(6) { top: 33%; left: 62%; width: 25%; z-index: 1; } .productCollageWrapper.variationA .productCollage .productThumbnailTile:nth-child(6) .productThumbnail {} .productCollageWrapper.variationA .productCollage .productThumbnailTile:nth-child(7) { top: 60%; left: 79%; width: 15%; z-index: 3; } .productCollageWrapper.variationA .productCollage .productThumbnailTile:nth-child(7) .productThumbnail {} /*****************/ /* ugc highlight */ /*****************/ /* Added at 03.01.23. */ /* Edited at 04.07.23. Updated styling to fit replatforming. */ .ugcHighlight { display: none; margin-bottom: 25px; } .ugcHighlight.variationA .categoryPageGridTileWrapper.col-1-2 { order: 1; } .ugcHighlight.variationA .categoryPageGridTileWrapper.col-2-2 { order: 2; } .ugcHighlight.variationB .categoryPageGridTileWrapper.col-1-2 { order: 2; } .ugcHighlight.variationB .categoryPageGridTileWrapper.col-2-2 { order: 1; } .ugcHighlight .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; height: 100%; } .ugcHighlight .productCarouselWrapper { width: 100%; } .ugcHighlight .productCarouselWrapper .productCarousel { padding: 0; } .ugcHighlight .productCarouselWrapper .productCarousel .cycle-nav-external-wrapper { padding: 0; } .ugcHighlight .productCarouselWrapper .productCarousel .cycle-nav-external-wrapper .cycle-nav-external.inverse.cycle-prev { left: 0; } .ugcHighlight .productCarouselWrapper .productCarousel .cycle-nav-external-wrapper .cycle-nav-external.inverse.cycle-next { right: 0; } .ugcHighlight .productCarouselWrapper .productCarousel .categoryPageSlider .slide { max-width: 50%; margin: 0 25%; padding: 0 15px; } .ugcHighlight .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap .areas .product-swatches {} .ugcHighlight .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-info { width: calc(100% - 10px); margin: 0 auto; } .ugcHighlight .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-info .product-brand { margin: 0 0 6px; line-height: 1; } .ugcHighlight .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-info .product-name { margin: 0 0 6px; } .ugcHighlight .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-type { display: none; } .ugcHighlight .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-pricing {} @media only screen and (max-width : 850px){ .ugcHighlight .productCarouselWrapper .productCarousel .categoryPageSlider .slide { max-width: calc(100% - 20px); margin: 0 10px; padding: 0 5px; } .ugcHighlight .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap { max-width: 75%; } } /**************/ /* pride icon */ /**************/ /* Added at 25.05.23. */ .prideLoveIconWrapper { display: none; } .prideLoveIconWrapper .prideLoveIcon { display: inline-block; width: 26px; height: 24px; background-image: url('../Category pages/_general/2023_C2/icon-heart-pride.svg'); background-repeat: no-repeat; } .anchor-add-to-wishlist.active .prideLoveIconWrapper { display: inline-block; } .anchor-add-to-wishlist.active .prideLoveIconWrapper + svg.icon { display: none; } /* .js-wishlist-items.active .prideLoveIconWrapper { display: inline-block; } .js-wishlist-items.active .prideLoveIconWrapper + svg.icon { display: none; } */ @media only screen and (max-width : 850px){ .anchor-add-to-wishlist .prideLoveIconWrapper .prideLoveIcon { width: 18px; height: 16px; } } /***********************/ /* navigation carousel */ /***********************/ /* Added at 15.06.23. */ /* Edited at 16.06.23. Added pager styling. */ .navigationCarouselWrapper {} .navigationCarouselWrapper .navigationCarousel { overflow: hidden; } .navigationCarouselWrapper .navigationCarousel .cycle-slideshow .cycle-nav { top: calc(50% - 78px); background-color: #fff; } .navigationCarouselWrapper .navigationCarousel .cycle-external-pager { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; } .navigationCarouselWrapper .navigationCarousel .cycle-external-pager .page-indicator-wrapper { cursor: pointer; width: 100%; } .navigationCarouselWrapper .navigationCarousel .cycle-external-pager .page-indicator-wrapper .page-indicator { width: 100%; background-color: #efefef; padding-top: 5px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .navigationCarouselWrapper .navigationCarousel .cycle-external-pager .page-indicator-wrapper.cycle-pager-active .page-indicator { background-color: #094496; } .navigationCarouselWrapper .navigationCarousel .cycle-slide-indicator { display: flex; flex-direction: row; width: 100%; justify-content: center; margin: 5px 0; } @media only screen and (max-width: 1024px){ .navigationCarouselWrapper .navigationCarousel .cycle-nav-external-wrapper { padding: 0; } .navigationCarouselWrapper .navigationCarousel .cycle-nav-external-wrapper .cycle-nav-external { top: calc(50% - 78px); background-color: #fff; opacity: 1.0; } .navigationCarouselWrapper .navigationCarousel .cycle-external-pager .page-indicator-wrapper .page-indicator { padding-top: 5px; } .navigationCarouselWrapper .navigationCarousel .categoryPageSlider { overflow: visible !important; max-width: 80%; } } /************************************************************************* 07.0 Product detail page *************************************************************************/ /********/ /* USPs */ /********/ /* Added at 22.01.18. */ /* Edited at 16.07.18. */ /* Edited at 12.09.19. Adjusted styling to meet the same setup as PLP USPs. */ /* Edited at 15.10.19. Adjusted colour for hyperlinks. */ /* Edited at 02.06.20. Removed text style bold. */ /* Edited at 05.06.20. Styled b. */ /* Edited at 18.06.20. Removed tick icon. */ /* Edited at 28.12.20. Added styling to display new tick icon. */ /* Edited at 31.12.20. Updated styling for mobile. */ /* Edited at 01.07.21. Updated margin of usps. */ /* Edited at 09.11.21. Updated USPs with start/end date spans. */ /* Edited at 29.06.22. Removed letterspacing. */ /* Edited at 08.02.23. Updated margin. */ .html-asset-container .pdpUspsWrapper { margin: 10px 0; } .pdpUspsWrapper { background-color: #f2f2f2; } .pdpUspsWrapper .pdpUsps { padding: 20px; } .pdpUspsWrapper .pdpUsps ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: flex-start; flex-direction: column; } .pdpUspsWrapper .pdpUsps ul li { display: block; position: relative; font-size: 15px; letter-spacing: 0; margin: 10px 0 10px 0; text-align: left; position: relative; z-index: 1; } .pdpUspsWrapper .pdpUsps ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) { position: relative; width: 24px; height: 17px; display: inline-block; margin-right: 5px; } .pdpUspsWrapper .pdpUsps ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) .globalIcon { position: absolute; top: 0; left: 0; } .pdpUspsWrapper .pdpUsps ul li b { font-family: 'Futura PT W01 Medium', arial, sans-serif; font-weight: 900; } .pdpUspsWrapper .pdpUsps ul li:first-child { margin-top: 0; } .pdpUspsWrapper .pdpUsps ul li:last-child { margin-bottom: 0; } .pdpUspsWrapper .pdpUsps ul li a { color: #000; } @media only screen and (max-width : 850px){ .pdpUspsWrapper .pdpUsps ul { margin-left: 34px; } .pdpUspsWrapper .pdpUsps ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) { position: absolute; left: -34px; height: 20px; } .pdpUspsWrapper .pdpUsps ul li > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) .globalIcon { top: inherit; bottom: 0; } } /****************/ /* external usp */ /****************/ /* Added at 15.04.21. */ .html-asset-container .pdpExternalBrandUspWrapper { margin-top: 20px; margin-bottom: -10px; } .pdpExternalBrandUspWrapper { background-color: #f2f2f2; } .pdpExternalBrandUspWrapper .pdpExternalBrandUsp { padding: 15px 20px; } .pdpExternalBrandUspWrapper .pdpExternalBrandUsp p.bodycopy { text-align: center; margin: 0; } /****************/ /* stretch link */ /****************/ /* Added at 27.01.20. */ /* Edited at 28.01.20. */ .pdp-stretch-link { margin-left: 5px; text-decoration: none; } .pdp-stretch-link:before { content: '?'; display: inline-block; width: 20px; margin-right: 5px; border: 1px solid #fff; border-radius: 10px; background-color: #EC853E; color: #fff; text-align: center; -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.1); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 2px 1px rgba(0,0,0,0.1); font-size: 17px; background-image: none; } .pdp-stretch-link:hover:before { background-color: #FF690C; } @media only screen and (max-width : 850px){ .pdp-stretch-link:before { height: auto; } } .stretches { padding: 30px 0; } .stretches .stretch {} .stretches .stretch .copy {} .stretches .stretch .copy p.bodycopy { text-align: center; } .stretches .stretch .progressRingWrapper { width: 100%; max-width: 150px; margin: 0 auto; } @media only screen and (max-width : 850px){ .stretches .stretch { display: flex; flex-direction: row; align-items: center; } .stretches .stretch .copy { width: calc(50% - 5px); margin-right: 5px; } .stretches .stretch .copy p.bodycopy { text-align: left; } .stretches .stretch .progressRingWrapper { width: calc(50% - 5px); margin-left: 5px; max-width: 100%; } .stretches .hr.general { margin: 20px 0; } } /* hotfix, only needed for this workaround */ .product-size-chart { display: flex; } /****************/ /* lengths link */ /****************/ /* Added at 27.01.20. */ /* Edited at 28.01.20. */ .pdp-lengths-link { margin-left: 5px; text-decoration: none; } .pdp-lengths-link:before { content: '?'; display: inline-block; width: 20px; margin-right: 5px; border: 1px solid #fff; border-radius: 10px; background-color: #EC853E; color: #fff; text-align: center; -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.1); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 2px 1px rgba(0,0,0,0.1); font-size: 17px; background-image: none; } .pdp-lengths-link:hover:before { background-color: #FF690C; } .product-set-item .pdp-lengths-link { display: block; margin: 8px 0 0 0; text-align: right; } @media only screen and (max-width : 850px){ .pdp-lengths-link:before { height: auto; } } /***************/ /* pdp message */ /***************/ /* Added at 29.01.20. */ .pdpMessageWrapper { padding: 15px; background-color: #F4BD2D; margin-top: 1.5em; margin-bottom: 20px; overflow: hidden; height: 0; } .pdpMessageWrapper .pdpMessage {} .pdpMessageWrapper .pdpMessage p.bodycopy { margin: 0; } @media only screen and (max-width: 851px) { .pdpMessageWrapper { margin-top: 0; margin-bottom: 25px; } } /********************/ /* variant selector */ /********************/ /* Added at 03.02.20. */ /* Edited at 25.03.20. Renamed from 'fitSelector' to 'variantSelector'. */ /* Edited at 15.01.21. Fixed layout in sidepanel. */ /* Edited at 22.02.21. Added margin on top of images wrapper. */ /* Edited at 12.10.21. Added loader icon to images. */ /* Edited at 21.03.22. Added 'flex' to variantSelectors wrapper. */ /* Edited at 01.11.22. Updated styling for replatforming. */ .products[data-products-wrapper] { display: none; } .variantSelectorButtonsWrapper { order: 2; } .variantSelectorButtonsWrapper .variantSelectors { display: flex; flex-wrap: wrap; } .variantSelectorButtonsWrapper .variantSelectors a.variantSelectorButton { display: block; margin: 0 0.5em 0 0; background-color: #ededed; padding: 9px 15px; text-decoration: none; color: #000; border-radius: 2px; } .variantSelectorButtonsWrapper .variantSelectors a.variantSelectorButton.active { background-color: #000; color: #fff; } .variantSelectorImagesWrapper {} .variantSelectorImagesWrapper .variantSelectors { display: flex; flex-wrap: wrap; } .variantSelectorImagesWrapper .variantSelectors a.variantSelectorImage { display: block; width: 58px; height: 92px; position: relative; border-bottom: 2px solid transparent; margin-right: 0.5em; margin-bottom: 0.5em; background: url(../icons/2021_HL04/loader.gif) center center no-repeat; } .variantSelectorImagesWrapper .variantSelectors a.variantSelectorImage.active { border-bottom: 2px solid #000; } .variantSelectorImagesWrapper .variantSelectors a.variantSelectorImage img { position: absolute; top: 0; left: 0; width: 100%; } @media only screen and (min-width: 850px) { .variantSelectorButtonsWrapper .variantSelectors a.variantSelectorButton:hover { background-color: #000; color: #fff; } } @media only screen and (max-width: 850px) { .variantSelectorButtonsWrapper { margin: 1.0em 0; } .variantSelectorButtonsWrapper .variantSelectors { margin-top: 0.5em; } .variantSelectorImagesWrapper { margin: 1.0em 0; } .variantSelectorImagesWrapper .variantSelectors { margin-top: 0.5em; } .pdp-quick-overlay .variant-attribute.variantSelectorImagesWrapper:first-child { width: 100%; margin-right: 0; } } /*******************/ /* additional info */ /*******************/ /* Added at 01.04.20. */ /* Edited at 02.04.20. Added caption. */ .pdpAdditionalInfo { margin-top: 2em; } .pdpAdditionalInfo h3 { text-transform: uppercase; font-family: "Futura PT W01 Heavy"; margin: .5em 0; font-size: 1rem; } .pdpAdditionalInfo h3 .icon { margin-left: 3px; width: 16px; height: 21px; overflow: hidden; border-top: none !important; display: inline-block; -webkit-transform: translatey(2px); transform: translatey(2px); } .pdpAdditionalInfo h3 .caption { display: block; font-family: "Futura PT W01 Heavy"; font-size: 1rem; color: #B3B3B3; } .pdpAdditionalInfo p { font-size: 0.75rem; line-height: 1.6; } @media only screen and (min-width: 851px) { .pdpAdditionalInfo h3 { text-transform: none; margin-bottom: 1.25em; font-size: 1.25rem; } .pdpAdditionalInfo h3 .caption {} .pdpAdditionalInfo p { font-size: 1rem; } } @media only screen and (max-width : 850px){ .pdpAdditionalInfo h3 .icon { width: 16px; height: 20px; } } /*************************/ /* product specific usps */ /*************************/ /* Added at 26.07.22. */ /* Edited at 22.08.22. Added new IDs. */ /* Edited at 19.09.22. Added skinny fit for girls. */ /* Edited at 08.02.23. Updated background size of overlay. */ /* Edited at 09.03.23. Added men. Added medium stretch. Background image not provided yet. */ /* Edited at 07.04.23. Enabled medium stretch. */ .pdp-usps-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .pdp-usps-wrapper .pdp-usps { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; } /* men */ .pdp-usps-wrapper.pdp-usps-m-regular-comfort-stretch.lang-nl .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-regular-comfort-stretch_NL.svg'); } .pdp-usps-wrapper.pdp-usps-m-regular-comfort-stretch.lang-fr .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-regular-comfort-stretch_FR.svg'); } .pdp-usps-wrapper.pdp-usps-m-regular-comfort-stretch.lang-de .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-regular-comfort-stretch_DE.svg'); } .pdp-usps-wrapper.pdp-usps-m-regular-comfort-stretch-recycle.lang-nl .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-regular-comfort-stretch-recycle_NL.svg'); } .pdp-usps-wrapper.pdp-usps-m-regular-comfort-stretch-recycle.lang-fr .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-regular-comfort-stretch-recycle_FR.svg'); } .pdp-usps-wrapper.pdp-usps-m-regular-comfort-stretch-recycle.lang-de .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-regular-comfort-stretch-recycle_DE.svg'); } .pdp-usps-wrapper.pdp-usps-m-regular-jog-denim.lang-nl .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-regular-jog-denim_NL.svg'); } .pdp-usps-wrapper.pdp-usps-m-regular-jog-denim.lang-fr .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-regular-jog-denim_FR.svg'); } .pdp-usps-wrapper.pdp-usps-m-regular-jog-denim.lang-de .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-regular-jog-denim_DE.svg'); } .pdp-usps-wrapper.pdp-usps-m-regular-medium-stretch.lang-nl .pdp-usps { background-image: url('../Category pages/_men/2023_C1C_JEANS/pdp-usps-m-regular-medium-stretch_NL.svg'); } .pdp-usps-wrapper.pdp-usps-m-regular-medium-stretch.lang-fr .pdp-usps { background-image: url('../Category pages/_men/2023_C1C_JEANS/pdp-usps-m-regular-medium-stretch_FR.svg'); } .pdp-usps-wrapper.pdp-usps-m-regular-medium-stretch.lang-de .pdp-usps { background-image: url('../Category pages/_men/2023_C1C_JEANS/pdp-usps-m-regular-medium-stretch_DE.svg'); } .pdp-usps-wrapper.pdp-usps-m-skinny-comfort-stretch.lang-nl .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-skinny-comfort-stretch_NL.svg'); } .pdp-usps-wrapper.pdp-usps-m-skinny-comfort-stretch.lang-fr .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-skinny-comfort-stretch_FR.svg'); } .pdp-usps-wrapper.pdp-usps-m-skinny-comfort-stretch.lang-de .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-skinny-comfort-stretch_DE.svg'); } .pdp-usps-wrapper.pdp-usps-m-skinny-jog-denim.lang-nl .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-skinny-jog-denim_NL.svg'); } .pdp-usps-wrapper.pdp-usps-m-skinny-jog-denim.lang-fr .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-skinny-jog-denim_FR.svg'); } .pdp-usps-wrapper.pdp-usps-m-skinny-jog-denim.lang-de .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-skinny-jog-denim_DE.svg'); } .pdp-usps-wrapper.pdp-usps-m-skinny-super-stretch.lang-nl .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-skinny-superstretch_NL.svg'); } .pdp-usps-wrapper.pdp-usps-m-skinny-super-stretch.lang-fr .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-skinny-superstretch_FR.svg'); } .pdp-usps-wrapper.pdp-usps-m-skinny-super-stretch.lang-de .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-skinny-superstretch_DE.svg'); } .pdp-usps-wrapper.pdp-usps-m-skinny-medium-stretch.lang-nl .pdp-usps { background-image: url('../Category pages/_men/2023_C1C_JEANS/pdp-usps-m-skinny-medium-stretch_NL.svg'); } .pdp-usps-wrapper.pdp-usps-m-skinny-medium-stretch.lang-fr .pdp-usps { background-image: url('../Category pages/_men/2023_C1C_JEANS/pdp-usps-m-skinny-medium-stretch_FR.svg'); } .pdp-usps-wrapper.pdp-usps-m-skinny-medium-stretch.lang-de .pdp-usps { background-image: url('../Category pages/_men/2023_C1C_JEANS/pdp-usps-m-skinny-medium-stretch_DE.svg'); } .pdp-usps-wrapper.pdp-usps-m-slim-comfort-stretch.lang-nl .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-slim-comfort-stretch_NL.svg'); } .pdp-usps-wrapper.pdp-usps-m-slim-comfort-stretch.lang-fr .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-slim-comfort-stretch_FR.svg'); } .pdp-usps-wrapper.pdp-usps-m-slim-comfort-stretch.lang-de .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-slim-comfort-stretch_DE.svg'); } .pdp-usps-wrapper.pdp-usps-m-slim-comfort-stretch-recycle.lang-nl .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-slim-comfort-stretch-recycle_NL.svg'); } .pdp-usps-wrapper.pdp-usps-m-slim-comfort-stretch-recycle.lang-fr .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-slim-comfort-stretch-recycle_FR.svg'); } .pdp-usps-wrapper.pdp-usps-m-slim-comfort-stretch-recycle.lang-de .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-slim-comfort-stretch-recycle_DE.svg'); } .pdp-usps-wrapper.pdp-usps-m-slim-jog-denim.lang-nl .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-slim-jog-denim_NL.svg'); } .pdp-usps-wrapper.pdp-usps-m-slim-jog-denim.lang-fr .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-slim-jog-denim_FR.svg'); } .pdp-usps-wrapper.pdp-usps-m-slim-jog-denim.lang-de .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-slim-jog-denim_DE.svg'); } .pdp-usps-wrapper.pdp-usps-m-slim-super-stretch.lang-nl .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-slim-superstretch_NL.svg'); } .pdp-usps-wrapper.pdp-usps-m-slim-super-stretch.lang-fr .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-slim-superstretch_FR.svg'); } .pdp-usps-wrapper.pdp-usps-m-slim-super-stretch.lang-de .pdp-usps { background-image: url('../Category pages/_men/2022_C3A_JEANS/pdp-usps-m-slim-superstretch_DE.svg'); } .pdp-usps-wrapper.pdp-usps-m-slim-medium-stretch.lang-nl .pdp-usps { background-image: url('../Category pages/_men/2023_C1C_JEANS/pdp-usps-m-slim-medium-stretch_NL.svg'); } .pdp-usps-wrapper.pdp-usps-m-slim-medium-stretch.lang-fr .pdp-usps { background-image: url('../Category pages/_men/2023_C1C_JEANS/pdp-usps-m-slim-medium-stretch_FR.svg'); } .pdp-usps-wrapper.pdp-usps-m-slim-medium-stretch.lang-de .pdp-usps { background-image: url('../Category pages/_men/2023_C1C_JEANS/pdp-usps-m-slim-medium-stretch_DE.svg'); } /* boys */ .pdp-usps-wrapper.pdp-usps-b-regular-stretch.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-regular-stretch_NL.svg'); } .pdp-usps-wrapper.pdp-usps-b-regular-stretch.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-regular-stretch_FR.svg'); } .pdp-usps-wrapper.pdp-usps-b-regular-stretch.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-regular-stretch_DE.svg'); } .pdp-usps-wrapper.pdp-usps-b-regular-jog-denim.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-regular-jog-denim_NL.svg'); } .pdp-usps-wrapper.pdp-usps-b-regular-jog-denim.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-regular-jog-denim_FR.svg'); } .pdp-usps-wrapper.pdp-usps-b-regular-jog-denim.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-regular-jog-denim_DE.svg'); } .pdp-usps-wrapper.pdp-usps-b-skinny-stretch.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-skinny-stretch_NL.svg'); } .pdp-usps-wrapper.pdp-usps-b-skinny-stretch.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-skinny-stretch_FR.svg'); } .pdp-usps-wrapper.pdp-usps-b-skinny-stretch.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-skinny-stretch_DE.svg'); } .pdp-usps-wrapper.pdp-usps-b-skinny-jog-denim.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-skinny-jog-denim_NL.svg'); } .pdp-usps-wrapper.pdp-usps-b-skinny-jog-denim.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-skinny-jog-denim_FR.svg'); } .pdp-usps-wrapper.pdp-usps-b-skinny-jog-denim.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-skinny-jog-denim_DE.svg'); } .pdp-usps-wrapper.pdp-usps-b-slim-stretch.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-slim-stretch_NL.svg'); } .pdp-usps-wrapper.pdp-usps-b-slim-stretch.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-slim-stretch_FR.svg'); } .pdp-usps-wrapper.pdp-usps-b-slim-stretch.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-slim-stretch_DE.svg'); } .pdp-usps-wrapper.pdp-usps-b-slim-jog-denim.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-slim-jog-denim_NL.svg'); } .pdp-usps-wrapper.pdp-usps-b-slim-jog-denim.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-slim-jog-denim_FR.svg'); } .pdp-usps-wrapper.pdp-usps-b-slim-jog-denim.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-slim-jog-denim_DE.svg'); } .pdp-usps-wrapper.pdp-usps-b-super-skinny-stretch.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-super-skinny-stretch_NL.svg'); } .pdp-usps-wrapper.pdp-usps-b-super-skinny-stretch.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-super-skinny-stretch_FR.svg'); } .pdp-usps-wrapper.pdp-usps-b-super-skinny-stretch.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-super-skinny-stretch_DE.svg'); } .pdp-usps-wrapper.pdp-usps-b-super-skinny-jog-denim.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-super-skinny-jog-denim_NL.svg'); } .pdp-usps-wrapper.pdp-usps-b-super-skinny-jog-denim.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-super-skinny-jog-denim_FR.svg'); } .pdp-usps-wrapper.pdp-usps-b-super-skinny-jog-denim.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-b-super-skinny-jog-denim_DE.svg'); } /* girls */ .pdp-usps-wrapper.pdp-usps-g-flare.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-flare_NL.svg'); } .pdp-usps-wrapper.pdp-usps-g-flare.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-flare_FR.svg'); } .pdp-usps-wrapper.pdp-usps-g-flare.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-flare_DE.svg'); } .pdp-usps-wrapper.pdp-usps-g-flare-corduroy.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-flare-corduroy_NL.svg'); } .pdp-usps-wrapper.pdp-usps-g-flare-corduroy.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-flare-corduroy_FR.svg'); } .pdp-usps-wrapper.pdp-usps-g-flare-corduroy.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-flare-corduroy_DE.svg'); } .pdp-usps-wrapper.pdp-usps-g-skinny.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-skinny_NL.svg'); } .pdp-usps-wrapper.pdp-usps-g-skinny.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-skinny_FR.svg'); } .pdp-usps-wrapper.pdp-usps-g-skinny.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-skinny_DE.svg'); } .pdp-usps-wrapper.pdp-usps-g-straight.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-straight_NL.svg'); } .pdp-usps-wrapper.pdp-usps-g-straight.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-straight_FR.svg'); } .pdp-usps-wrapper.pdp-usps-g-straight.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-straight_DE.svg'); } .pdp-usps-wrapper.pdp-usps-g-mom-stretch.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-mom-stretch_NL.svg'); } .pdp-usps-wrapper.pdp-usps-g-mom-stretch.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-mom-stretch_FR.svg'); } .pdp-usps-wrapper.pdp-usps-g-mom-stretch.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-mom-stretch_DE.svg'); } .pdp-usps-wrapper.pdp-usps-g-paperbag.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-paperbag_NL.svg'); } .pdp-usps-wrapper.pdp-usps-g-paperbag.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-paperbag_FR.svg'); } .pdp-usps-wrapper.pdp-usps-g-paperbag.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-paperbag_DE.svg'); } .pdp-usps-wrapper.pdp-usps-g-wide-leg.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-wide-leg_NL.svg'); } .pdp-usps-wrapper.pdp-usps-g-wide-leg.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-wide-leg_FR.svg'); } .pdp-usps-wrapper.pdp-usps-g-wide-leg.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-wide-leg_DE.svg'); } .pdp-usps-wrapper.pdp-usps-g-jegging-stretch.lang-nl .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-jegging-stretch_NL.svg'); } .pdp-usps-wrapper.pdp-usps-g-jegging-stretch.lang-fr .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-jegging-stretch_FR.svg'); } .pdp-usps-wrapper.pdp-usps-g-jegging-stretch.lang-de .pdp-usps { background-image: url('../Category pages/_kids/2022_C3A_JEANS/pdp-usps-g-jegging-stretch_DE.svg'); } /*********************/ /* size notification */ /*********************/ /* Added at 14.07.23. */ .sizeNotificationWrapper { position: relative; width: 100%; } .sizeNotificationWrapper .sizeNotification { position: absolute; width: 100%; height: 0; bottom: 5px; left: 0; overflow: hidden; z-index: 2; -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.1); -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.1); box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.1); } .sticky-mobile .sizeNotificationWrapper .sizeNotification { bottom: 20px; } .sizeNotificationWrapper .sizeNotification .sizeNotificationContent { position: relative; padding: 8px 40px 8px 15px; background-color: rgba(255,255,255,0.95); } .sizeNotificationWrapper .sizeNotification .sizeNotificationContent p.bodycopy { margin: 0; } .sizeNotificationWrapper .sizeNotification .sizeNotificationContent .close { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; cursor: pointer; z-index: 3; } .sizeNotificationWrapper .sizeNotification .sizeNotificationContent .close:before, .sizeNotificationWrapper .sizeNotification .sizeNotificationContent .close:after { content: ""; display: block; width: 17px; height: 2px; background-color: #000; } .sizeNotificationWrapper.inverse .sizeNotification .sizeNotificationContent .close:before, .sizeNotificationWrapper.inverse .sizeNotification .sizeNotificationContent .close:after { content: ""; display: block; width: 17px; height: 2px; background-color: #fff; } .sizeNotificationWrapper .sizeNotification .sizeNotificationContent .close:before { -ms-transform: translate(6px, 13px) rotate(-45deg); -webkit-transform: translate(6px, 13px) rotate(-45deg); transform: translate(6px, 13px) rotate(-45deg); } .sizeNotificationWrapper .sizeNotification .sizeNotificationContent .close:after { -ms-transform: translate(6px, 11px) rotate(45deg); -webkit-transform: translate(6px, 11px) rotate(45deg); transform: translate(6px, 11px) rotate(45deg); } @media only screen and (max-width : 850px){ } /************************************************************************* 08.0 System pages *************************************************************************/ /************************************************************************* 08.1 Account */ /******************************/ /* register confirmation page */ /******************************/ /* Added at 09.07.19. Updated Facebook button and styling. */ /* Edited at 06.01.20. Updated and removed Facebook button styling. */ .registerConfirmationPage {} .registerConfirmationPage .staticPageBanner.full { margin: 10px auto 0; padding: 0; } .registerConfirmationPage .staticPageBanner.full .imageMap[data-desktop-visible] .smFacebookWrapper { z-index: 2; } .registerConfirmationPage .staticPageBanner.full .imageMap[data-desktop-visible] .smFacebookWrapper .smFacebook {} .registerConfirmationPage .staticPageBanner.full .imageMap[data-mobile-visible] .smFacebookWrapper { z-index: 2; } .registerConfirmationPage .staticPageBanner.full .imageMap[data-mobile-visible] .smFacebookWrapper .smFacebook {} /********************************/ /* activation confirmation page */ /********************************/ /* Added at 09.07.19. Updated Facebook button and styling. */ /* Edited at 06.01.20. Updated and removed Facebook button styling. */ .activationConfirmationPage {} .activationConfirmationPage .staticPageBanner.full { margin: 10px auto 0; padding: 0; } .activationConfirmationPage .staticPageBanner.full .imageMap[data-desktop-visible] .smFacebookWrapper { z-index: 2; } .activationConfirmationPage .staticPageBanner.full .imageMap[data-desktop-visible] .smFacebookWrapper .smFacebook {} .activationConfirmationPage .staticPageBanner.full .imageMap[data-mobile-visible] .smFacebookWrapper { z-index: 2; } .activationConfirmationPage .staticPageBanner.full .imageMap[data-mobile-visible] .smFacebookWrapper .smFacebook {} /**************/ /* navigation */ /**************/ /* Added at 16.08.19. Disabled to be reviewed first. */ /* Edited at 09.06.21. Added padding on mobile. */ .myAccountNavigationWrapper {} .myAccountNavigationWrapper .myAccountNavigation { padding-bottom: 30px; } .myAccountNavigationWrapper .myAccountNavigation ul { margin: 0; padding: 0; list-style: none; } .myAccountNavigationWrapper .myAccountNavigation ul li { height: 27px; } .myAccountNavigationWrapper .myAccountNavigation ul li a { display: block; padding: 5px 0 5px 0; text-decoration: none; color: #000; } .myAccountNavigationWrapper .myAccountNavigation .hr { width: 100%; height: 1px; background-color: #dedede; margin: 20px 0; } .myAccountNavigationWrapper .myAccountNavigation .hSpace { margin-top: 30px; } .myAccountNavigationWrapper .myAccountNavigation .imageMapWrapper { max-width: 145px; margin-bottom: 30px; } @media only screen and (min-width : 850px){ .myAccountNavigationWrapper .myAccountNavigation ul li a:hover { color: #999; } } @media only screen and (max-width : 850px){ .myAccountNavigationWrapper { padding: 0 15px; } } /*************/ /* dashboard */ /*************/ /* Edited at 16.08.19. Renewed styling. Disabled new styling to be reviewed first. */ /* Edited at 19.08.19. Enabled new styling. Removed old styling. */ /* Edited at 16.01.20. Updated margin. */ /* Edited at 29.07.20. Replaced icons. */ .myAccountDashboardBanner { position: relative; z-index: 1; margin: 20px auto; } .myAccountDashboardWrapper {} .myAccountDashboardWrapper .myAccountDashboard {} .myAccountDashboardWrapper .myAccountDashboard .sections { display: flex; flex-direction: row; flex-wrap: wrap; } .myAccountDashboardWrapper .myAccountDashboard .sections .section { width: calc(50% - 5px); } .myAccountDashboardWrapper .myAccountDashboard .sections .section:nth-child(1) { margin: 0 5px 5px 0; } .myAccountDashboardWrapper .myAccountDashboard .sections .section:nth-child(2) { margin: 0 0 5px 5px; } .myAccountDashboardWrapper .myAccountDashboard .sections .section:nth-child(3) { margin: 5px 5px 0 0; } .myAccountDashboardWrapper .myAccountDashboard .sections .section:nth-child(4) { margin: 5px 0 0 5px; } .myAccountDashboardWrapper .myAccountDashboard .sections .section .content { background-color: #f2f2f2; border-bottom: 1px solid #dedede; } .myAccountDashboardWrapper .myAccountDashboard .sections .section .content > a { text-decoration: none; line-height: inherit; } .myAccountDashboardWrapper .myAccountDashboard .sections .section .content .sectionHeader { padding: 20px 0; position: relative; z-index: 1; } .myAccountDashboardWrapper .myAccountDashboard .sections .section .content .sectionHeader p.bodycopy { text-align: center; margin: 10px auto 0; } .page-account .top-container { border-bottom: 1px solid #dedede; margin-bottom: 30px; } .page-account .pt_account .container { display: flex; flex-direction: row; } .page-account .pt_account #primary { width: calc(100% - 260px); margin-left: 15px; float: none; order: 1; padding: 10px 0 20px 0; } .page-account .pt_account #primary h1 { display: block; } .page-account .pt_account #primary h1 .logout-button { float: right; } .page-account .pt_account #secondary { width: 260px; margin-right: 15px; float: none; } @media only screen and (min-width : 850px){ .myAccountDashboardBanner { margin-bottom: 10px auto; } } @media only screen and (max-width : 850px){ .myAccountDashboardWrapper .myAccountDashboard .sections { flex-direction: column; } .myAccountDashboardWrapper .myAccountDashboard .sections .section { width: 100%; } .myAccountDashboardWrapper .myAccountDashboard .sections .section:nth-child(1) { margin: 0 0 5px 0; } .myAccountDashboardWrapper .myAccountDashboard .sections .section:nth-child(2) { margin: 5px 0 5px 0; } .myAccountDashboardWrapper .myAccountDashboard .sections .section:nth-child(3) { margin: 5px 0 5px 0; } .myAccountDashboardWrapper .myAccountDashboard .sections .section:nth-child(4) { margin: 5px 0 0 0; } .page-account .pt_account .container { flex-direction: column; } .page-account .pt_account #primary { width: 100%; margin-left: 0; order: 0; } .page-account .pt_account #secondary { width: 100%; margin-right: 0; } } /***********************/ /* we is me membercard */ /***********************/ /* Added at 06.02.23. */ /* Edited at 09.02.23. Added loader icon to qr. */ .weismeMembercardWrapper { display: none; margin-bottom: 30px; } .page-account-register .weismeMembercardWrapper { margin: 10px; } .weismeMembercardWrapper .weismeMembercard {} .weismeMembercardWrapper .weismeMembercard .content { display: flex; flex-direction: column; align-items: center; background-color: #000; border-radius: 4%; padding: 15px; position: relative; z-index: 1; } .weismeMembercardWrapper .weismeMembercard .content p.heading { margin-bottom: 15px; } .weismeMembercardWrapper .weismeMembercard .content .imageMap { background: url(../icons/2021_HL04/loader.gif) center center no-repeat #fff; padding: 10px; max-width: 150px; } @media only screen and (max-width : 850px){ .weismeMembercardWrapper { display: block; } } /************************************************************************* 08.2 Cart */ /***********/ /* general */ /***********/ .page-cart {} .cartPageBanner { position: relative; z-index: 1; } /********/ /* USPs */ /********/ /* Edited at 28.02.18. */ /* Edited at 05.08.19. Converted to flexbox styling. */ /* Edited at 26.03.20. Adjusted alignment of text. Added specific styling for NL. */ /* Edited at 18.06.20. Adjusted alignment of 4th usp on desktop and removed tick icon. */ /* Edited at 03.09.20. Added styling for separate mobile variant. */ /* Edited at 17.11.20. Updated desktop styling. */ /* Edited at 09.11.21. Updated USPs with start/end date spans. */ /* Edited at 29.06.22. Removed letterspacing. */ /* Edited at 24.02.22. Updated margin of paragraph. */ .page-cart .cartUspsWrapper[data-desktop-visible] { width: 100%; } .page-cart .cartUspsWrapper[data-desktop-visible] .cartUsps { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .page-cart .cartUspsWrapper[data-desktop-visible] .cartUsps .cartUsp { margin: 0 15px; position: relative; z-index: 1; } .page-cart .cartUspsWrapper[data-desktop-visible] .cartUsps .cartUsp:first-child { margin-left: 0; } .page-cart .cartUspsWrapper[data-desktop-visible] .cartUsps .cartUsp:last-child { margin-right: 0; } .page-cart .cartUspsWrapper[data-desktop-visible] .cartUsps .cartUsp .thuiswinkelWaarborgWrapper { max-width: 80px; } .page-cart .cartUspsWrapper[data-desktop-visible] .cartUsps .cartUsp p { letter-spacing: 0; margin-bottom: 0; } .page-cart .cartUspsWrapper[data-desktop-visible] .cartUsps .cartUsp p > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) { display: inline-block; width: 24px; height: 17px; position: relative; margin-right: 5px; } .page-cart .cartUspsWrapper[data-desktop-visible] .cartUsps .cartUsp p > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) .globalIcon { position: absolute; top: 0; margin-right: 0; } .page-cart .cartUspsWrapper[data-desktop-visible] .cartUsps .cartUsp p > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) .globalIcon:before { background-color: #00BF48; } .page-cart .cartUspsWrapper[data-desktop-visible] .cartUsps .hr.general { margin: 40px 0 0; } /* specific */ .page-cart.lang-nl_nl .cartUspsWrapper[data-desktop-visible] .cartUsps .cartUsp:nth-child(4) { flex: 1; display: flex; flex-direction: row; justify-content: flex-end; margin-right: 30px; } .page-cart .cartUspsWrapper[data-mobile-visible] { width: 100%; background-color: #f2f2f2; } .page-cart .cartUspsWrapper[data-mobile-visible] .cartUsps { display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 3px 0 4px; } .page-cart .cartUspsWrapper[data-mobile-visible] .cartUsps .cartUsp { text-align: left; margin: 0 8px; position: relative; z-index: 1; } .page-cart .cartUspsWrapper[data-mobile-visible] .cartUsps .cartUsp:first-child { margin-left: 0; } .page-cart .cartUspsWrapper[data-mobile-visible] .cartUsps .cartUsp:last-child { margin-right: 0; } .page-cart .cartUspsWrapper[data-mobile-visible] .cartUsps .cartUsp p { font-size: 13px; margin-bottom: 0; } .page-cart .cartUspsWrapper[data-mobile-visible] .cartUsps .cartUsp p > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) { display: inline-block; width: 16px; height: 13px; position: relative; margin-right: 1px; } .page-cart .cartUspsWrapper[data-mobile-visible] .cartUsps .cartUsp p > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) .globalIcon { position: absolute; top: 0; margin-right: 0; } .page-cart .cartUspsWrapper[data-mobile-visible] .cartUsps .cartUsp p > span:not([data-dynamic-delivery-time]):not([data-start-date]):not([data-end-date]) .globalIcon:before { background-color: #00BF48; } .page-cart .cartUspsWrapper[data-mobile-visible] .cartUsps .cartUsp .thuiswinkelWaarborgWrapper { max-width: 73px; } /*************************/ /* approaching promotion */ /*************************/ /* Added at 22.01.20. Functionality in content.js. */ /* Edited at 04.08.20. Renamed from 'chanceOfPromo' to 'probabilityReminder'. */ /* Edited at 23.06.23. Renamed from 'probabilityReminder' to 'approachingPromotion'. */ .approachingPromotionWrapper {} .approachingPromotionWrapper .approachingPromotion {} .approachingPromotionWrapper .approachingPromotion p { margin: 0; line-height: 1.4em; } .approachingPromotionWrapper .approachingPromotion p a { color: #000; display: inline-block; padding: 10px; background-color: #fff; border: 1px solid #999; position: relative; border-radius: 2px; } .approachingPromotionWrapper .approachingPromotion p a:before, .approachingPromotionWrapper .approachingPromotion p a:after { content: ""; position: absolute; border: 10px solid transparent; width: 0; height: 0; } .approachingPromotionWrapper .approachingPromotion p a:before { left: 10px; top: -20px; border-left-color: transparent; border-bottom-color: #999; } .approachingPromotionWrapper .approachingPromotion p a:after { left: 10px; top: -19px; border-left-color: transparent; border-bottom-color: #fff; } .approachingPromotionWrapper .approachingPromotion p a span.bold { font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .approachingPromotionWrapper .approachingPromotion p a span.priceTag, .approachingPromotionWrapper .approachingPromotion p a span.discountTag { font-family: 'Futura PT W01 Heavy', arial, sans-serif; color: #FF6000; } @media only screen and (max-width: 850px) { .approachingPromotionWrapper { margin-top: 10px; } } /************/ /* hotfixes */ /************/ /* Added at 13.03.23. */ /* hide newsletter subscription bar on cart page. */ .page-cart .footer-newsletter-subscribe { display: none; } /************************************************************************* 08.3 Checkout */ /************************************************************************* 08.4 Order confirmation */ /***********/ /* general */ /***********/ /* Edited at 28.11.19. Renewed order confirmation page. */ /* Edited at 29.11.19. Renewed order confirmation page. */ /* Edited at 23.07.20. Replaced non retour reward icon. */ /* Edited at 21.08.20. Added general variant of banner, for marketing content. */ /* .page-orderconfirmation {} .page-orderconfirmation .flex-container { display: flex; flex-direction: row; } .page-orderconfirmation .flex-container > .html-asset-container { margin: 0 5px; display: flex; flex-direction: column; align-items: center; } .page-orderconfirmation .flex-container > .html-asset-container:first-child { margin-left: 0; } .page-orderconfirmation .flex-container > .html-asset-container:last-child { margin-right: 0; } @media only screen and (max-width : 1024px){ .page-orderconfirmation .flex-container { flex-direction: column; padding: 0 20px; } .page-orderconfirmation .flex-container > .html-asset-container { margin: 0; } .page-orderconfirmation .flex-container > .html-asset-container:nth-child(1) { order: 2; } .page-orderconfirmation .flex-container > .html-asset-container:nth-child(2) { margin-bottom: 20px; } .page-orderconfirmation .flex-container > .html-asset-container:nth-child(3) { order: -2; margin-bottom: 20px; } } */ /* renewed */ .orderConfirmationMessage { margin-bottom: 30px; } .orderConfirmationSummaryItem { display: flex; flex-direction: row; align-items: flex-start; max-width: 450px; margin: 0 auto; } .orderConfirmationSummaryItem .orderConfirmationIconWrapper { max-width: 76px; position: relative; margin: 15px 30px 15px 0; } .orderConfirmationSummaryItem .orderConfirmationIconWrapper .orderConfirmationIcon { width: 46px; height: 46px; background-color: #9a9a9a; border-radius: 50%; margin: 0 auto; position: relative; } .orderConfirmationSummaryItem .orderConfirmationIconWrapper .orderConfirmationIcon:after { content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 46px; background-repeat: no-repeat; background-position: center center; } .orderConfirmationSummaryItem .orderConfirmationIconWrapper .orderConfirmationIcon.email:after { background-image: url('../icons/2019_HL13/we_icon_confirmation_email.svg'); } .orderConfirmationSummaryItem .orderConfirmationIconWrapper .orderConfirmationIcon.delivery:after { background-image: url('../icons/2019_HL13/we_icon_confirmation_delivery.svg'); } .orderConfirmationSummaryItem .orderConfirmationIconWrapper .orderConfirmationIcon.address:after { background-image: url('../icons/2019_HL13/we_icon_confirmation_address.svg'); } .orderConfirmationSummaryItem .orderConfirmationIconWrapper .orderConfirmationIcon.inspiration:after { background-image: url('../icons/2019_HL13/we_icon_confirmation_inspiration.svg'); } .orderConfirmationFAQ { width: 100%; height: 100%; padding: 20px; background-color: #002625; display: flex; flex-direction: column; justify-content: center; } .orderConfirmationFAQ ul { margin: 0 auto; padding: 0; } .orderConfirmationFAQ ul li { list-style-type: none; text-align: center; margin: 15px 0; } .orderConfirmationFAQ ul li a { display: block; } .orderConfirmationSocialMedia { width: 100%; height: 100%; padding: 20px; background-color: #f2f2f2; display: flex; flex-direction: column; justify-content: center; } .orderConfirmationSocialMedia .fb-like { text-align: center; } .orderConfirmationSocialMedia .fb_iframe_widget { display: block; } .orderConfirmationNonRetourReward { width: 100%; height: 100%; padding: 20px; background-color: #002625; } .orderConfirmationNonRetourReward .nonRetourRewardContent {} .orderConfirmationNonRetourReward .nonRetourRewardContent .nonRetourReward {} .orderConfirmationNonRetourReward .nonRetourRewardContent .nonRetourReward .nonRetourRewardIcon { text-align: center; } .orderConfirmationNonRetourReward .nonRetourRewardContent .nonRetourReward .nonRetourRewardIcon .tossingIntense { display: inline-block; margin: 0 auto; } .orderConfirmationNonRetourReward .nonRetourRewardContent .nonRetourReward .heading { margin: 10px auto 20px; } .orderConfirmationNonRetourReward .nonRetourRewardContent .nonRetourReward p.bodycopy.tiny { margin: 40px auto 0; padding-bottom: 10px; } .orderConfirmationBirthday { width: 100%; height: 100%; margin-top: 20px; padding: 20px; background-color: #002625; display: flex; flex-direction: column; justify-content: center; } .orderConfirmationBanner { width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; justify-content: center; } .orderConfirmationQr { width: 100%; max-width: 140px; padding: 0 20px 0 0; display: flex; flex-direction: column; justify-content: center; } @media only screen and (max-width : 1024px){} /************/ /* facebook */ /************/ /* Added at 09.07.19. */ .page-orderconfirmation .smFacebookWrapper { margin: 0 25px 25px; } .page-orderconfirmation .smFacebookWrapper .smFacebook {} .page-orderconfirmation .smFacebookWrapper .smFacebook .hr.general { margin-top: 10px; } /*****************/ /* restore optin */ /*****************/ /* Added at 15.11.19. */ /* Edited at 11.03.21. Replaced loader icon. */ .restoreOptinWrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 101; } .restoreOptinWrapper .restoreOptinOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: -1; cursor: pointer; } .restoreOptinWrapper .restoreOptin { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; padding: 20px 40px 30px; margin: 0 30px; width: calc(100% - 60px); max-width: 650px; } .restoreOptinWrapper .restoreOptin .restoreOptinLoader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: url(../icons/2021_HL04/loader.gif) center center no-repeat rgba(255, 255, 255, 0.5); display: none; z-index: 2; } .restoreOptinWrapper .restoreOptin .restoreOptinClose { position: absolute; top: 0; right: 0; width: 50px; height: 50px; cursor: pointer; z-index: 1; } .restoreOptinWrapper .restoreOptin .restoreOptinClose:before, .restoreOptinWrapper .restoreOptin .restoreOptinClose:after { position: absolute; content: ""; top: 50%; left: 50%; width: 16px; height: 2px; background-color: #000; } .restoreOptinWrapper .restoreOptin .restoreOptinClose:before { -ms-transform: translate(-50%) rotate(-45deg); -webkit-transform: translate(-50%) rotate(-45deg); transform: translate(-50%) rotate(-45deg); } .restoreOptinWrapper .restoreOptin .restoreOptinClose:after { -ms-transform: translate(-50%) rotate(45deg); -webkit-transform: translate(-50%) rotate(45deg); transform: translate(-50%) rotate(45deg); } .restoreOptinWrapper .restoreOptin .restoreOptinContent {} .restoreOptinWrapper .restoreOptin .restoreOptinContent button { padding: 15px 26px; background-color: #000; color: #fff; text-transform: uppercase; font-size: 12px; font-family: 'Futura PT W01 Heavy', arial, sans-serif; border: none; appearance: none; -webkit-appearance: none; border-radius: 2px; cursor: pointer; } @media only screen and (max-width: 850px) { .restoreOptinWrapper { position: absolute; } .restoreOptinWrapper .restoreOptin { top: 0; transform: translatex(calc(-50% - 30px)); } .restoreOptinWrapper .restoreOptinOverlay { position: fixed; } .restoreOptinWrapper .restoreOptin .restoreOptinContent {} .restoreOptinWrapper .restoreOptin .restoreOptinContent p.bttns.ctas { margin: 0; } .restoreOptinWrapper .restoreOptin .restoreOptinContent p.bttns.ctas .cta { margin: 7.5px 5px; display: block; } .restoreOptinWrapper .restoreOptin .restoreOptinContent p.bttns.ctas .cta:first-child { margin-top: 15px; } .restoreOptinWrapper .restoreOptin .restoreOptinContent p.bttns.ctas .cta:last-child { margin-bottom: 15px; } } /************************************************************************* 08.5 Returnportal */ /***********/ /* roadmap */ /***********/ /* Added at 12.06.18. */ /* Edited at 19.04.23. Added styling for note. */ .returnsRoadmapWrapper {} .returnsRoadmapWrapper .returnsRoadmap { border-left: 1px solid #dedede; border-bottom: 1px solid #dedede; display: flex; flex-wrap: wrap; } .returnsRoadmapWrapper .returnsRoadmap .stepWrapper { display: table-cell; width: 25%; vertical-align: top; border-right: 1px solid #dedede; } .returnsRoadmapWrapper .returnsRoadmap .stepWrapper .step { padding-bottom: 30px; } .returnsRoadmapWrapper .returnsRoadmap .stepWrapper .step .stepHeaderWrapper {} .returnsRoadmapWrapper .returnsRoadmap .stepWrapper .step .stepHeaderWrapper .stepHeader { background: #f2f2f2; } .returnsRoadmapWrapper .returnsRoadmap .stepWrapper .step .stepHeaderWrapper .stepHeader p { text-transform: uppercase; font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-align: center; margin: 0; line-height: 50px; } .returnsRoadmapWrapper .returnsRoadmap .stepWrapper .step .stepHeaderWrapper .stepHeader p .tickWrapper { position: relative; } .returnsRoadmapWrapper .returnsRoadmap .stepWrapper .step .stepHeaderWrapper .stepHeader p .tickWrapper .tick { display: block; position: absolute; top: 3px; left: 6px; width: 13px; height: 13px; background: url('../Service/returns/2018_HL06/done-icon.png') no-repeat 50% 50%; background-size: contain; } .returnsRoadmapWrapper .returnsRoadmap .stepWrapper .step .stepContentWrapper {} .returnsRoadmapWrapper .returnsRoadmap .stepWrapper .step .stepContentWrapper .stepContent {} .returnsRoadmapWrapper .returnsRoadmap .stepWrapper .step .stepContentWrapper .stepContent .stepIconWrapper { padding: 0 40px; } .returnsRoadmapWrapper .returnsRoadmap .stepWrapper .step .stepContentWrapper .stepContent .stepIconWrapper .stepIcon { padding-top: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; } .returnsRoadmapWrapper .returnsRoadmap .stepWrapper.step-1 .step .stepContentWrapper .stepContent .stepIconWrapper .stepIcon { background-image: url('../Service/returns/2018_HL06/step1-icon.png'); } .returnsRoadmapWrapper .returnsRoadmap .stepWrapper.step-2 .step .stepContentWrapper .stepContent .stepIconWrapper .stepIcon { background-image: url('../Service/returns/2018_HL06/step2-icon.png'); } .returnsRoadmapWrapper .returnsRoadmap .stepWrapper.step-3 .step .stepContentWrapper .stepContent .stepIconWrapper .stepIcon { background-image: url('../Service/returns/2018_HL06/step3-icon.png'); } .returnsRoadmapWrapper .returnsRoadmap .stepWrapper.step-4 .step .stepContentWrapper .stepContent .stepIconWrapper .stepIcon { background-image: url('../Service/returns/2018_HL06/step4-icon.png'); } .returnsRoadmapWrapper .returnsRoadmap .stepWrapper .step .stepContentWrapper .stepContent p { text-align: center; margin: 10px 20px; } .returnsRoadmapWrapper .note { padding: 0 30px; } @media only screen and (max-width: 850px) { .returnsRoadmapWrapper .returnsRoadmap .stepWrapper { display: block; float: left; width: 50%; } .returnsRoadmapWrapper .returnsRoadmap .stepWrapper:after { content: ""; display: table; clear: both; } .returnsRoadmapWrapper .note { padding: 0 20px; } } /*********************/ /* non-retour reward */ /*********************/ /* Added at 02.08.19. */ /* Edited at 23.07.20. Replaced icon. */ .nonRetourRewardWrapper { margin: 20px auto 0; } .nonRetourRewardWrapper .nonRetourReward { padding: 40px 20px 0; background-color: #f2f2f2; } .nonRetourRewardWrapper .nonRetourReward .nonRetourRewardIcon { text-align: center; } .nonRetourRewardWrapper .nonRetourReward .nonRetourRewardIcon .tossingIntense { display: inline-block; margin: 0 auto; } .nonRetourRewardWrapper .nonRetourReward .heading { margin: 10px auto 20px; } .nonRetourRewardWrapper .nonRetourReward p.bodycopy.tiny { margin: 40px auto 0; padding-bottom: 10px; } /************************************************************************* 08.6 Error */ /***********/ /* general */ /***********/ /* Edited at 06.06.18. */ /* Edited at 07.08.19. Updated typography. */ .NoResultsContent { margin: 0px auto; } .NoResultsContent div.hr { width: 100%; height: 1px; background-color: #dedede; margin: 40px auto; } .NoResultsContent h4.heading, .NoResultsContent p.bodycopy{ margin: 1.0em auto; } /*******/ /* 404 */ /*******/ /* Added at 19.10.20. */ .error404PageContent {} .error404PageContent .crossSellCategories { margin: 10px auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; } .error404PageContent .crossSellCategories .crossSellCategory { position: relative; z-index: 1; width: 100%; margin: 0 10px; } .error404PageContent .crossSellCategories .crossSellCategory:nth-child(1) { max-width: calc(25% - 6.5px); margin: 0 6.5px 0 0; } .error404PageContent .crossSellCategories .crossSellCategory:nth-child(2) { max-width: calc(25% - 8.5px); margin: 0 5px 0 3.5px; } .error404PageContent .crossSellCategories .crossSellCategory:nth-child(3) { max-width: calc(25% - 8.5px); margin: 0 3.5px 0 5px; } .error404PageContent .crossSellCategories .crossSellCategory:nth-child(4) { max-width: calc(25% - 6.5px); margin: 0 0 0 6.5px; } @media only screen and (max-width : 850px){ .error404PageContent .crossSellCategories { margin: 20px auto; flex-wrap: wrap; } .error404PageContent .crossSellCategories .crossSellCategory {} .error404PageContent .crossSellCategories .crossSellCategory:nth-child(1) { max-width: calc(50% - 10px); margin: 0 10px 10px 0;} .error404PageContent .crossSellCategories .crossSellCategory:nth-child(2) { max-width: calc(50% - 10px); margin: 0 0 10px 10px; } .error404PageContent .crossSellCategories .crossSellCategory:nth-child(3) { max-width: calc(50% - 10px); margin: 10px 10px 0 0; } .error404PageContent .crossSellCategories .crossSellCategory:nth-child(4) { max-width: calc(50% - 10px); margin: 10px 0 0 10px; } } /************************************************************************* 08.7 Storelocator */ /**********************/ /* renovation message */ /**********************/ .renovationMessageWrapper { position: relative; width: 100%; min-width: 423px; } .renovationMessageWrapper .renovationMessageContent { background: #FDB000; padding: 0.8em 1.0em; } .renovationMessageWrapper .renovationMessageContent .renovationMessage {} .renovationMessageWrapper .renovationMessageContent .renovationMessage p { margin: 0 auto; } /************************************************************************* 08.8 Enrichment */ /*******************/ /* benefits banner */ /*******************/ /* Added at 18.04.18. */ /* Edited at 18.11.19. Rebuild with flexbox. Added heading and bodycopy classes. */ .enrichmentMemberBenefitsWrapper { position: relative; z-index: 1; margin-bottom: 20px; } .enrichmentMemberBenefitsWrapper .enrichmentMemberBenefits { background-color: #f2f2f2; padding: 20px 60px; } .enrichmentMemberBenefitsWrapper .enrichmentMemberBenefits h4.heading { margin: 15px auto; } .enrichmentMemberBenefitsWrapper .enrichmentMemberBenefits .columns { display: flex; flex-direction: row; align-items: start; } .enrichmentMemberBenefitsWrapper .enrichmentMemberBenefits .columns .column { width: calc(50% - 10px); } .enrichmentMemberBenefitsWrapper .enrichmentMemberBenefits .columns .column:nth-child(1) { margin-right: 10px; } .enrichmentMemberBenefitsWrapper .enrichmentMemberBenefits .columns .column:nth-child(2) { margin-left: 10px; } .enrichmentMemberBenefitsWrapper .svgWrapper { max-width: 42.24px; } @media only screen and (max-width : 850px){ .enrichmentMemberBenefitsWrapper .enrichmentMemberBenefits { padding: 10px 50px; } .enrichmentMemberBenefitsWrapper .enrichmentMemberBenefits .columns { flex-direction: column; } .enrichmentMemberBenefitsWrapper .enrichmentMemberBenefits .columns .column { width: 100%; } .enrichmentMemberBenefitsWrapper .enrichmentMemberBenefits .columns .column:nth-child(1) { margin-right: 0; } .enrichmentMemberBenefitsWrapper .enrichmentMemberBenefits .columns .column:nth-child(2) { margin-left: 0; } .enrichmentMemberBenefitsWrapper .enrichmentMemberBenefits .columns .column:nth-child(2) p:first-child { margin-top: 0; } .enrichmentMemberBenefitsWrapper .svgWrapper { max-width: 32.18px; } } /************************************************************************* 09.0 Static pages *************************************************************************/ /***********/ /* general */ /***********/ /* Added at 29.10.18. */ /* Edited at 04.07.19. */ .staticPage { margin: 0 auto; } .staticPage.wide { max-width: 1600px; } .staticPage.full { max-width: 1310px; } .staticPageBanner { position: relative; z-index: 1; } .staticPageBanner.lft { max-width: 692px; padding: 0 0 0 30px; margin-left: auto; margin-right: 8px; } .staticPageBanner.rght { max-width: 692px; padding: 0 30px 0 0; margin-right: auto; margin-left: 8px; } .staticPageBanner.full { max-width: 1400px; padding: 0 30px 0 30px; margin: 0 auto; } @media only screen and (max-width : 850px) { .staticPageBanner.lft, .staticPageBanner.rght { max-width: 100%; padding: 0 30px 0 30px; margin: 0 auto; } .staticPageBanner.full { max-width: 100%; padding: 0 30px 0 30px; } } @media only screen and (max-width : 450px) { .staticPageBanner.lft, .staticPageBanner.rght { max-width: 100%; padding: 0 30px 0 30px; margin: 0 auto; } .staticPageBanner.full { max-width: 100%; padding: 0 30px 0 30px; } } /******************/ /* promotion page */ /******************/ /* Edited at 05.07.19. Moved styling for black button to this CSS. */ .page-static {} .page-static h1, .page-static h2 { font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-transform: none; } .page-static p { margin: 1.0em 0; } .page-static p.indent { margin-left: 3.0em; } .page-static .hr { margin: 2.0em auto; width: 100%; height: 1px; background: #dedede; } .page-static a button.black { margin: 0 5px 5px 0; padding: 15px 15px; min-width: 230px; } /***************************/ /* corporate identity page */ /***************************/ /* Added at 15.08.19. */ /* Edited at 11.02.20. */ /* Edited at 12.02.20. Removed page fixes. */ /* Edited at 26.02.21. Added menu styling. */ /* Edited at 10.06.21. Added scrollbar to menu. Renamed typography to corporate identity. */ /* Edited at 07.12.12. Added button to copy HTML to clipboard. Added function in content.js. */ /* Edited at 19.10.22. Updated styling for replatforming. */ .ciPageWrapper {} .ciPageWrapper .ciPage {} .ciPageWrapper .ciPage .ciMenuWrapper { position: fixed; top: 0; right: 0; z-index: 99; height: 100%; } .ciPageWrapper .ciPage .ciMenuWrapper .ciMenu { position: absolute; height: 100%; } .ciPageWrapper .ciPage .ciMenuWrapper .ciMenu .ciMenuTrigger { position: absolute; top: 120px; left: -85px; cursor: pointer; z-index: 1; } .ciPageWrapper .ciPage .ciMenuWrapper .ciMenu .ciMenuTrigger { position: absolute; top: 57px; right: 6px; cursor: pointer; z-index: 1; padding: 12px; } .ciPageWrapper .ciPage .ciMenuWrapper .ciMenu .ciMenuTrigger .ciMenuTriggerIcon { width: 16px; height: 14px; display: flex; flex-direction: column; justify-content: space-between; } .ciPageWrapper .ciPage .ciMenuWrapper .ciMenu .ciMenuTrigger .ciMenuTriggerIcon > div { width: 100%; height: 2px; background-color: #000; } .ciPageWrapper .ciPage .ciMenuWrapper .ciMenu:hover .ciMenuTrigger .ciMenuTriggerIcon > div { background-color: #fff; } .ciPageWrapper .ciPage .ciMenuWrapper .ciMenu .ciMenuContent { position: absolute; width: 350px; top: 0; right: -350px; height: 100%; padding: 170px 40px 40px 40px; box-sizing: border-box; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; background: linear-gradient(220deg, #f2f2f2, #efefef); background-size: 400% 400%; -webkit-animation: ciMenu 9s ease infinite; imation: ciMenu 9s ease infinite; overflow-y: scroll; } .ciPageWrapper .ciPage .ciMenuWrapper .ciMenu:hover .ciMenuContent { right: 0; } .ciPageWrapper .ciPage .ciMenuWrapper .ciMenu .ciMenuContent ul { list-style: none; margin: 0; padding: 0; } .ciPageWrapper .ciPage .ciMenuWrapper .ciMenu .ciMenuContent ul li { text-align: left; font-size: 15px; line-height: 22px; } .ciPageWrapper .ciPage .ciMenuWrapper .ciMenu .ciMenuContent ul li a { text-decoration: none; color: #000; opacity: 0.5; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .ciPageWrapper .ciPage .ciMenuWrapper .ciMenu .ciMenuContent ul li a.active, .ciPageWrapper .ciPage .ciMenuWrapper .ciMenu .ciMenuContent ul li a:hover { opacity: 1.0; } .ciPageWrapper .ciPage .ciWrapper { width: 100%; } .ciPageWrapper .ciPage .ciWrapper .ciSection { max-width: 1600px; padding: 0 30px; margin: 0 auto; z-index: 1; position: relative; } .ciPageWrapper .ciPage .ciWrapper .ciSeparator { width: 100%; height: 10px; position: relative; } .ciPageWrapper .ciPage .ciWrapper .ciSeparator:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; padding-top: 200%; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 50%, #efefef 100%); z-index: -1; } .ciPageWrapper .ciPage .ciWrapper [data-tab-trigger] { cursor: pointer; } .ciPageWrapper .ciPage .ciWrapper .icons, .ciPageWrapper .ciPage .ciWrapper .animations { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; } .ciPageWrapper .ciPage .ciWrapper .icons .icon, .ciPageWrapper .ciPage .ciWrapper .animations .animation { display: flex; flex-direction: column; width: 12.5%; justify-content: center; align-items: center; height: 150px; } .ciPageWrapper .ciPage .ciWrapper .animations .animation { overflow: hidden; width: calc(12.5% - 10px); margin: 0 5px 10px; } .ciPageWrapper .ciPage .ciWrapper .animations .animation .areas, .ciPageWrapper .ciPage .ciWrapper .animations .animation .areas p.bodycopy { cursor: pointer; } @media only screen and (max-width : 850px) { .ciPageWrapper .ciPage .ciWrapper { padding: 0 15px; } .ciPageWrapper .ciPage .ciWrapper .icons .icon, .ciPageWrapper .ciPage .ciWrapper .animations .animation { width: 25%; height: 100px; } } @-webkit-keyframes ciMenu { 0%{background-position:86% 0%} 50%{background-position:15% 100%} 100%{background-position:86% 0%} } @-moz-keyframes ciMenu { 0%{background-position:86% 0%} 50%{background-position:15% 100%} 100%{background-position:86% 0%} } @keyframes ciMenu { 0%{background-position:86% 0%} 50%{background-position:15% 100%} 100%{background-position:86% 0%} } /* copy HTML to clipboard tool */ [data-convert-to-xml] { position: relative; } [data-convert-to-xml] [data-convert-to-xml-content] {} [data-convert-to-xml] [data-convert-to-xml-trigger] { display: none; position: absolute; top: 100%; left: 50%; padding-top: 5px; z-index: 99999; -webkit-transform: translatex(-50%); transform: translatex(-50%); } [data-convert-to-xml] [data-convert-to-xml-trigger] button { cursor: pointer; appearance: none; -webkit-appearance: none; background-color: #D61935; color: #fff; padding: 5px 8px; border: 1px solid #F18D9C; } [data-convert-to-xml] [data-convert-to-xml-trigger] button:before, [data-convert-to-xml] [data-convert-to-xml-trigger] button:after { content: ""; position: absolute; border: 10px solid transparent; width: 0; height: 0; left: 50%; -webkit-transform: translatex(-50%); transform: translatex(-50%); } [data-convert-to-xml] [data-convert-to-xml-trigger] button:before { top: -14px; border-left-color: transparent; border-bottom-color: #F18D9C; } [data-convert-to-xml] [data-convert-to-xml-trigger] button:after { top: -13px; border-left-color: transparent; border-bottom-color: #D61935; } [data-convert-to-xml]:hover [data-convert-to-xml-trigger] { display: block; } /**************************/ /* blue ridge landingpage */ /**************************/ /* Added at 13.09.17. */ /* Added at 06.02.18. */ /* Edited at 07.05.18. */ /* Edited at 05.07.19. Moved full width 'grid-row.grid-1 & 3' to this CSS. */ .blueridgeNavigationCarouselWrapper { position: relative; background: #084294; } .blueridgeNavigationCarouselWrapper .blueridgeNavigationCarousel {} .blueridgeNavigationCarouselWrapper .blueridgeNavigationCarousel .blueridgeNavigationSlideWrapper { width: 100%; max-width: 25%; float: left; } .blueridgeNavigationCarouselWrapper .blueridgeNavigationCarousel .blueridgeNavigationSlideWrapper .blueridgeNavigationSlide {} .blueridgeNavigationCarouselWrapper .blueridgeNavigationCarousel .blueridgeNavigationSlideWrapper .blueridgeNavigationSlide .imageMap {} .blueridgeNavigationCarouselWrapper .blueridgeNavigationCarousel .blueridgeNav { position: absolute; top: 50%; transform: translatey(-50%); -webkit-transform: translatey(-50%); width: 38px; height: 38px; opacity: 1; filter:alpha(opacity=100); transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; cursor: pointer; z-index: 150; } .blueridgeNavigationCarouselWrapper .blueridgeNavigationCarousel .blueridgeNav.prev { left: 0px; background: transparent url(../icons/sprite-left-right-nav.png?$staticlink$) 0px 0px no-repeat; } .blueridgeNavigationCarouselWrapper .blueridgeNavigationCarousel .blueridgeNav.prev:hover { background: #fff url(../icons/sprite-left-right-nav-hover.png?$staticlink$) 0px 0px no-repeat; } .blueridgeNavigationCarouselWrapper .blueridgeNavigationCarousel .blueridgeNav.next { right: 0px; background: transparent url(../icons/sprite-left-right-nav.png?$staticlink$) -38px 0px no-repeat; } .blueridgeNavigationCarouselWrapper .blueridgeNavigationCarousel .blueridgeNav.next:hover { background: #fff url(../icons/sprite-left-right-nav-hover.png?$staticlink$) -38px 0px no-repeat; } @media only screen and (max-width : 805px) { .blueridgeNavigationCarouselWrapper .blueridgeNavigationCarousel .blueridgeNavigationSlideWrapper { max-width: 50%; } } /* workaround to remove header & footer */ .page-category-blue-ridge #header, .page-category-blue-ridge .top-container, .page-category-blue-ridge footer { display: none; } @media only screen and (max-width : 850px){ .page-category-blue-ridge .grid-row.grid-1, .page-category-blue-ridge .grid-row.grid-3 { width: 100%; } } /********************/ /* student discount */ /********************/ /* Added at 08.06.18. */ /* Edited at 22.11.18. */ /* Edited at 08.08.19. Updated typography and applied flexbox. */ /* Edited at 19.10.22. Edited styling for replatforming. */ .studentDiscountPageWrapper { max-width: 1600px; margin: 0 auto; } .studentDiscountPageWrapper .studentDiscountPage { max-width: 1310px; padding: 0 30px; margin-left: auto; } .studentDiscountPageWrapper .studentDiscountPage h1.heading { margin: 40px 0; text-align: center; } .studentDiscountPageWrapper .studentDiscountPage h1.heading span { display: block; color: #FCC42F; } .studentDiscountPageWrapper .studentDiscountPage p.bodycopy { text-align: center; margin: 30px auto; } .studentDiscountPageWrapper .studentDiscountPage .hr { width: 100%; max-width: 50px; margin: 0 auto; height: 8px; background: #000; } .studentDiscountPageWrapper .studentDiscountPage .studentAlwaysGetMoreLogo { margin: 0 auto; max-width: 530px; } .studentDiscountPageWrapper .studentDiscountPage .details-wrapper { margin: 40px 0; } .studentDiscountPageWrapper .studentDiscountPage .details-wrapper .details { display: flex; flex-wrap: nowrap; background-color: #f2f2f2; } .studentDiscountPageWrapper .studentDiscountPage .details-wrapper .details .col-50 { width: 50%; } .studentDiscountPageWrapper .studentDiscountPage .details-wrapper .details .col-50:first-child { display: flex; flex-direction: column; align-self: center; padding: 20px; } .studentDiscountPageWrapper .studentDiscountPage .details-wrapper .details .col-50 h4.heading { margin: 20px; } .studentDiscountPageWrapper .studentDiscountPage .details-wrapper .details .col-50 p.bodycopy { text-align: left; margin: 1.0em 20px; } .studentDiscountPageWrapper .studentDiscountPage .details-wrapper .details .col-50 ul {} .studentDiscountPageWrapper .studentDiscountPage .details-wrapper .details .col-50 ul li { line-height: 30px; } @media only screen and (max-width: 1024px) { .studentDiscountPageWrapper .studentDiscountPage .details-wrapper .details { flex-direction: column; } .studentDiscountPageWrapper .studentDiscountPage .details-wrapper .details .col-50 { width: 100%; } .studentDiscountPageWrapper .studentDiscountPage .details-wrapper .details .col-50:first-child { padding: 20px 10px; } } /*******/ /* FAQ */ /*******/ /* Added at 22.05.19. */ /* Edited at 17.06.19. Added tabs to mobile index categories. */ /* Edited at 10.07.19. Added searchbar icon. */ /* Edited at 07.08.19. Updated typography. */ /* Edited at 07.01.20. Fixed 'flexbox' issue on IE. */ /* Edited at 23.07.20. Updated all icons. */ /* Edited at 02.01.23. Updated z-index of category thumbnails carousel navigation. */ /* Edited at 14.02.23. Updated styling to fit replatforming. */ /* Edited at 19.04.23. Added two columned layout on tablet. */ /* Edited at 23.06.23. Updated all questions link to be hidden by default. */ /* general */ .faqPageWrapper {} .faqPageWrapper .faqPage p.bodycopy.back { text-align: left; margin-top: 0; } .faqPageWrapper .faqPage p.bodycopy.back a {} .faqPageWrapper .faqPage p.bodycopy.back a:before { content: "< "; } .faqPageWrapper .faqPage .faqHeadWrapper {} .faqPageWrapper .faqPage .faqHead { max-width: 1300px; margin: 0 auto; padding: 1.0em 30px; } .faqPageWrapper .faqPage .faqHead h1.heading { margin: 1.0em 0; text-align: center; } .faqPageWrapper .faqPage .faqHead p.bodycopy { margin: 1.0em 0; text-align: center; } .faqPageWrapper .faqPage .faqHead p.bodycopy.back { text-align: left; margin-top: 0; } .faqPageWrapper .faqPage .faqHead .faqHeadIconWrapper {} .faqPageWrapper .faqPage .faqHead .faqHeadIcon { position: relative; z-index: 1; } .faqPageWrapper .faqPage .faqHead .faqHeadIcon .globalIcon { display: block; margin: 0 auto; } .faqPageWrapper .faqPage .faqHead .faqHeadIcon h1 { margin: 0.5em 0; } .faqPageWrapper .faqPage .faqBodyWrapper {} .faqPageWrapper .faqPage .faqBody { max-width: 1300px; margin: 0 auto; padding: 1.0em 30px; } .faqPageWrapper .faqPage .faqBody h2 { font-family: 'Futura PT W01 Heavy', arial, sans-serif !important; font-size: 28px; text-transform: uppercase !important; margin: 1.0em 0; text-align: center; } .faqPageWrapper .faqPage .faqBody .iconThumbs { display: inline-block; } .faqPageWrapper .faqPage .faqBody .iconThumb { display: inline-block; cursor: pointer; } .faqPageWrapper .faqPage .faqBody .iconThumb.up, .faqPageWrapper .faqPage .faqBody .iconThumb.down { opacity: 0.3; } .faqPageWrapper .faqPage .faqBody .iconThumb.up.active, .faqPageWrapper .faqPage .faqBody .iconThumb.down.active { opacity: 1; } .faqPageWrapper .faqPage .hr { background-color: #dedede; height: 1px; margin: 2.0em auto; } /* searchbar */ .faqSearchBarWrapper {} .faqSearchBarWrapper .faqSearchBar { position: relative; } .faqSearchBarWrapper .faqSearchBar #faqSearchBar { color: #000; padding: 1.0em; padding-left: 40px; height: 50px; background-repeat: no-repeat; background-image: url('../icons/2019_HL06/searchbar_icon.svg'); background-position: 10px center; background-size: 20px; } .faqSearchBarWrapper .faqSearchBar #faqSearchBar[value=""] { color: #ccc; } .faqSearchBarWrapper .faqSearchBar #faqSearchBar:focus { color: #000; } .faqSearchBarWrapper .faqSearchBar .searchResult { position: absolute; top: 100%; left: 0; width: 100%; max-height: 300px; background-color: rgba(255, 255, 255, 1.0); border: 1px solid #dedede; overflow-y: auto; z-index: 2; display: none; } .faqSearchBarWrapper .faqSearchBar .searchResult .highlight { font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .faqSearchBarWrapper .faqSearchBar .searchResult a { text-decoration: none; } .faqSearchBarWrapper .faqSearchBar .searchResult a p { margin: 0; padding: 1.0em; cursor: pointer; color: #000; border-bottom: 1px solid #f2f2f2; } .faqSearchBarWrapper .faqSearchBar .searchResult a:last-child p { border-bottom: 0; } .faqSearchBarWrapper .faqSearchBar .searchResult a p .categoryLabel { float: right; color: #ccc; } @media only screen and (min-width: 850px) { .faqSearchBarWrapper .faqSearchBar .searchResult a p:hover { background-color: #CBECFF; } } @media only screen and (max-width: 850px) { .faqSearchBarWrapper .faqSearchBar .searchResult { font-size: 14px; } .faqSearchBarWrapper .faqSearchBar .searchResult a p { padding: 0.25em 1.0em; } .faqSearchBarWrapper .faqSearchBar .searchResult a p .categoryLabel { display: none; } .faqSearchBarWrapper .faqSearchBar .searchResult a:first-child p { padding-top: 0.5em; } .faqSearchBarWrapper .faqSearchBar .searchResult a:last-child p { padding-bottom: 0.5em; } } /* tabs */ .faqPageWrapper .faqPage .tabsWrapper {} .faqPageWrapper .faqPage .tabsWrapper .tabs {} .faqPageWrapper .faqPage .tabsWrapper .tabs .tabWrapper {} .faqPageWrapper .faqPage .tabsWrapper .tabs .tabWrapper .tab { background: #f2f2f2; padding: 1.0em; cursor: pointer; position: relative; } .faqPageWrapper .faqPage .tabsWrapper .tabs .tabWrapper .tab:after { content: ""; width: 20px; height: 20px; position: absolute; top: 50%; right: 20px; background: url('../icons/sprite-left-right-nav-hover.png') -49px -10px no-repeat; transform: translatey(-50%) rotate(90deg); -webkit-transform: translatey(-50%) rotate(90deg); } .faqPageWrapper .faqPage .tabsWrapper .tabs .tabWrapper[data-tab="active"] .tab:after { background: url('../icons/sprite-left-right-nav-hover.png') -10px -10px no-repeat; } .faqPageWrapper .faqPage .tabsWrapper .tabs .tabWrapper .tab p { text-align: left; margin: 0; } .faqPageWrapper .faqPage .tabsWrapper .tabs .tabWrapper[data-tab="active"] .tab { background-color: #dedede; } .faqPageWrapper .faqPage .tabsWrapper .tabs .tabWrapper .content { height: 0; overflow: hidden; padding-bottom: 10px; } .faqPageWrapper .faqPage .tabsWrapper .tabs .tabWrapper .content p { margin: 1.0em; } @media only screen and (max-width: 850px) { .faqPageWrapper .faqPage .tabsWrapper .tabs .tabWrapper .tab { padding: 1.0em 3.5em 1.0em 1.0em; } } /* categories */ .faqPageWrapper .faqPage .faqCategories { display: flex; flex-wrap: wrap; align-content: stretch; } .faqPageWrapper .faqPage .faqCategoryWrapper { width: 33.33%; margin-bottom: 1.0em; } .faqPageWrapper .faqPage .faqCategoryWrapper:nth-of-type(3n+2) { padding: 0 10px; } .faqPageWrapper .faqPage .faqCategoryWrapper .faqCategory {} .faqPageWrapper .faqPage .faqCategoryWrapper .faqCategory .categoryHeaderWrapper { background-color: #f2f2f2; border-bottom: 1px solid #dedede; } .faqPageWrapper .faqPage .faqCategoryWrapper .faqCategory .categoryHeaderWrapper > a { text-decoration: none; line-height: inherit; } .faqPageWrapper .faqPage .faqCategoryWrapper .faqCategory .categoryHeaderWrapper .categoryHeader { padding: 20px 0; position: relative; z-index: 1; } .faqPageWrapper .faqPage .faqCategoryWrapper .faqCategory .categoryHeaderWrapper .categoryHeader .globalIcon { display: block; margin: 0 auto; } .faqPageWrapper .faqPage .faqCategoryWrapper .faqCategory .categoryHeaderWrapper .categoryHeader p.bodycopy { text-align: center; margin: 10px auto 0; } .faqPageWrapper .faqPage .faqCategoryWrapper .faqCategory ul { padding: 0; } .faqPageWrapper .faqPage .faqCategoryWrapper .faqCategory ul li { list-style-type: none; } .faqPageWrapper .faqPage .faqCategoryWrapper .faqCategory ul li.all { margin-top: 1.0em; display: none; } .faqPageWrapper .faqPage .faqCategoryWrapper .faqCategory ul li.all a { font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .faqPageWrapper .faqPage .faqCategoryWrapper .faqCategory ul li a { display: block; font-size: 15px; line-height: 20px; text-decoration: none; padding: 0.35em 1.0em; color: #000; } /* tablet only */ @media only screen and (max-width: 1024px) { .faqPageWrapper .faqPage .faqCategoryWrapper { width: 50%; } .faqPageWrapper .faqPage .faqCategoryWrapper:nth-of-type(3n+2) { padding: 0; } .faqPageWrapper .faqPage .faqCategoryWrapper:nth-of-type(odd) { padding-right: 5px; } .faqPageWrapper .faqPage .faqCategoryWrapper:nth-of-type(even) { padding-left: 5px; } } /* desktop only */ @media only screen and (min-width: 850px) { .faqPageWrapper .faqPage .faqCategoryWrapper .faqCategory ul li a:hover { color: #999; } .faqPageWrapper .faqPage .faqCategoryWrapper .faqCategory ul { display: none; margin: 1.0em 0 0; } } /* mobile only */ @media only screen and (max-width: 850px) { .faqPageWrapper .faqPage .faqCategories { flex-direction: column; } .faqPageWrapper .faqPage .faqCategoryWrapper { width: 100%; margin-bottom: 1.0em; } .faqPageWrapper .faqPage .faqCategoryWrapper:nth-of-type(3n+2) { padding: 0; } .faqPageWrapper .faqPage .faqCategoryWrapper:nth-of-type(odd) { padding-right: 0; } .faqPageWrapper .faqPage .faqCategoryWrapper:nth-of-type(even) { padding-left: 0; } .faqPageWrapper .faqPage .faqCategoryWrapper .faqCategory ul { height: 0; overflow: hidden; margin: 0; } } /* tmp message */ .faqPageWrapper .faqPage .tmpMessageWrapper {} .faqPageWrapper .faqPage .tmpMessage { padding: 20px; background: #FDB000; margin-bottom: 10px; } .faqPageWrapper .faqPage .tmpMessage h4.heading { margin: 0; } .faqPageWrapper .faqPage .tmpMessage p { margin: 1.0em 0 0; font-size: 15px; } /* top 3 */ .faqPageWrapper .faqPage .faqTop3Wrapper {} .faqPageWrapper .faqPage .faqTop3 {} .faqPageWrapper .faqPage .faqTop3 h2.heading { margin: 1.0em 0; text-align: center; } /* category thumbnails */ .categoryThumbNailsWrapper { margin: 0 40px; width: calc(100% - 80px); position: relative; padding-bottom: 1.0em; } .categoryThumbNailsWrapper .cycle-carousel-wrap { display: flex; } .categoryThumbNailsWrapper .cycle-nav { position: absolute; top: 50%; width: 38px; height: 38px; opacity: 1; filter:alpha(opacity=100); transform: translatey(-50%); -webkit-transform: translatey(-50%); transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; cursor: pointer; z-index: 1; } .categoryThumbNailsWrapper .cycle-nav.cycle-prev { left: -40px; background: transparent url(../icons/sprite-left-right-nav-hover.png?$staticlink$) 0 0 no-repeat; opacity: 0.5; } .categoryThumbNailsWrapper .cycle-nav.cycle-prev:hover { background: #fff url(../icons/sprite-left-right-nav-hover.png?$staticlink$) 0 0 no-repeat; opacity: 1.0; } .categoryThumbNailsWrapper .cycle-nav.cycle-next { right: -40px; background: transparent url(../icons/sprite-left-right-nav-hover.png?$staticlink$) -38px 0 no-repeat; opacity: 0.5; } .categoryThumbNailsWrapper .cycle-nav.cycle-next:hover { background: #fff url(../icons/sprite-left-right-nav-hover.png?$staticlink$) -38px 0px no-repeat; opacity: 1.0; } .categoryThumbNailsWrapper .categoryThumbNails {} .categoryThumbNailsWrapper .categoryThumbNailWrapper { padding: 5px; position: relative; display: flex; height: 100%; } .categoryThumbNailsWrapper .categoryThumbNailWrapper .categoryThumbNail { padding: 3.0em 1.5em; border: 1px solid #dedede; width: 100%; position: relative; z-index: 1; } .categoryThumbNailsWrapper .categoryThumbNailWrapper .categoryThumbNail .globalIcon { display: block; margin: 0 auto; } .categoryThumbNailsWrapper .categoryThumbNailWrapper .categoryThumbNail p.bodycopy { text-align: center; margin: 10px auto 0; white-space: normal; } /* mobile only */ @media only screen and (max-width: 850px) { .categoryThumbNailsWrapper { margin: 0; width: 100%; padding: 0; } .categoryThumbNailsWrapper .categoryThumbNails { display: grid; grid-template-columns: repeat(2, 1fr); } .categoryThumbNailsWrapper .categoryThumbNailWrapper { padding: 0 0 10px 0; width: 100%; } .categoryThumbNailsWrapper .categoryThumbNailWrapper:nth-child(odd) { padding-right: 5px; } .categoryThumbNailsWrapper .categoryThumbNailWrapper:nth-child(even) { padding-left: 5px; } .categoryThumbNailsWrapper .categoryThumbNailWrapper .categoryThumbNail { padding: 2.0em 1.0em; height: 100%; } } /* contact details */ .faqContactWrapper { background-color: #CBECFF; } .faqContactWrapper .faqContact { max-width: 1300px; margin: 0 auto; padding: 0 30px; } .faqContactWrapper .faqContact h2.heading { padding: 1.0em 0; margin: 0; text-align: center; } /* .faqContactWrapper .faqContact h3 { font-family: 'Futura PT W01 Heavy', arial, sans-serif; font-size: 16px; text-transform: uppercase !important; } */ .faqContactWrapper .faqContact .contactDetailsWrapper {} .faqContactWrapper .faqContact .contactDetails { display: flex; flex-flow: row nowrap; padding: 1.0em 0; } .faqContactWrapper .faqContact .contactDetails .column { flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; } .faqContactWrapper .faqContact .contactDetails .column:nth-child(2) { padding-top: 4.0em; } .faqContactWrapper .faqContact .contactDetails h2.heading { text-align: left; margin: 1.0em 0; padding: 0; } .faqContactWrapper .faqContact .contactDetails ul { padding-left: 75px; margin: 2.5em 0 0; } .faqContactWrapper .faqContact .contactDetails ul li { list-style: none; margin-bottom: 30px; } .faqContactWrapper .faqContact .contactDetails ul li p.bodycopy { margin: 0; position: relative; } .faqContactWrapper .faqContact .contactDetails ul li p.bodycopy span.globalIcon { position: absolute; top: 0; left: -58px; } /* mobile only */ @media only screen and (max-width: 850px) { .faqContactWrapper .faqContact .contactDetails { flex-direction: column; } .faqContactWrapper .faqContact .contactDetails .column {} .faqContactWrapper .faqContact .contactDetails .column:nth-child(2) { padding-top: 0; } .faqContactWrapper .faqContact .contactDetails .column:nth-child(2) ul { margin-top: 0; } } /* overlay settings */ .dialog-flyout-wrapper .faqPageWrapper .faqPage .tabsWrapper .tabs .tabWrapper .content { padding-top: 0; } .dialog-flyout-wrapper .faqPageWrapper .faqPage .tabsWrapper .tabs .tabWrapper .content > .content-asset { display: none; } .dialog-flyout-wrapper .faqContactWrapper .faqContact .contactDetails .column { display: none; } .dialog-flyout-wrapper .faqContactWrapper .faqContact .contactDetails .column:nth-child(1) { display: block; } /**************************/ /* adjusted opening hours */ /**************************/ /* Edited at 02.03.18. */ /* Edited at 08.07.19. Removed LHN. Removed old styling. Converted table to tabs with div tables. */ /* Edited at 10.07.19. Added searchbar icon. */ /* general */ .adjustedOpeningHoursWrapper { max-width: 1300px; margin: 0 auto; } .adjustedOpeningHoursWrapper .adjustedOpeningHours { padding: 0 30px; } /* tabs */ .adjustedOpeningHoursWrapper .adjustedOpeningHours .tabsWrapper {} .adjustedOpeningHoursWrapper .adjustedOpeningHours .tabsWrapper .tabs {} .adjustedOpeningHoursWrapper .adjustedOpeningHours .tabsWrapper .tabs .tabWrapper {} .adjustedOpeningHoursWrapper .adjustedOpeningHours .tabsWrapper .tabs .tabWrapper .tab { background: #f2f2f2; padding: 1.0em; cursor: pointer; position: relative; } .adjustedOpeningHoursWrapper .adjustedOpeningHours .tabsWrapper .tabs .tabWrapper .tab:after { content: ""; width: 20px; height: 20px; position: absolute; top: 50%; right: 20px; background: url('../icons/sprite-left-right-nav-hover.png') -49px -10px no-repeat; transform: translatey(-50%) rotate(90deg); -webkit-transform: translatey(-50%) rotate(90deg); } .adjustedOpeningHoursWrapper .adjustedOpeningHours .tabsWrapper .tabs .tabWrapper[data-tab="active"] .tab:after { background: url('../icons/sprite-left-right-nav-hover.png') -10px -10px no-repeat; } .adjustedOpeningHoursWrapper .adjustedOpeningHours .tabsWrapper .tabs .tabWrapper .tab p { text-align: left; margin: 0; } .adjustedOpeningHoursWrapper .adjustedOpeningHours .tabsWrapper .tabs .tabWrapper[data-tab="active"] .tab { background-color: #dedede; } .adjustedOpeningHoursWrapper .adjustedOpeningHours .tabsWrapper .tabs .tabWrapper .content { height: 0; overflow: hidden; padding-bottom: 10px; } .adjustedOpeningHoursWrapper .adjustedOpeningHours .tabsWrapper .tabs .tabWrapper .content p { margin: 1.0em; } @media only screen and (max-width: 850px) { .adjustedOpeningHoursWrapper .adjustedOpeningHours .tabsWrapper .tabs .tabWrapper .tab { padding: 1.0em 3.5em 1.0em 1.0em; } } /* searchbar */ .aohSearchBarWrapper { margin-bottom: 30px; } .aohSearchBarWrapper .aohSearchBar { position: relative; } .aohSearchBarWrapper .aohSearchBar #aohSearchBar { color: #000; padding: 1.0em; padding-left: 40px; height: 50px; background-repeat: no-repeat; background-image: url('../icons/2019_HL06/searchbar_icon.svg'); background-position: 10px center; background-size: 20px; } .aohSearchBarWrapper .aohSearchBar #aohSearchBar[value=""] { color: #ccc; } .aohSearchBarWrapper .aohSearchBar #aohSearchBar:focus { color: #000; } .aohSearchBarWrapper .aohSearchBar .searchResult { position: absolute; top: 100%; left: 0; width: 100%; max-height: 300px; background-color: rgba(255, 255, 255, 1.0); border: 1px solid #dedede; overflow-y: auto; z-index: 2; display: none; } .aohSearchBarWrapper .aohSearchBar .searchResult .highlight { font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .aohSearchBarWrapper .aohSearchBar .searchResult a { text-decoration: none; } .aohSearchBarWrapper .aohSearchBar .searchResult a p { margin: 0; padding: 1.0em; cursor: pointer; color: #000; border-bottom: 1px solid #f2f2f2; } .aohSearchBarWrapper .aohSearchBar .searchResult a:last-child p { border-bottom: 0; } .aohSearchBarWrapper .aohSearchBar .searchResult a p .categoryLabel { float: right; color: #ccc; } @media only screen and (min-width: 850px) { .aohSearchBarWrapper .aohSearchBar .searchResult a p:hover { background-color: #CBECFF; } } @media only screen and (max-width: 850px) { .aohSearchBarWrapper .aohSearchBar .searchResult { font-size: 14px; } .aohSearchBarWrapper .aohSearchBar .searchResult a p { padding: 0.25em 1.0em; } .aohSearchBarWrapper .aohSearchBar .searchResult a p .categoryLabel { display: none; } .aohSearchBarWrapper .aohSearchBar .searchResult a:first-child p { padding-top: 0.5em; } .aohSearchBarWrapper .aohSearchBar .searchResult a:last-child p { padding-bottom: 0.5em; } } /* tables */ .adjustedOpeningHoursWrapper .adjustedOpeningHours .table { display: table; margin: 10px; width: calc(100% - 20px); } .adjustedOpeningHoursWrapper .adjustedOpeningHours .tableHead { display: table-header-group; } .adjustedOpeningHoursWrapper .adjustedOpeningHours .tableBody { display: table-row-group; } .adjustedOpeningHoursWrapper .adjustedOpeningHours .tableRow { display: table-row; } .adjustedOpeningHoursWrapper .adjustedOpeningHours .tableRow:nth-child(odd) { background-color: #f2f2f2; } .adjustedOpeningHoursWrapper .adjustedOpeningHours .tableCell { display: table-cell; padding: 5px; width: 50%; } /* Remove LHN */ .folderid-adjusted-opening-hours #secondary { display: none; } .folderid-adjusted-opening-hours #primary.primary-content { width: 100%; float: none; } .folderid-adjusted-opening-hours .pt_customer-service .container { max-width: 100%; padding: 0; } .folderid-adjusted-opening-hours .pt_customer-service .container .wrapper-primary { float: none; } .folderid-adjusted-opening-hours #main .top-container { max-width: 1600px; padding: 0 30px; margin: 0 auto; } /*******************/ /* stores overview */ /*******************/ /* Added at 29.09.21. */ /* Edited at 11.11.22. Added phonenumbers overview. */ /* Edited at 15.02.23. Added some styling to phonenumbers overview. */ /* trigger on storelocator page */ .storesOverviewTrigger { float: left; } /* general */ .storesOverviewWrapper { max-width: 1300px; margin: 0 auto; } .storesOverviewWrapper .storesOverview { padding: 0 30px; } .storesOverviewWrapper .storesOverview .indicator { padding: 0.25em 1.0em; position: relative; margin-bottom: 3px; width: auto; color: #000; cursor: default; } .storesOverviewWrapper .storesOverview .indicator p { margin: 0; font-weight: 900; } .storesOverviewWrapper .storesOverview .storeWrapper { margin-left: 1.0em; } .storesOverviewWrapper .storesOverview .storeWrapper .store {} .storesOverviewWrapper .storesOverview .storeWrapper .store a { display: inline-block; background: #fff; padding: 0.25em 1.0em; position: relative; margin-bottom: 3px; color: #000; text-decoration: none; } /* phonenumbers */ .phoneNumbersOverviewWrapper {} .phoneNumbersOverviewWrapper .phoneNumbersOverview {} .phoneNumbersOverviewWrapper .phoneNumbersOverview .indicator { padding: 0.25em 1.0em; position: relative; margin-bottom: 3px; width: auto; color: #000; cursor: default; } .phoneNumbersOverviewWrapper .phoneNumbersOverview .indicator p { margin: 0; font-weight: 900; } .phoneNumbersOverviewWrapper .phoneNumbersOverview .storeWrapper { margin-left: 1.0em; } .phoneNumbersOverviewWrapper .phoneNumbersOverview .storeWrapper:after { content: ''; display: block; width: 100%; height: 1px; background: #dedede; margin: 5px 0; } .phoneNumbersOverviewWrapper .phoneNumbersOverview .storeWrapper .store {} .phoneNumbersOverviewWrapper .phoneNumbersOverview .storeWrapper .store a { display: inline-block; background: #fff; padding: 0.25em 1.0em; position: relative; margin-bottom: 3px; color: #000; text-decoration: none; } .phoneNumbersOverviewWrapper .phoneNumbersOverview .storeWrapper .store a svg { max-width: 16px; max-height: 16px; margin-right: 5px; } /*************/ /* brandbook */ /*************/ /* Added at 18.02.21. */ /* Edited at 19.02.21. Added styling. Removed old styling. */ /* Edited at 25.02.21. Fixed h2 heading. Not uppercase. */ /* Edited at 10.03.21. Added changes to timeline carousel on desktop. */ /* Edited at 18.03.21. Added color 'goud'. */ /* Edited at 30.03.21. Updated styling for added slide to timeline. */ /* Edited at 19.10.22. Updated styling for replatforming. */ /* layout */ .brandbookWrapper { background-color: #eae9e6;} .brandbookWrapper .dark { background-color: #cdccc8; } .brandbookWrapper #stack-03 { background-color: #d8c9b7; padding: 70px 0; } .brandbookWrapper #stack-04 .textContainerWrapper .textContainer { padding: 21% 3% 3% 64%; } @media only screen and (min-width : 1600px){ .brandbookWrapper #stack-04 .textContainerWrapper { min-height: 940px; } } @media only screen and (min-width : 1024px) and (max-width : 1600px){ .brandbookWrapper #stack-04 .textContainerWrapper { min-height: 58vw; } } .brandbookWrapper .light { background-color: #f5f4f3; } .brandbookWrapper .brandbookContent { max-width: 1600px; margin: 0 auto; position: relative; } .brandbookWrapper .brandbookContent .imageMap.brandbookParentLayer .imgHolder.light{ background-color: #fff; } .brandbookWrapper .brandbookContent .imageMap.brandbookParentLayer .imgHolder.dark{ background-color: #eae9e6; } .brandbookWrapper .brandbookContent .imageMap.brandbookChildLayer { padding: 2rem 2rem 0 2rem; } .brandbookWrapper .brandbookContent .imageMap.brandbookChildLayer .imgHolder.light { background-color: #fff; } .brandbookWrapper .brandbookContent .imageMap.brandbookChildLayer .imgHolder.dark { background-color: #eae9e6; } .brandbookWrapper .brandbookContent .categoryMainGridTile.full.middle { margin: 0 auto; } .brandbookWrapper .brandbookContent .categoryMainGridTile.full.wrapped { padding: 15px 30px; } .brandbookWrapper .brandbookContent .categoryMainGridTile.half.wrapped { padding: 0 30px; } .brandbookWrapper .brandbookContent .categoryMainGridTile.full > .categoryMainSlider {margin: 0;} /* typography */ .brandbookWrapper .brandbookContent h1 { font-size: 80px; } .brandbookWrapper .brandbookContent h2 { font-size: 40px; } .brandbookWrapper .brandbookContent h1, .brandbookWrapper .brandbookContent h2, .brandbookWrapper .brandbookContent h3, .brandbookWrapper .brandbookContent h4, .brandbookWrapper .brandbookContent h5, .brandbookWrapper .brandbookContent h6, .brandbookWrapper .brandbookContent p { margin: 0; } .brandbookWrapper .brandbookContent .flex .h1, .brandbookWrapper .brandbookContent .flex h2, .brandbookWrapper .brandbookContent .flex h3, .brandbookWrapper .brandbookContent .flex h4, .brandbookWrapper .brandbookContent .flex h5, .brandbookWrapper .brandbookContent .flex h6, .brandbookWrapper .brandbookContent .flex p { padding: 0; } .brandbookWrapper .brandbookContent h1, .brandbookWrapper .brandbookContent h2, .brandbookWrapper .brandbookContent h3, .brandbookWrapper .brandbookContent h4, .brandbookWrapper .brandbookContent h5, .brandbookWrapper .brandbookContent h6 { padding: 0; } .brandbookWrapper .brandbookContent p { padding: 1rem 0 0 0; } .brandbookWrapper .brandbookContent p.bodycopy.none { padding: 0 !important; margin: 0 !important; } .brandbookWrapper .brandbookContent h1.heading.lowercase, .brandbookWrapper .brandbookContent h2.heading.lowercase, .brandbookWrapper .brandbookContent h3.heading.lowercase, .brandbookWrapper .brandbookContent h4.heading.lowercase, .brandbookWrapper .brandbookContent h5.heading.lowercase, .brandbookWrapper .brandbookContent h6.heading.lowercase { text-transform: none !important; } .brandbookWrapper .brandbookContent span.subtitle { font-size: 15px; } .brandbookWrapper .brandbookContent span.subtitle.uppercase { text-transform: uppercase; } .brandbookWrapper .brandbookContent ul.narrow { padding: 0 1rem; } /* colors */ .brandbookWrapper .brandbookContent .lichtGroen { color: #05AE42; } .brandbookWrapper .brandbookContent .groen { color: #788a73; } .brandbookWrapper .brandbookContent .paars { color: #673472; } .brandbookWrapper .brandbookContent .violet { color: #b6a1b8; } .brandbookWrapper .brandbookContent .oranje { color: #d19138; } .brandbookWrapper .brandbookContent .donkeroranje { color: #cf765c; } .brandbookWrapper .brandbookContent .lichtblauw { color: #719dc6; } .brandbookWrapper .brandbookContent .blauw { color: #0750a4; } .brandbookWrapper .brandbookContent .goud { color: #B0885A; } /* images */ .brandbookWrapper .brandbookContent .categoryMainGridTile.full > .imageMap { margin: 0; } .brandbookWrapper .brandbookContent img.imageRight { float: right; margin: 15px 0 0 30px; } /* mobile only */ @media only screen and (max-width : 850px){ /* layout */ .brandbookWrapper #stack-03 { padding: 30px ​0; } .brandbookWrapper .brandbookContent div.hSpace.brandbook {margin-top: 1rem;} /* typography */ .brandbookWrapper .brandbookContent h1 { font-size: 50px; } .brandbookWrapper .brandbookContent h2 { font-size: 32px; } /* images */ .brandbookWrapper .brandbookContent img.imageRight { margin: 20px 0 20px 20px; width: 50%; } } /* timeline carousel */ .brandbookWrapper .cycle-custom-pager { bottom: 7%; width: calc(100% - 60px); } .brandbookWrapper .cycle-custom-pager:before { content: ''; position: absolute; display: block; top: calc(50% - 0.5px); left: 50%; width: 355px; height: 1px; background-color: #fff; -webkit-transform: translatex(-50%); transform: translatex(-50%); } .brandbookWrapper .cycle-custom-pager .dot-container { margin: 0 10px; } .brandbookWrapper .cycle-custom-pager .dot-container .dot { position: relative; background-color: #fff; } .brandbookWrapper .cycle-custom-pager .dot-container .dot:after { display: block; opacity: 0; position: absolute; top: 100%; left: 50%; -webkit-transform: translatex(-50%); transform: translatex(-50%); transition: transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; font-family: 'Futura PT W01 Heavy', arial, sans-serif; color: #B0885A; } .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(1) .dot:after { content: '1962'; } .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(2) .dot:after { content: '1986'; } .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(3) .dot:after { content: '1994'; } .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(4) .dot:after { content: '1999'; } .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(5) .dot:after { content: '2009'; } .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(6) .dot:after { content: '2010'; } .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(7) .dot:after { content: '2014'; } .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(8) .dot:after { content: '2017'; } .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(9) .dot:after { content: '2020'; } .brandbookWrapper .cycle-custom-pager .dot-container.cycle-pager-active .dot { background-color: #B0885A; } .brandbookWrapper .cycle-custom-pager .dot-container.cycle-pager-active .dot:after { opacity: 1; top: 135%; } @media only screen and (min-width: 850px) { /* tweak carousel */ .brandbookWrapper #stack-03 .categoryMainSlider.cycle-slideshow .cycle-carousel-wrap { margin-left: 33.33% !important; } .brandbookWrapper #stack-03 .categoryMainSlider.cycle-slideshow .cycle-carousel-wrap .cycle-slide .imageMap { -webkit-transition: all .8s ease-in-out; transition: transition: all .8s ease-in-out; } .brandbookWrapper #stack-03 .categoryMainSlider.cycle-slideshow .cycle-carousel-wrap .cycle-slide:not(.cycle-slide-active) .imageMap { max-width: 50%; margin: 10% auto; } } @media only screen and (max-width: 850px) { .brandbookWrapper .cycle-custom-pager:before { width: 236px; } .brandbookWrapper .cycle-custom-pager .dot-container { margin: 0 2.5px; } } /*********/ /* ocapi */ /*********/ /* Added at 01.06.18. */ /* Edited at 14.08.19. Moved from category to folder. Added page for products. */ /* Edited at 26.08.20. Rebuilt table + styling for category view. */ /* Edited at 09.12.21. Updated forms wrapper. */ /* Edited at 13.01.22. Added 'promoted products'. */ /* Edited at 02.02.22. Replaced menu hover effect with class active. */ /* Edited at 19.10.22. Edited styling for replatforming. */ /* Edited at 21.04.23. Fixed responsiveness. */ .ocapiPageWrapper { width: 100%; max-width: 1600px; margin: 0 auto; } .ocapiPageWrapper .ocapiPage { padding: 0 30px; } .ocapiPageWrapper#ocapiCategories { overflow-x: scroll; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiMenuWrapper { position: fixed; top: 0; right: 0; z-index: 99; height: 100%; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiMenuWrapper .ocapiMenu { position: absolute; width: 100%; height: 100%; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiMenuWrapper .ocapiMenu .ocapiMenuTrigger { position: absolute; top: 57px; right: 6px; cursor: pointer; z-index: 1; padding: 12px; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiMenuWrapper .ocapiMenu .ocapiMenuTrigger .ocapiMenuTriggerIcon { width: 16px; height: 14px; display: flex; flex-direction: column; justify-content: space-between; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiMenuWrapper .ocapiMenu .ocapiMenuTrigger .ocapiMenuTriggerIcon > div { width: 100%; height: 2px; background-color: #000; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiMenuWrapper .ocapiMenu .ocapiMenuTrigger p { color: #000; font-weight: bold; text-transform: uppercase; font-size: 14px; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiMenuWrapper .ocapiMenu .ocapiMenuContent { position: fixed; width: calc(100% - 150px); top: 0; right: 0; transform: translatex(100%); height: 100%; background: #f2f2f2; padding: 70px 10px 20px 10px; box-sizing: border-box; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; overflow-y: scroll; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiMenuWrapper.active .ocapiMenu .ocapiMenuContent { transform: translatex(0); } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiMenuWrapper.active .ocapiMenu .ocapiMenuContent .formElementsWrappers { display: flex; flex-direction: row; align-items: flex-start; } /* categories */ .ocapiPageWrapper#ocapiCategories .ocapiPage {} .ocapiPageWrapper#ocapiCategories .ocapiPage .formElementsWrapper { width: calc(33.33% - 20px); padding: 0 10px; } .ocapiPageWrapper#ocapiCategories .ocapiPage .formElementsWrapper:nth-child(2) { width: calc(66.66% - 20px); } .ocapiPageWrapper#ocapiCategories .ocapiPage .formElementsWrapper .formElements {} .ocapiPageWrapper#ocapiCategories .ocapiPage .formElementsWrapper .formElements .col-1-1, .ocapiPageWrapper#ocapiCategories .ocapiPage .formElementsWrapper .formElements .col-1-1-1 { display: flex; flex-direction: row; } .ocapiPageWrapper#ocapiCategories .ocapiPage .formElementsWrapper .formElements .col-1-1 .formElement { width: 50%; } .ocapiPageWrapper#ocapiCategories .ocapiPage .formElementsWrapper .formElements .col-1-1-1 .formElement { width: 33.33%; } .ocapiPageWrapper#ocapiCategories .ocapiPage .formElementsWrapper .formElements .col-1-1-1 .formElement:nth-child(2) { width: calc(33.3% - 10px); margin-left: 5px; margin-right: 5px; } .ocapiPageWrapper#ocapiCategories .ocapiPage .formElementsWrapper .formElements .formElement { margin: 10px 0 0 0; } .ocapiPageWrapper#ocapiCategories .ocapiPage .formElementsWrapper .formElements .formElement .sbHolder { height: 40px; } .ocapiPageWrapper#ocapiCategories .ocapiPage .formElementsWrapper .formElements .formElement a.sbSelector { height: 40px; line-height: 40px; } .ocapiPageWrapper#ocapiCategories .ocapiPage .formElementsWrapper .formElements .formElement input[type='text'] { width: 100%; } .ocapiPageWrapper#ocapiCategories .ocapiPage .formElementsWrapper .formElements .formElement select { padding: 3px 5px; height: 40px; border-radius: 3px; } .ocapiPageWrapper#ocapiCategories .ocapiPage .formElementsWrapper .formElements .formElement textarea { display: block; width: 100%; white-space: nowrap; overflow: auto; } .ocapiPageWrapper#ocapiCategories .ocapiPage .formElementsWrapper .formElements .formElement textarea[name="result"] { height: 800px; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper {} .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse {} .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table { width: 100%; margin: 0; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr { width: 100%; margin: 0; cursor: pointer; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr.selected { background: #6EC1FF; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr.active { background: #409EE3; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr.selected.active { background: #8ACDFF; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr:hover td { background: rgba(138, 205, 255, 0.5); } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr th, .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr td { text-align: left; background: none; padding: 5px 0 2px; font-family: 'Lucida Console', Monaco, monospace; font-size: 12px; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr th { font-weight: bold; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr th:nth-child(1), .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(1) { display: none; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(2) { width: 30%; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(3), .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(4), .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(5), .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(6) {} .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(7) { width: 100%; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr.level_2 td { padding-left: 15px; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr.level_2 td:first-child { padding-left: 0; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr.level_3 td { padding-left: 30px; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr.level_3 td:first-child { padding-left: 0; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr.level_4 td { padding-left: 45px; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr.level_4 td:first-child { padding-left: 0; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr.level_5 td { padding-left: 60px; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr.level_5 td:first-child { padding-left: 0; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr.level_6 td { padding-left: 75px; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr.level_6 td:first-child { padding-left: 0; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr td.id { z-index: 2; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr td.name { z-index: 1; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr td span.name_holder { white-space: nowrap; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr td span.name_holder.undefined { color: #ff0000; } .ocapiPageWrapper#ocapiCategories .ocapiPage .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(3) span.name_holder { font-weight: bold; } /* fix */ .folderid-ocapi-categories .content-page .main-content-wrapper { flex-direction: initial; justify-content: flex-start; } /* products */ .ocapiPageWrapper#ocapiProducts .ocapiPage {} .ocapiPageWrapper#ocapiProducts .ocapiPage .formElementsWrapper { background: #f2f2f2; margin-bottom: 20px; } .ocapiPageWrapper#ocapiProducts .ocapiPage .formElementsWrapper .formElements { padding: 30px; } .ocapiPageWrapper#ocapiProducts .ocapiPage .formElementsWrapper .formElements .formElement { margin: 10px 0 0 10px; } .ocapiPageWrapper#ocapiProducts .ocapiPage .formElementsWrapper .formElements .formElement input[type='text'] { width: 100%; } .ocapiPageWrapper#ocapiProducts .ocapiPage .ocapiResponseWrapper {} .ocapiPageWrapper#ocapiProducts .ocapiPage .ocapiResponseWrapper .ocapiResponse {} .ocapiPageWrapper#ocapiProducts .ocapiPage .ocapiResponseWrapper .ocapiResponse .productTile { padding: 20px 0; border-bottom: 1px solid #dedede; } .ocapiPageWrapper#ocapiProducts .ocapiPage .ocapiResponseWrapper .ocapiResponse .productTile:nth-child(odd) {} .ocapiPageWrapper#ocapiProducts .ocapiPage .ocapiResponseWrapper .ocapiResponse .productTile:nth-child(even) {} .ocapiPageWrapper#ocapiProducts .ocapiPage .ocapiResponseWrapper .ocapiResponse .productTile h4.heading { margin: 0 auto 10px; } .ocapiPageWrapper#ocapiProducts .ocapiPage .ocapiResponseWrapper .ocapiResponse .productTile .images { display: flex; flex-wrap: nowrap; flex-direction: row; } .ocapiPageWrapper#ocapiProducts .ocapiPage .ocapiResponseWrapper .ocapiResponse .productTile .images img { width: calc(10% - 10px); margin: 0 5px; } .ocapiPageWrapper#ocapiProducts .ocapiPage .ocapiResponseWrapper .ocapiResponse .productTile .images img:first-child { margin-left: 0; } .ocapiPageWrapper#ocapiProducts .ocapiPage .ocapiResponseWrapper .ocapiResponse .productTile .images img:last-child { margin-right: 0; } .ocapiPageWrapper#ocapiProducts .ocapiPage .ocapiResponseWrapper .ocapiResponse .productTile .hotspotsCodeWrapper { display: flex; flex-wrap: nowrap; flex-direction: row; } .ocapiPageWrapper#ocapiProducts .ocapiPage .ocapiResponseWrapper .ocapiResponse .productTile .hotspotsCodeWrapper > div { width: 50%; } .ocapiPageWrapper#ocapiProducts .ocapiPage .ocapiResponseWrapper .ocapiResponse .productTile .hotspotsCodeWrapper > div textarea[readonly] { padding: 5px; height: 33px; font-family: 'Lucida Console', Monaco, monospace; font-size: 10px; } /* promoted products */ .ocapiPageWrapper#ocapiPromotedProducts .ocapiPage {} .ocapiPageWrapper#ocapiPromotedProducts .ocapiPage .formElementsWrapper { background: #f2f2f2; margin-bottom: 20px; } .ocapiPageWrapper#ocapiPromotedProducts .ocapiPage .formElementsWrapper .formElements { padding: 30px; } .ocapiPageWrapper#ocapiPromotedProducts .ocapiPage .formElementsWrapper .formElements .formElement { margin: 10px 0 0 10px; } .ocapiPageWrapper#ocapiPromotedProducts .ocapiPage .formElementsWrapper .formElements .formElement input[type='text'] { width: 100%; } .ocapiPageWrapper#ocapiPromotedProducts .ocapiPage .ocapiResponseWrapper {} .ocapiPageWrapper#ocapiPromotedProducts .ocapiPage .ocapiResponseWrapper .ocapiResponse {} /************/ /* WE is ME */ /************/ /* Added at 23.10.18. Remove LHN. */ /* Edited at 24.10.18. */ .folderid-we-is-me #secondary { display: none; } .folderid-we-is-me #primary.primary-content { width: 100%; float: none; } .folderid-we-is-me .pt_customer-service .container { max-width: 1600px; } /**********/ /* WE box */ /**********/ /* Added at 16.10.18. Remove LHN. */ /* Edited at 22.10.18. */ /* Edited at 10.07.19. Added searchbar. */ /* Edited at 15.07.19. Moved searchbar. Added Whatsapp. */ /* Edited at 20.11.19. Added 'advantages' icon. */ .folderid-we-box #secondary, .folderid-we-box-preview #secondary, .folderid-we-box-intake #secondary, .folderid-we-box-confirmation #secondary, .folderid-we-box-privacy-policy #secondary, .folderid-we-box-general-conditions #secondary { display: none; } .folderid-we-box #primary.primary-content, .folderid-we-box-preview #primary.primary-content, .folderid-we-box-intake #primary.primary-content, .folderid-we-box-confirmation #primary.primary-content, .folderid-we-box-privacy-policy #primary.primary-content, .folderid-we-box-general-conditions #primary.primary-content { width: 100%; float: none; } .folderid-we-box .pt_customer-service .container, .folderid-we-box-preview .pt_customer-service .container, .folderid-we-box-intake .pt_customer-service .container, .folderid-we-box-confirmation .pt_customer-service .container, .folderid-we-box-privacy-policy .pt_customer-service .container, .folderid-we-box-general-conditions .pt_customer-service .container { max-width: 1600px; } .weBoxAdvantage { display: flex; flex-direction: row; align-items: start; } .weBoxAdvantage .weBoxAdvantageIcon { width: 50px; height: 50px; position: relative; margin: 15px 10px 15px 0; background-color: #85AA88; border-radius: 50%; } .weBoxAdvantage .weBoxAdvantageIcon:after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 20px; border: 3px solid #fff; border-top: 0; border-left: 0; transform: translate(-40%,-60%) rotate(45deg); } .weBoxAdvantage .captionWrapper { width: calc(100% - 60px); } @media only screen and (max-width: 850px) { .weBoxAdvantage { align-items: center; } } .weBoxQuestionsContactWrapper {} .weBoxQuestionsContactWrapper .weBoxQuestionsContact { padding: 0 70px; } .weBoxQuestionsContactWrapper .weBoxQuestionsContact .content { display: flex; flex-direction: row; flex-wrap: nowrap; } .weBoxQuestionsContactWrapper .weBoxQuestionsContact .content > div { background-color: #9C9FA8; padding: 20px 80px; width: 50%; } .weBoxQuestionsContactWrapper .weBoxQuestionsContact .content > div:nth-child(2) { display: flex; align-items: center; justify-content: center; background-image: url('../icons/2019_HL06/whatsapp.svg?$staticlink$'); background-repeat: no-repeat; background-position: calc(100% - 20px) center; } .weBoxQuestionsContactWrapper .weBoxQuestionsContact .content p.bodycopy { color: #fff; } .weBoxQuestionsContactWrapper .weBoxQuestionsContact .content p.bodycopy a { color: #fff; } .weBoxQuestionsContactWrapper .weBoxQuestionsContact .bttns.ctas { justify-content: center; margin: 15px auto; } .weBoxQuestionsContactWrapper .weBoxQuestionsContact .bttns.ctas .cta { font-size: 15px; } @media only screen and (min-width: 1024px) { .weBoxQuestionsContactWrapper .weBoxQuestionsContact .content > div:nth-child(1) { margin-right: 10px; } .weBoxQuestionsContactWrapper .weBoxQuestionsContact .content > div:nth-child(2) { margin-left: 10px; background-size: 65px; } } @media only screen and (max-width: 1024px) { .weBoxQuestionsContactWrapper .weBoxQuestionsContact { padding: 0; } .weBoxQuestionsContactWrapper .weBoxQuestionsContact .content { flex-direction: column; } .weBoxQuestionsContactWrapper .weBoxQuestionsContact .content > div { padding: 20px; width: 100%; } .weBoxQuestionsContactWrapper .weBoxQuestionsContact .content > div:nth-child(1) { margin-bottom: 10px; } .weBoxQuestionsContactWrapper .weBoxQuestionsContact .content > div:nth-child(2) { margin-top: 10px; background-size: 40px; } .weBoxQuestionsContactWrapper .weBoxQuestionsContact .content > div:nth-child(2) p.bodycopy { text-align: center; } .weBoxQuestionsContactWrapper .weBoxQuestionsContact .bttns.ctas { margin: 5px auto; } } /* searchbar */ .weBoxSearchBarWrapper { margin-bottom: 30px; } .weBoxSearchBarWrapper .weBoxSearchBar { position: relative; } .weBoxSearchBarWrapper .weBoxSearchBar #weBoxSearchBar { color: #000; padding: 1.0em; padding-left: 40px; height: 50px; background-repeat: no-repeat; background-image: url('../icons/2019_HL06/searchbar_icon.svg'); background-position: 10px center; background-size: 20px; } .weBoxSearchBarWrapper .weBoxSearchBar #weBoxSearchBar[value=""] { color: #ccc; } .weBoxSearchBarWrapper .weBoxSearchBar #weBoxSearchBar:focus { color: #000; } .weBoxSearchBarWrapper .weBoxSearchBar .searchResult { position: absolute; top: 100%; left: 0; width: 100%; max-height: 300px; background-color: rgba(255, 255, 255, 1.0); border: 1px solid #dedede; overflow-y: auto; z-index: 2; display: none; } .weBoxSearchBarWrapper .weBoxSearchBar .searchResult .highlight { font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .weBoxSearchBarWrapper .weBoxSearchBar .searchResult a { text-decoration: none; } .weBoxSearchBarWrapper .weBoxSearchBar .searchResult a p { margin: 0; padding: 1.0em; cursor: pointer; color: #000; border-bottom: 1px solid #f2f2f2; } .weBoxSearchBarWrapper .weBoxSearchBar .searchResult a:last-child p { border-bottom: 0; } .weBoxSearchBarWrapper .weBoxSearchBar .searchResult a p .categoryLabel { float: right; color: #ccc; } @media only screen and (min-width: 850px) { .weBoxSearchBarWrapper .weBoxSearchBar .searchResult a p:hover { background-color: #CBECFF; } } @media only screen and (max-width: 850px) { .weBoxSearchBarWrapper .weBoxSearchBar .searchResult { font-size: 14px; } .weBoxSearchBarWrapper .weBoxSearchBar .searchResult a p { padding: 0.25em 1.0em; } .weBoxSearchBarWrapper .weBoxSearchBar .searchResult a p .categoryLabel { display: none; } .weBoxSearchBarWrapper .weBoxSearchBar .searchResult a:first-child p { padding-top: 0.5em; } .weBoxSearchBarWrapper .weBoxSearchBar .searchResult a:last-child p { padding-bottom: 0.5em; } } /* whatsapp */ .weBoxWhatsappWrapper {} .weBoxWhatsappWrapper .weBoxWhatsapp {} .weBoxWhatsappWrapper .weBoxWhatsapp p {} @media only screen and (min-width: 850px) {} @media only screen and (max-width: 850px) { .weBoxQuestionsContactWrapper .weBoxQuestionsContact .content > div:nth-child(2) .weBoxWhatsappWrapper { padding: 0 50px; } } .weBoxConditionsPrivacyPolicy { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; } .weBoxConditionsPrivacyPolicy > div { width: 100%; } @media only screen and (min-width: 1024px) { .weBoxConditionsPrivacyPolicy > div:nth-child(1) { margin-right: 20px; } .weBoxConditionsPrivacyPolicy > div:nth-child(1) h1.heading { text-align: right; } } @media only screen and (max-width: 1024px) { .weBoxConditionsPrivacyPolicy { flex-direction: column; } .weBoxConditionsPrivacyPolicy > div:nth-child(1) h1.heading { text-align: center; } .weBoxConditionsPrivacyPolicy > div:nth-child(2) .bttns.ctas { justify-content: center; } } /***********/ /* WE care */ /***********/ /* Edited at 18.06.19. */ /* Edited at 26.07.19. Updated font styling to apply general typography. */ /* Edited at 09.09.19. Adjustments in colour and setup. */ /* Edited at 03.10.19. Added image/slide. */ /* Edited at 21.10.19. Added margin to online magazine. */ /* Edited at 31.10.19. Updated header styles. */ /* Edited at 29.11.19. Added image. */ /* Edited at 16.12.19. Updated some conflicting classnames. */ /* Edited at 05.06.20. Added section variation 'drk'. */ /* Edited at 23.06.20. Added max width to magazine. */ /* Edited at 30.06.20. Added csr report (magazine) changes. */ /* Edited at 23.07.20. Replaced all icons. */ /* Edited at 05.03.21. Added image. */ /* Edited at 25.11.21. Replaced classnames. */ /* Edited at 06.01.22. Added EN variant of materials page. */ /* Edited at 07.07.22. Added image for carousel. */ /* Edited at 14.10.22. Added overflow hidden on carouselwrappers. */ /* Edited at 27.02.23. Updated styling to fit replatforming. */ .weCarePageWrapper {} .weCarePageWrapper .weCarePage {} .weCarePageWrapper .weCarePage [data-magazine] { margin-bottom: 50px; max-width: 67.5%; margin: 0 auto; } .weCarePageWrapper .weCarePage .csr-report[data-magazine] { max-width: 100%; margin: 50px auto; } .weCarePageWrapper .weCarePage .csr-report[data-magazine] .magazine .page { height: 80%; } .weCarePageWrapper .weCarePage .weCareHeadWrapper {} .weCarePageWrapper .weCarePage .weCareHeadWrapper.gry { background-color: #f2f2f2; background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_GREY_EN.jpg'); background-position: center; background-size: 50%; } .weCarePageWrapper .weCarePage .weCareHeadWrapper.snd { background-color: #D3CBC4; } .weCarePageWrapper .weCarePage .weCareHeadWrapper.grn { background-color: #05AE42; } .weCarePageWrapper .weCarePage .weCareHeadWrapper.drk { background-color: #1d1d1d; } .weCarePageWrapper .weCarePage .weCareHeadWrapper .weCareHead { display: flex; flex-wrap: wrap; align-items: flex-start; flex-direction: column; padding: 80px 0; width: 100%; max-width: 1600px; margin: 0 auto; position: relative; z-index: 1; } .weCarePageWrapper .weCarePage .weCareHeadWrapper .weCareHead .globalIcon { display: block; margin: 0 auto; } .weCarePageWrapper .weCarePage .weCareHeadWrapper .weCareHead .headTextWrapper { width: 70%; margin: 0 auto; } .weCarePageWrapper .weCarePage .weCareHeadWrapper.gry .weCareHead .headTextWrapper {} .weCarePageWrapper .weCarePage .weCareHeadWrapper .weCareHead .headTextWrapper .headText {} .weCarePageWrapper .weCarePage .weCareHeadWrapper .weCareHead .headTextWrapper .headText h3.heading, .weCarePageWrapper .weCarePage .weCareHeadWrapper .weCareHead .headTextWrapper .headText p.bodycopy { text-align: center; } .weCarePageWrapper .weCarePage .weCareHeadWrapper.gry .weCareHead .headTextWrapper .headText h3.heading, .weCarePageWrapper .weCarePage .weCareHeadWrapper.gry .weCareHead .headTextWrapper .headText p.bodycopy { color: #05AE42; } .weCarePageWrapper .weCarePage .weCareHeadWrapper.snd .weCareHead .headTextWrapper .headText h3.heading, .weCarePageWrapper .weCarePage .weCareHeadWrapper.snd .weCareHead .headTextWrapper .headText p.bodycopy, .weCarePageWrapper .weCarePage .weCareHeadWrapper.grn .weCareHead .headTextWrapper .headText h3.heading, .weCarePageWrapper .weCarePage .weCareHeadWrapper.grn .weCareHead .headTextWrapper .headText p.bodycopy, .weCarePageWrapper .weCarePage .weCareHeadWrapper.drk .weCareHead .headTextWrapper .headText h3.heading, .weCarePageWrapper .weCarePage .weCareHeadWrapper.drk .weCareHead .headTextWrapper .headText p.bodycopy { color: #fff; } .weCarePageWrapper .weCarePage .weCareHeadWrapper.drk .weCareHead .headTextWrapper .headText h3.heading { text-align: center; } /* desktop only */ @media only screen and (min-width : 850px){ .weCarePageWrapper .weCarePage .weCareHeadWrapper .weCareHead .headLogoWrapper { max-width: 150px; } .weCarePageWrapper .weCarePage .weCareHeadWrapper .weCareHead .headLogoWrapper .headLogo .imgHolder { background-position: center center; background-size: 175%; } .weCarePageWrapper .weCarePage .weCareHeadWrapper .weCareHead .headTextWrapper .headText h3.heading { margin-top: 0; } } /* mobile only */ @media only screen and (max-width : 850px){ .weCarePageWrapper .weCarePage .weCareHeadWrapper .weCareHead { padding: 40px 20px; } .weCarePageWrapper .weCarePage .weCareHeadWrapper .weCareHead .headLogoWrapper { max-width: 150px; } .weCarePageWrapper .weCarePage .weCareHeadWrapper .weCareHead .headTextWrapper { width: 100%; } } .weCarePageWrapper .weCarePage .weCareBodyWrapper {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody { width: 100%; max-width: 1600px; margin: 0 auto; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section { max-width: 1310px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section h3.heading { color: #05AE42; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.gry { background-color: #f2f2f2; padding: 0 30px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.drk article h4.heading { text-align: center; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.drk article h4.heading, .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.drk article p.bodycopy { color: #fff; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.drk { background-color: #1d1d1d; padding: 0 30px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.white { background-color: #fff; padding: 0; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.tableOfContents {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.tableOfContents .tabWrapper { border: 1px solid #05AE42; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.tableOfContents .tabWrapper .tab { cursor: pointer; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.tableOfContents .tabWrapper .tab p { text-align: center; font-family: 'Futura PT W01 Heavy', arial, sans-serif; font-size: 22px; text-transform: uppercase; margin: 15px 0; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.tableOfContents .tabWrapper .tab p .icon { display: inline-block; width: 22px; margin-right: 8px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.tableOfContents .tabWrapper .tab p .icon span { display: block; width: 100%; height: 3px; margin-bottom: 3px; border-radius: 2px; background-color: #000; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.tableOfContents .tabWrapper .tab p .icon span:last-child { margin-bottom: 0; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.tableOfContents .tabWrapper .content {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.tableOfContents .tabWrapper .content ul { margin: 10px 0 20px; padding: 0 30px; list-style-type: none; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.tableOfContents .tabWrapper .content ul li { border-top: 1px solid #dedede; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.tableOfContents .tabWrapper .content ul li a { display: block; padding: 10px 5px; text-decoration: none; color: #05AE42; font-size: 0.8em; font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-transform: uppercase; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article h3 {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article p.bttns.ctas a.cta { padding: 0 26px; background-color: #05AE42; color: #fff; text-transform: uppercase; font-size: 12px; line-height: 3.5em; font-family: 'Futura PT W01 Heavy', arial, sans-serif; margin: 0 5px; border-radius: 2px; text-decoration: none; transition: all ease .3s; -moz-transition: all ease .3s; -webkit-transition: all ease .3s; display: inline-block; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article p.bttns.ctas a.cta u { text-decoration: none; border-bottom: 0; padding-bottom: 0; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article p.ctas.dwnlds a.cta { padding: 0 26px; background-color: #fff; border: 1px solid #000; line-height: 3.5em; margin: 0 0 1.5em; border-radius: 2px; text-decoration: none; transition: all ease .3s; -moz-transition: all ease .3s; -webkit-transition: all ease .3s; display: block; width: 100%; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article p.ctas.dwnlds a.cta u { text-decoration: none; border-bottom: 0; padding-bottom: 0; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article #LP_LB_HL06_WECAREABOUT_VISION_MISSION { z-index: 1; position: relative; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article #LP_LB_HL06_WECAREABOUT_VISION_MISSION .slideWrapper { background-color: #fff; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article #LP_LB_HL06_WECAREABOUT_VISION_MISSION .slideWrapper .slide {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article #LP_LB_HL05_WECAREABOUT_SUPPLYCHAIN_BETTERWORKPLACE .imageMap .imgHolder { background-image: url('../../Landing pages/_static/we-care-about/2020_HL05/LP_LB_HL05_WECAREABOUT_SUPPLYCHAIN_BETTERWORKPLACE_EN.jpg'); padding-top: 131.75%; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article #LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_LIVINGWAGE .imageMap .imgHolder { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_LIVINGWAGE_EN.jpg'); padding-top: 131.75%; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article #LP_LB_HL05_WECAREABOUT_MAKINGBETTERPRODUCTS_COTTON .imageMap .imgHolder { background-image: url('../../Landing pages/_static/we-care-about/2020_HL05/LP_LB_HL05_WECAREABOUT_MAKINGBETTERPRODUCTS_COTTON_EN.jpg'); padding-top: 97.05%; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article #LP_LB_HL06_WECAREABOUT_BETTERPRODUCTS_RAWMATERIALS .imageMap .imgHolder { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_BETTERPRODUCTS_RAWMATERIALS_EN.jpg'); padding-top: 97.05%; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article #LP_LB_HL06_WECAREABOUT_BETTERPRODUCTS_BEPI .imageMap .imgHolder { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_BETTERPRODUCTS_BEPI_EN.jpg'); padding-top: 97.15%; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article #LP_LB_HL06_WECAREABOUT_BUSINESSSUSTAINABILITY_EMPLOYEES .imageMap .imgHolder { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_BUSINESSSUSTAINABILITY_EMPLOYEES_EN.jpg'); padding-top: 123.55%; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article #LP_LB_HL06_WECAREABOUT_BUSINESSSUSTAINABILITY_REDUCEWASTE .imageMap .imgHolder { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_BUSINESSSUSTAINABILITY_REDUCEWASTE_EN.jpg'); padding-top: 89.45%; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article #LP_LB_HL06_WECAREABOUT_GIVINGTOSOCIETY_RECYCLE .imageMap .imgHolder { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_GIVINGTOSOCIETY_RECYCLE_EN.jpg'); padding-top: 95.5%; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg { max-width: 1310px; margin: 0 auto; background-repeat: no-repeat; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL05_WECAREABOUT_MAKINGBETTERPRODUCTS2_COTTON { background-image: url('../../Landing pages/_static/we-care-about/2020_HL05/LP_LB_HL05_WECAREABOUT_MAKINGBETTERPRODUCTS2_COTTON_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL11_WECAREABOUT_DSFW { background-image: url('../../Landing pages/_static/we-care-about/2020_HL11/LP_LB_HL11_WECAREABOUT_DSFW_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL13_WECAREABOUT_SUPPLYCHAIN_TRANSPARENCYPLEDGE { background-image: url('../../Landing pages/_static/we-care-about/2019_HL13/LP_LB_HL13_WECAREABOUT_SUPPLYCHAIN_TRANSPARENCYPLEDGE_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_CHILDLABOR { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_CHILDLABOR_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_FACTORIES2 { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_FACTORIES2_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_HOMEPAGE_RECYCLEWITHUS_ANIMALWELFARE { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_HOMEPAGE_RECYCLEWITHUS_ANIMALWELFARE_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL08_WECAREABOUT_IMPROVINGSUPPLYCHAIN_DUTCHAGREEMENT { background-image: url('../../Landing pages/_static/we-care-about/2020_HL08/LP_LB_HL08_WECAREABOUT_IMPROVINGSUPPLYCHAIN_DUTCHAGREEMENT_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL04_WECAREABOUT_SUPPLYCHAIN_CALL_TO_ACTION { background-image: url('../../Landing pages/_static/we-care-about/2021_HL04/LP_LB_HL04_WECAREABOUT_SUPPLYCHAIN_CALL_TO_ACTION_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_PRIDE_SPOKEN_WORD_NAOMI { background-image: url('../../Landing pages/_static/we-care/2022_HL06/LP_LB_HL06_PRIDE_SPOKEN_WORD_NAOMI_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_CODEOFCONDUCT { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_CODEOFCONDUCT_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_FACTORIES { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_FACTORIES_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_PURCHASING { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_PURCHASING_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_BETTERPRODUCTS_ANIMALWELFARE { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_BETTERPRODUCTS_ANIMALWELFARE_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_BETTERPRODUCTS_CIRCULARTEXTILES { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_BETTERPRODUCTS_CIRCULARTEXTILES_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_BETTERPRODUCTS_ORGANICCOTTON { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_BETTERPRODUCTS_ORGANICCOTTON_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_BUSINESSSUSTAINABILITY_CODEOFETHICS { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_BUSINESSSUSTAINABILITY_CODEOFETHICS_EN.jpg'); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chaptersWrapper .chapters { display: flex; flex-wrap: wrap; width: 100%; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chapterWrapper {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chapterWrapper .chapter { position: relative; z-index: 1; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chapterWrapper .chapter .globalIcon { display: block; margin: 0 auto; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chapterWrapper .chapter h4.heading { color: #000; margin-top: 0; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper { max-width: 1310px; margin: 0 auto; z-index: 1; position: relative; overflow: hidden; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper.grn { background-color: #05AE42; background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_DIDYOUKNOW_EN.svg'); background-size: cover; background-position: center; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper.gry { background-color: #f2f2f2; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper.drk { background-color: #1d1d1d; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .bgImg {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .slideHeadWrapper {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .slideHeadWrapper .slideHead { padding: 50px 0; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .slideHeadWrapper .slideHead h3.heading { margin: 0; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper.gry .carousel .slideWrapper .slide .slideHeadWrapper .slideHead h3.heading { color: #05AE42; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper.drk .carousel .slideWrapper .slide .slideHeadWrapper .slideHead h3.heading { color: #fff; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .slideBodyWrapper { background-color: #f2f2f2; background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_GREY_EN.jpg'); background-position: center; background-size: 50%; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .slideBodyWrapper .slideBody { display: flex; align-items: center; width: 100%; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .slideBodyWrapper .slideBody h3.heading { width: 100%; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper.grn .carousel .slideWrapper .slide .slideBodyWrapper .slideBody h3.heading { color: #05AE42; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper.grn .carousel .slideWrapper .slide .slideBodyWrapper .slideBody h3.heading span { color: #05AE42; } /* desktop only */ @media only screen and (min-width : 850px){ .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .quote { width: 100%; max-width: 66.66%; margin: 0 auto; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section { margin: 60px auto; padding: 0 60px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.gry, .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.drk { padding: 60px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article[data-columns="2"] { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 4.0em; -moz-column-gap: 4.0em; column-gap: 4.0em; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article[data-columns="2"] > p.bodycopy:nth-child(2) { margin-top: 0; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article[data-static-columns="2"] { display: flex; flex-wrap: wrap; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article[data-static-columns="2"] .column { width: calc(50% - 2.0em); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article[data-static-columns="2"] .column:nth-child(1) { margin-right: 2.0em; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article[data-static-columns="2"] .column:nth-child(2) { margin-left: 2.0em; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article h4.heading { -webkit-column-span: all; -moz-column-span: all; column-span: all; color: #05AE42; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article h4.heading.noColumnSpan { -webkit-column-span: none; -moz-column-span: none; column-span: none; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article h5.heading { color: #05AE42; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article p.bttns.ctas a.cta:hover { background-color: #05AE42; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article #LP_LB_HL06_WECAREABOUT_VISION_MISSION .slideWrapper .slide { padding: 0 60px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article #LP_LB_HL06_WECAREABOUT_VISION_MISSION .slideWrapper .slide p { padding: 0 60px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg { margin: 60px auto; background-size: contain; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg.lft { padding: 80px 0 80px 33.33%; background-position: left; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg.rght { padding: 80px 33.33% 80px 0; background-position: right; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg section { margin: 0; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chaptersWrapper { margin-top: 60px; margin-bottom: 60px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chaptersWrapper .chapters { max-width: 1310px; margin: 0 auto; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chaptersWrapper .chapters .chapterWrapper { width: 50%; padding: 5px; position: relative; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chaptersWrapper .chapters .chapterWrapper:nth-child(1) { padding: 0 5px 5px 0; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chaptersWrapper .chapters .chapterWrapper:nth-child(2) { padding: 0 0 5px 5px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chaptersWrapper .chapters .chapterWrapper:nth-child(3) { padding: 5px 5px 0 0; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chaptersWrapper .chapters .chapterWrapper:nth-child(4) { padding: 5px 0 0 5px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chaptersWrapper .chapters .chapterWrapper .rotatingIconWrapper { position: absolute; bottom: 100%; left: calc(100% + 2.5px); width: 25%; padding-top: 25%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 2; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chaptersWrapper .chapters .chapterWrapper .rotatingIconWrapper div { position: absolute; width: 100%; height: 100%; background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/icon-we-care-about-circle.png'); background-position: bottom; background-size: 100%; background-repeat: no-repeat; -webkit-animation: spin 8s linear infinite; -moz-animation: spin 8s linear infinite; animation: spin 8s linear infinite;} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chapterWrapper .chapter { background-color: #f2f2f2; padding: 40px 60px; height: 100%; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chapterWrapper .chapter p.bttns.ctas a.cta:hover { background-color: #111; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .cycle-slideshow .cycle-custom-pager.general, .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .cycle-slideshow .cycle-custom-pager.inverse { -moz-transform: translate(-50%, -3.0em); -webkit-transform: translate(-50%, -3.0em); transform: translate(-50%, -3.0em); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper.gry { background-image: url('../../Landing pages/_static/we-care-about/2019_HL06/LP_LB_HL06_WECAREABOUT_GREY_EN.jpg'); background-position: center; background-size: 50%; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper.drk { background-color: #1d1d1d; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide { padding: 0 10% 8.0em; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .bgImg { margin: 0 auto; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .bgImg.lft { padding: 80px 0 80px 50%; background-position: left; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .bgImg.rght { padding: 80px 50% 80px 0; background-position: right; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .slideHeadWrapper .slideHead p { line-height: 1em; padding: 2em 0; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .slideBodyWrapper .slideBody { padding: 60px; min-height: 400px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper.grn .carousel .slideWrapper .slide .slideBodyWrapper .slideBody p { max-width: 66.66%; margin: 1.0em auto; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .chapterWrapper .chapter { background-color: transparent; } } /* mobile only */ @media only screen and (max-width : 850px){ .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section { margin: 40px auto; padding: 0 40px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.gry, .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.drk { padding: 40px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.gry.center h4.heading, .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.gry.center p.bodycopy, .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.drk.center h4.heading, .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section.drk.center p.bodycopy { text-align: left; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody section article #LP_LB_HL06_WECAREABOUT_VISION_MISSION .slideWrapper .slide {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg { padding: 80px 30px 0; background-size: 100%; background-position: top; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_CODEOFCONDUCT {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_FACTORIES {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_PURCHASING {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_BETTERPRODUCTS_CIRCULARTEXTILES {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_BETTERPRODUCTS_ORGANICCOTTON {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .bgImg#LP_LB_HL06_WECAREABOUT_BUSINESSSUSTAINABILITY_CODEOFETHICS {} .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chaptersWrapper { margin-bottom: 40px; background-color: #f2f2f2; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chaptersWrapper .chapters { flex-direction: column; padding: 10px 0 40px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chaptersWrapper .chapters .chapterWrapper:after { content: ""; display: block; width: calc(100% - 100px); height: 5px; margin: 0 auto; background-color: #05AE42; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chapterWrapper { width: calc(100% - 40px); margin: 0 auto; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .chapterWrapper .chapter { padding: 40px 20px 30px; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .cycle-slideshow .cycle-custom-pager.general, .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .cycle-slideshow .cycle-custom-pager.inverse { -moz-transform: translate(-50%, -2.5em); -webkit-transform: translate(-50%, -2.5em); transform: translate(-50%, -2.5em); } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide { padding: 0 30px 7.0em; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .bgImg { padding: 200px 30px 0; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .bgImg section { margin: 0; } .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody .carouselWrapper .carousel .slideWrapper .slide .slideBodyWrapper .slideBody { padding: 40px; min-height: 400px; } } .weCarePageWrapper .weCarePage .weCareAboutFooterWrapper {} .weCarePageWrapper .weCarePage .weCareAboutFooterWrapper .weCareAboutFooter {} /* animation */ @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* specific styling */ .folderid-we-care-sustainable-materials .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody, .folderid-we-care-sustainable-materials-en .weCarePageWrapper .weCarePage .weCareBodyWrapper .weCareBody { max-width: 1024px; padding: 30px; } /******************/ /* WE Care global */ /******************/ /* Added at 22.02.23. */ /* Edited at 24.02.23. */ /* Edited at 01.03.23. Updated masonry grid. */ /* Edited at 19.06.23. Added grey background variation and columned articles. */ /* header */ .weCareHeaderWrapper {} .weCareHeaderWrapper .weCareHeader {} .weCareHeaderWrapper .weCareHeader .weCareLogoWrapper {} .weCareHeaderWrapper .weCareHeader .weCareLogoWrapper .weCareLogo { position: relative; z-index: 1; display: flex; flex-direction: row; align-items: center; justify-content: center; } .weCareHeaderWrapper .weCareHeader .weCareLogoWrapper .weCareLogo .imageMap { width: 100%; max-width: 250px; margin: 50px 0; } @media only screen and (max-width : 850px){ .weCareHeaderWrapper .weCareHeader .weCareLogoWrapper .weCareLogo .imageMap { max-width: 200px; margin: 30px 0; } } /* menu */ .weCareMenuWrapper { margin-bottom: 140px; } .weCareMenuWrapper ul.weCareMenu { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0; margin: 0; } .weCareMenuWrapper ul.weCareMenu li.menuItem { list-style-type: none; } .weCareMenuWrapper ul.weCareMenu li.menuItem a { display: flex; justify-content: center; align-items: center; padding: 5px 8px 6px; color: #000; font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-transform: uppercase; margin: 0 5px; } .weCareMenuWrapper ul.weCareMenu li.menuItem a u { text-decoration: none; border-bottom: 2px solid #000; } @media only screen and (max-width : 850px){ .weCareMenuWrapper { margin-bottom: 70px; } .weCareMenuWrapper [data-tab] { cursor: pointer; width: calc(100% - 40px); margin: 0 auto; -webkit-transition: all ease .3s; transition: all ease .3s; } .weCareMenuWrapper [data-tab] [data-tab-trigger] { cursor: pointer; } .weCareMenuWrapper [data-tab] [data-tab-trigger] p { text-align: center; font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-transform: uppercase; padding: 10px 13px; margin: 0; font-size: 12px; border: 1px solid #dedede; border-radius: 2px; -webkit-transition: all ease .3s; transition: all ease .3s; } .weCareMenuWrapper [data-tab="active"] [data-tab-trigger] p { color: #fff; background-color: #05AE42; border: 1px solid #05AE42; } .weCareMenuWrapper [data-tab] [data-tab-trigger] p .icon { display: inline-block; width: 15px; margin-right: 5px; } .weCareMenuWrapper [data-tab] [data-tab-trigger] p .icon span { display: block; width: 100%; height: 2px; margin-bottom: 2px; border-radius: 2px; background-color: #000; } .weCareMenuWrapper [data-tab="active"] [data-tab-trigger] p .icon span { background-color: #fff; } .weCareMenuWrapper [data-tab] [data-tab-trigger] p .icon span:last-child { margin-bottom: 0; } .weCareMenuWrapper [data-tab] [data-tab-content] ul.weCareMenu { flex-direction: column; align-items: flex-start; padding-top: 5px; } .weCareMenuWrapper [data-tab] [data-tab-content] ul.weCareMenu li.menuItem {} .weCareMenuWrapper [data-tab] [data-tab-content] ul.weCareMenu li.menuItem a { margin: 0 5px; } } /* content */ .weCareContentWrapper {} .weCareContentWrapper .weCareContent {} .weCareContentWrapper .weCareContent .heading { color: #05AE42; } .weCareContentWrapper .weCareContent .bttns.ctas .cta { background-color: #05AE42; } .weCareContentWrapper .weCareContent section { max-width: 1310px; margin: 0 auto 140px; } .weCareContentWrapper .weCareContent section.full { max-width: 1600px; } .weCareContentWrapper .weCareContent section.narrow { max-width: 850px; } .weCareContentWrapper .weCareContent section.gry { background-color: #F0EDEB; } .weCareContentWrapper .weCareContent section.general h1.heading, .weCareContentWrapper .weCareContent section.gry h1.heading { color: #000; } .weCareContentWrapper .weCareContent section.general h1.heading, .weCareContentWrapper .weCareContent section.gry h1.heading { margin: 15px 0; } .weCareContentWrapper .weCareContent section.general h2.heading, .weCareContentWrapper .weCareContent section.gry h2.heading { margin: 15px 0; } .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTiles { align-items: center; } .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-2 .gridTileContent, .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-2-2 .gridTileContent, .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-3.merged .gridTileContent, .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-3-3.merged .gridTileContent { padding: 0 30px; } .weCareContentWrapper .weCareContent .staticContent { padding: 0 30px; } .weCareContentWrapper .weCareContent section.general .staticContent{ padding: 0 calc(5% + 30px); } .weCareContentWrapper .weCareContent section.gry .staticContent { padding: calc(5% + 30px); } .weCareContentWrapper .weCareContent .staticContent article { -webkit-column-gap: 2.0em; -moz-column-gap: 2.0em; column-gap: 2.0em; column-fill: balance; -moz-column-fill: balance; -webkit-column-fill: balance; margin: 0 auto 35px; } .weCareContentWrapper .weCareContent .staticContent article[data-columns="2"] { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .weCareContentWrapper .weCareContent .staticContent article[data-columns="3"] { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .weCareContentWrapper .weCareContent .staticContent article:last-child { margin-bottom: 0; } .weCareContentWrapper .weCareContent .staticContent article .columnBreak { break-before: column; } .weCareContentWrapper .weCareContent .staticContent article .heading[data-column-span] { -webkit-column-span: all; -moz-column-span: all; column-span: all; } .weCareContentWrapper .weCareContent .staticContent article p.bodycopy:nth-child(1) { margin-top: 0; } .weCareContentWrapper .weCareContent .staticContent article p.bodycopy:nth-child(2) { margin-top: 0; } .weCareContentWrapper .weCareContent .staticContent .bttns.ctas { justify-content: flex-start; } .weCareContentWrapper .weCareContent .staticContent .bttns.ctas .cta:first-child { margin-left: 0; } @media only screen and (min-width : 1024px){ .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-2 .gridTileContent, .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-2-2 .gridTileContent, .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-3.merged .gridTileContent, .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-3-3.merged .gridTileContent { margin: 0 auto; max-width: 80%; } } @media only screen and (max-width : 1024px){ .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-2 .gridTileContent, .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-2-2 .gridTileContent, .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-3.merged .gridTileContent, .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-3-3.merged .gridTileContent { padding: 0 20px; } } @media only screen and (max-width : 850px){ .weCareContentWrapper .weCareContent section { margin: 0 auto 70px; } .weCareContentWrapper .weCareContent .staticContent article { margin: 0 auto 15px; } .weCareContentWrapper .weCareContent .staticContent article[data-columns="2"] { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } .weCareContentWrapper .weCareContent .staticContent article[data-columns="3"] { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } .weCareContentWrapper .weCareContent .staticContent article .columnBreak { break-before: avoid; } .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-3:not(.merged) { order: 1; } .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-3.merged { order: 2; } .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-3-3:not(.merged) { order: 1; } .weCareContentWrapper .weCareContent .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-3-3.merged { order: 2; } .weCareContentWrapper .weCareContent .staticContent { text-align: left; padding: 0 20px; } .weCareContentWrapper .weCareContent section.general .staticContent, .weCareContentWrapper .weCareContent section.gry .staticContent { padding: 20px; } } /* scroll icon */ .weCareContentWrapper .weCareContent .scrollIconWrapper { justify-content: flex-start; margin-top: 20px; } .weCareContentWrapper .weCareContent .scrollIconWrapper > a { border: 2px solid #05AE42; padding: 21px 8px 14px; border-radius: 30px; } .weCareContentWrapper .weCareContent .scrollIconWrapper > a .scrollIcon:before { border: 2px solid #05AE42; border-top: 0; border-right: 0; transform: translatex(50%) translateY(70%) rotate(-45deg); } .weCareContentWrapper .weCareContent .scrollIconWrapper > a .scrollIcon:after { display: none; } @media only screen and (max-width : 850px){ .weCareContentWrapper .weCareContent .scrollIconWrapper { display: none; } } /* default grid */ .weCareContentWrapper .weCareContent .defaultGridTilesWrapper { position: relative; } .weCareContentWrapper .weCareContent .defaultGridTilesWrapper .defaultGridTiles { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; } .weCareContentWrapper .weCareContent .defaultGridTilesWrapper .defaultGridTiles .gridTileWrapper {} .weCareContentWrapper .weCareContent .defaultGridTilesWrapper .defaultGridTiles .gridTileWrapper .gridTile {} @media only screen and (max-width : 1024px){ .weCareContentWrapper .weCareContent .defaultGridTilesWrapper .defaultGridTiles { grid-template-columns: 1fr 1fr; grid-gap: 20px; } } /* masonry grid (old) */ /* .weCareContentWrapper .weCareContent .masonryGridTilesWrapper { position: relative; column-count: 3; column-gap: 30px; margin: 30px 0; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles { margin: 0 auto; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 30px; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper { display: flex; flex-direction: column; width: 100%; break-inside: avoid-column; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper .gridTile {} .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper .gridTile .gridTileContent { padding: 30px; background-color: #D3CBC4; -webkit-transition: all ease .3s; transition: all ease .3s; transition-delay: .3s; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper .gridTile .gridTileContent .heading { color: #fff; } @media only screen and (max-width : 1024px){ .weCareContentWrapper .weCareContent .masonryGridTilesWrapper { position: relative; column-count: 2; column-gap: 20px; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper { margin: 0 0 20px; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper .gridTile .gridTileContent.active { background-color: #05AE42; } } @media only screen and (min-width : 850px){ .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper .gridTile { cursor: default; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper .gridTile .gridTileContent:hover { background-color: #05AE42; } } @media only screen and (max-width : 850px){ .weCareContentWrapper .weCareContent .masonryGridTilesWrapper { position: relative; column-count: 1; column-gap: 0; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper { margin: 0 0 10px; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper .gridTile .gridTileContent { padding: 20px; } } */ /* masonry grid (new) */ .weCareContentWrapper .weCareContent .masonryGridTilesWrapper { position: relative; margin: 30px 0; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles { margin: 0 auto; display: grid; grid-template-columns: 1fr [box-start] 1fr [box-end] 1fr; grid-template-rows: masonry; grid-gap: 30px; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper { display: flex; flex-direction: column; width: 100%; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper .gridTile {} .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper .gridTile .gridTileContent { padding: 30px; background-color: #D3CBC4; -webkit-transition: all ease .3s; transition: all ease .3s; transition-delay: .3s; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper .gridTile .gridTileContent .heading { color: #fff; } @media only screen and (max-width : 1024px){ .weCareContentWrapper .weCareContent .masonryGridTilesWrapper { position: relative; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles { grid-template-columns: 1fr 1fr; grid-gap: 20px; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper {} .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper .gridTile .gridTileContent.active { background-color: #05AE42; } } @media only screen and (min-width : 850px){ .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper .gridTile { cursor: default; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper .gridTile .gridTileContent:hover { background-color: #05AE42; } } @media only screen and (max-width : 850px){ .weCareContentWrapper .weCareContent .masonryGridTilesWrapper { position: relative; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles { grid-template-columns: 1fr; } .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper {} .weCareContentWrapper .weCareContent .masonryGridTilesWrapper .masonryGridTiles .gridTileWrapper .gridTile .gridTileContent { padding: 20px; } } /* icons */ .weCareIconWrapper { width: 48px; height: 48px; margin-bottom: 20px; } .weCareIconWrapper .weCareIcon { display: block; width: 100%; height: 100%; background-color: #000; } .inverse .weCareIconWrapper .weCareIcon { background-color: #fff; } /*****************/ /* WE care index */ /*****************/ /* Added at 22.02.23. */ /* Edited at 24.02.23. */ /* general */ .weCareIndexWrapper {} .weCareIndexWrapper .weCareIndex {} .weCareIndexWrapper .weCareIndex .weCareIndexBodyWrapper {} .weCareIndexWrapper .weCareIndex .weCareIndexBodyWrapper .weCareIndexBody {} /* tabs */ .weCareIndexWrapper .weCareIndex .tabsWrapper {} .weCareIndexWrapper .weCareIndex .tabsWrapper .tabs {} .weCareIndexWrapper .weCareIndex .tabsWrapper .tabs .tabWrapper {} .weCareIndexWrapper .weCareIndex .tabsWrapper .tabs .tabWrapper {} .weCareIndexWrapper .weCareIndex .tabsWrapper .tabs .tabWrapper .tab { position: relative; cursor: pointer; } .weCareIndexWrapper .weCareIndex .tabsWrapper .tabs .tabWrapper .tab:after { content: ''; display: block; width: 12px; height: 12px; border: 2px solid #000; border-top: 0; border-right: 0; position: absolute; top: 50%; right: 20px; -webkit-transform: translatey(-50%) rotate(-45deg); transform: translatey(-50%) rotate(-45deg); } .weCareIndexWrapper .weCareIndex .tabsWrapper .tabs .tabWrapper[data-tab="active"] .tab:after { border: 2px solid #05AE42; border-top: 0; border-right: 0; -webkit-transform: translatey(-50%) rotate(135deg); transform: translatey(-50%) rotate(135deg); } .weCareIndexWrapper .weCareIndex .tabsWrapper .tabs .tabWrapper .tab .tabTriggerContent { display: flex; flex-direction: row; align-items: center; width: calc(100% - 55px); } .weCareIndexWrapper .weCareIndex .tabsWrapper .tabs .tabWrapper .tab .tabTriggerContent .globalIcon.weCare { display: none; } .weCareIndexWrapper .weCareIndex .tabsWrapper .tabs .tabWrapper .tab .tabTriggerContent .globalIcon:not(.weCare){ display: block; } .weCareIndexWrapper .weCareIndex .tabsWrapper .tabs .tabWrapper .tab .tabTriggerContent h5.heading { color: #000; width: calc(100% - 96px); } .weCareIndexWrapper .weCareIndex .tabsWrapper .tabs .tabWrapper[data-tab="active"] .tab .tabTriggerContent .globalIcon.weCare { display: block; } .weCareIndexWrapper .weCareIndex .tabsWrapper .tabs .tabWrapper[data-tab="active"] .tab .tabTriggerContent .globalIcon:not(.weCare){ display: none; } .weCareIndexWrapper .weCareIndex .tabsWrapper .tabs .tabWrapper[data-tab="active"] .tab .tabTriggerContent h5.heading { color: #05AE42; } .weCareIndexWrapper .weCareIndex .tabsWrapper .tabs .tabWrapper .content { margin-left: 96px; margin-top: -20px; width: calc(100% - 130px); } @media only screen and (max-width : 850px){ .weCareIndexWrapper .weCareIndex .tabsWrapper .tabs .tabWrapper .tab .tabTriggerContent h5.heading { margin-bottom: 0; } } /* stack 01 */ .weCareIndexWrapper .weCareIndex h1.heading { font-size: 24px; } .weCareIndexWrapper .weCareIndex h1.heading span.lrg { display: inline-block; font-size: 150px; margin-bottom: 10px; } .weCareIndexWrapper .weCareIndex h1.heading span.gry { color: #D3CBC4; } @media only screen and (max-width : 850px){ .weCareIndexWrapper .weCareIndex h1.heading { font-size: 13px; } .weCareIndexWrapper .weCareIndex h1.heading span.lrg { font-size: 70px; margin-bottom: 5px; } } /* stack 02 (replacement) */ @media only screen and (min-width : 1024px){ .weCareIndexWrapper .weCareIndex #stack-02 .categoryPageGridTileWrapper.col-1-3 .imgHolder { padding-top: 156.5%; } } @media only screen and (max-width : 1024px){ .weCareIndexWrapper .weCareIndex #stack-02 .categoryPageGridTileWrapper.col-1-3 .imgHolder { padding-top: 75%; background-size: cover; } } /* stack 03 */ .weCareIndexWrapper .weCareIndex #stack-03 .staticContent { text-align: center; } .weCareIndexWrapper .weCareIndex .carouselWrapper { max-width: 1310px; margin: 30px auto 0; z-index: 1; position: relative; overflow: hidden; } .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel {} .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel .slideWrapper {} .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel .slideWrapper:after { content: ""; display: block; width: 100%; height: 45px; } .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel .slideWrapper .slide section { background-color: #fff; padding: 0; } .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel .slideWrapper .slide section.white { background-color: #fff; padding: 0; } .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel .slideWrapper .slide .bgImg { max-width: 1310px; margin: 0 auto; background-repeat: no-repeat; background-size: contain; } .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel .slideWrapper .slide .slideContentWrapper { display: flex; flex-direction: column; align-items: center; height: 100%; } .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel .slideWrapper .slide .slideContentWrapper .slideContent { background-color: #fff; padding: 30px; text-align: center; } .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel .cycle-slideshow .cycle-custom-pager { width: 100%; } @media only screen and (min-width : 850px){ .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel .slideWrapper .slide { margin: 0 10%; } .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel .slideWrapper .slide .bgImg { margin: 0 auto; } .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel .slideWrapper .slide .bgImg.lft { padding: 80px 0 80px 50%; background-position: left; } .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel .slideWrapper .slide .bgImg.rght { padding: 80px 50% 80px 0; background-position: right; } } @media only screen and (max-width : 850px){ .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel .slideWrapper .slide {} .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel .slideWrapper .slide .bgImg { padding: 200px 30px 0; } .weCareIndexWrapper .weCareIndex .carouselWrapper .carousel .slideWrapper .slide .slideContentWrapper .slideContent { padding: 20px 20px 0; text-align: left; } } /* stack 05 */ @media only screen and (min-width : 1024px){ .weCareIndexWrapper .weCareIndex #stack-05 .categoryPageGridTileWrapper.col-1-3 .imgHolder { padding-top: 146.35%; } } @media only screen and (max-width : 1024px){ .weCareIndexWrapper .weCareIndex #stack-05 .categoryPageGridTileWrapper.col-1-3 .imgHolder { padding-top: 75%; background-size: cover; } } /* stack 06 */ .weCareIndexWrapper .weCareIndex #stack-06 .heading { color: #fff; } .weCareIndexWrapper .weCareIndex #stack-06 p.specificTypography { font-family: "Futura PT W01 Bold", arial, sans-serif; font-size: 54px; line-height: 54px; } .weCareIndexWrapper .weCareIndex #stack-06 p.specificTypography span.outline { color: transparent; -webkit-text-stroke: 1.5px #fff; text-stroke: 1.5px #fff; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(1) .categoryPageGridTileWrapper.col-1-2 { width: 30%; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(1) .categoryPageGridTileWrapper.col-1-2 .imgHolder { padding-top: 127.2%; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(1) .categoryPageGridTileWrapper.col-2-2 { width: 70%; background-color: #D3CBC4; margin-bottom: 10px; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(1) .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile { display: flex; align-items: center; height: 100%; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(1) .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .gridTileContent { padding: 0 30px; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(2) .categoryPageGridTileWrapper.col-1-2 { width: 70%; background-color: #D3CBC4; margin-bottom: 10px; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(2) .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile { display: flex; align-items: center; height: 100%; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(2) .categoryPageGridTileWrapper.col-2-2 { width: 30%; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(2) .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile .gridTileContent { padding: 0 30px; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(2) .categoryPageGridTileWrapper.col-2-2 .imgHolder { padding-top: 127.55%; } @media only screen and (max-width : 1024px){ .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(1) .categoryPageGridTileWrapper.col-1-2, .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(1) .categoryPageGridTileWrapper.col-2-2, .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(2) .categoryPageGridTileWrapper.col-1-2, .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(2) .categoryPageGridTileWrapper.col-2-2 { width: 100%; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(1) .categoryPageGridTileWrapper.col-1-2 .imgHolder { padding-top: 75%; background-size: cover; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(1) .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile .gridTileContent { padding: 30px 20px; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(2) .categoryPageGridTileWrapper.col-1-2 { order: 2; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(2) .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile .gridTileContent { padding: 30px 20px; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(2) .categoryPageGridTileWrapper.col-2-2 { order: 1; } .weCareIndexWrapper .weCareIndex #stack-06 .categoryPageGridTilesWrapper:nth-child(2) .categoryPageGridTileWrapper.col-2-2 .imgHolder { padding-top: 75%; background-size: cover; } } /* stack 07 */ .weCareIndexWrapper .weCareIndex #stack-07 { margin-bottom: 70px; } /******************/ /* WE Care People */ /******************/ /* Added at 28.02.23. */ /* stack 02 */ @media only screen and (min-width : 1024px){ .weCarePeopleWrapper#we-care-people .weCarePeopleBodyWrapper .weCarePeopleBody #stack-02 .categoryPageGridTileWrapper.col-1-3 .imgHolder { padding-top: 112.1%; } } @media only screen and (max-width : 1024px){ .weCarePeopleWrapper#we-care-people .weCarePeopleBodyWrapper .weCarePeopleBody #stack-02 .categoryPageGridTileWrapper.col-1-3 .imgHolder { padding-top: 75%; background-size: cover; } } /* stack 03 */ @media only screen and (min-width : 1024px){ .weCarePeopleWrapper#we-care-people .weCarePeopleBodyWrapper .weCarePeopleBody #stack-03 .categoryPageGridTileWrapper.col-3-3 .imgHolder { padding-top: 112.1%; } } @media only screen and (max-width : 1024px){ .weCarePeopleWrapper#we-care-people .weCarePeopleBodyWrapper .weCarePeopleBody #stack-03 .categoryPageGridTileWrapper.col-3-3 .imgHolder { padding-top: 75%; background-size: cover; } } /* stack 04 */ @media only screen and (min-width : 1024px){ .weCarePeopleWrapper#we-care-people .weCarePeopleBodyWrapper .weCarePeopleBody #stack-04 .categoryPageGridTileWrapper.col-1-3 .imgHolder { padding-top: 112.1%; } } @media only screen and (max-width : 1024px){ .weCarePeopleWrapper#we-care-people .weCarePeopleBodyWrapper .weCarePeopleBody #stack-04 .categoryPageGridTileWrapper.col-1-3 .imgHolder { padding-top: 75%; background-size: cover; } } /* stack 05 */ .weCarePeopleWrapper#we-care-people .weCarePeopleBodyWrapper .weCarePeopleBody #stack-05 { margin-bottom: 70px; } /******************/ /* WE Care Planet */ /******************/ /* Added at 28.02.23. */ /* stack 02 */ @media only screen and (min-width : 1024px){ .weCarePlanetWrapper#we-care-planet .weCarePlanetBodyWrapper .weCarePlanetBody #stack-02 .categoryPageGridTileWrapper.col-1-3 .imgHolder { padding-top: 112.1%; } } @media only screen and (max-width : 1024px){ .weCarePlanetWrapper#we-care-planet .weCarePlanetBodyWrapper .weCarePlanetBody #stack-02 .categoryPageGridTileWrapper.col-1-3 .imgHolder { padding-top: 75%; background-size: cover; } } /* stack 03 */ @media only screen and (min-width : 1024px){ .weCarePlanetWrapper#we-care-planet .weCarePlanetBodyWrapper .weCarePlanetBody #stack-03 .categoryPageGridTileWrapper.col-3-3 .imgHolder { padding-top: 112.1%; } } @media only screen and (max-width : 1024px){ .weCarePlanetWrapper#we-care-planet .weCarePlanetBodyWrapper .weCarePlanetBody #stack-03 .categoryPageGridTileWrapper.col-3-3 .imgHolder { padding-top: 75%; background-size: cover; } } /* stack 04 */ @media only screen and (min-width : 1024px){ .weCarePlanetWrapper#we-care-planet .weCarePlanetBodyWrapper .weCarePlanetBody #stack-04 .categoryPageGridTileWrapper.col-1-3 .imgHolder { padding-top: 112.1%; } } @media only screen and (max-width : 1024px){ .weCarePlanetWrapper#we-care-planet .weCarePlanetBodyWrapper .weCarePlanetBody #stack-04 .categoryPageGridTileWrapper.col-1-3 .imgHolder { padding-top: 75%; background-size: cover; } } /* stack 05 */ @media only screen and (min-width : 1024px){ .weCarePlanetWrapper#we-care-planet .weCarePlanetBodyWrapper .weCarePlanetBody #stack-05 .categoryPageGridTileWrapper.col-3-3 .imgHolder { padding-top: 112.1%; } } @media only screen and (max-width : 1024px){ .weCarePlanetWrapper#we-care-planet .weCarePlanetBodyWrapper .weCarePlanetBody #stack-05 .categoryPageGridTileWrapper.col-3-3 .imgHolder { padding-top: 75%; background-size: cover; } } */ /* stack 06 */ .weCarePlanetWrapper#we-care-planet .weCarePlanetBodyWrapper .weCarePlanetBody #stack-06 { margin-bottom: 70px; } /******************/ /* WE Care Guides */ /******************/ /* Added at 24.02.23. */ .weCareGuideBodyWrapper {} .weCareGuideBodyWrapper .weCareGuideBody {} .weCareGuideBodyWrapper .weCareGuideBody #stack-01 {} .weCareGuideBodyWrapper .weCareGuideBody h1.heading { font-size: 54px; line-height: 54px; } .weCareGuideBodyWrapper .weCareGuideBody h1.heading span.book { font-family: "Futura PT W01 Book", arial, sans-serif; } @media only screen and (max-width : 850px){ .weCareGuideBodyWrapper .weCareGuideBody h1.heading { font-size: 22px; line-height: 22px; } } /**********************/ /* Product Care Guide */ /**********************/ /* Added at 27.02.23. */ .weCareGuideWrapper#we-care-guides .defaultGridTilesWrapper .defaultGridTiles .gridTileWrapper .gridTile .imgHolder { padding-top: 98.4%; } .weCareGuideWrapper#we-care-guides .defaultGridTilesWrapper .defaultGridTiles .gridTileWrapper .gridTile .heading { color: #fff; } .weCareGuideWrapper#we-care-guides .defaultGridTilesWrapper .defaultGridTiles .gridTileWrapper .gridTile .heading span.large { font-size: 54px; line-height: 54px; } @media only screen and (max-width : 1024px){ .weCareGuideWrapper#we-care-guides .defaultGridTilesWrapper .defaultGridTiles .gridTileWrapper .gridTile .imgHolder { padding-top: 75%; background-size: cover; } .weCareGuideWrapper#we-care-guides .defaultGridTilesWrapper .defaultGridTiles .gridTileWrapper .gridTile .heading {} .weCareGuideWrapper#we-care-guides .defaultGridTilesWrapper .defaultGridTiles .gridTileWrapper .gridTile .heading span.large { font-size: 28px; line-height: 28px; } } /* stack 01 */ .weCareGuideWrapper#we-care-guides .weCareGuideBodyWrapper .weCareGuideBody #stack-01 .staticContent { max-width: 850px; margin: 0 auto; } @media only screen and (min-width : 1024px){ .weCareGuideWrapper#we-care-guides .weCareGuideBodyWrapper .weCareGuideBody #stack-01 .staticContent { text-align: center; } .weCareGuideWrapper#we-care-guides .weCareGuideBodyWrapper .weCareGuideBody #stack-01 .scrollIconWrapper { justify-content: center; } } /* stack 03 */ .weCareGuideWrapper#we-care-guides .weCareGuideBodyWrapper .weCareGuideBody #stack-03 { margin-bottom: 70px; } /**************************/ /* WE Care Guide - Cotton */ /**************************/ /* Added at 01.03.23. */ /* stack 03 */ .weCareGuideWrapper#we-care-guide-cotton .weCareGuideBodyWrapper .weCareGuideBody #stack-03 { margin-bottom: 70px; } /********************************/ /* WE Care Guide - Denim (kids) */ /********************************/ /* Added at 24.02.23. */ /* stack 03 */ .weCareGuideWrapper#we-care-guide-denim-k .weCareGuideBodyWrapper .weCareGuideBody #stack-03 { margin-bottom: 70px; } /**************************/ /* WE Care Guide - Linen */ /**************************/ /* Added at 01.03.23. */ /* stack 03 */ .weCareGuideWrapper#we-care-guide-linen .weCareGuideBodyWrapper .weCareGuideBody #stack-03 { margin-bottom: 70px; } /**************************/ /* WE Care Guide - Wool */ /**************************/ /* Added at 01.03.23. */ /* stack 03 */ .weCareGuideWrapper#we-care-guide-wool .weCareGuideBodyWrapper .weCareGuideBody #stack-03 { margin-bottom: 70px; } /*****************************/ /* WE Care Guide - Polyester */ /*****************************/ /* Added at 01.03.23. */ /* stack 03 */ .weCareGuideWrapper#we-care-guide-polyester .weCareGuideBodyWrapper .weCareGuideBody #stack-03 { margin-bottom: 70px; } /***************************************/ /* WE Care Guide - Denim (men & women) */ /***************************************/ /* Added at 24.02.23. */ /* stack 03 */ .weCareGuideWrapper#we-care-guide-denim-mw .weCareGuideBodyWrapper .weCareGuideBody #stack-03 { margin-bottom: 70px; } /***************************/ /* WE Care Guide - General */ /***************************/ /* Added at 24.02.23. */ /* stack 05 */ .weCareGuideWrapper#we-care-guide-general .weCareGuideBodyWrapper .weCareGuideBody #stack-05 { margin-bottom: 70px; } /**********************/ /* general conditions */ /**********************/ ol.ol { counter-increment: parent; } ol.counter { padding: 0; margin: 0; } ol.counter > li { list-style: none; } ol.counter li ol { counter-reset: child; } ol.counter li ol > li { display: block; position: relative; } ol.counter li ol > li:before { content: counter(parent)"." counter(child)". "; counter-increment: child; position: absolute; right: calc(100% + 4px); } /*****************************/ /* exclusive collection page */ /*****************************/ .exclusiveCollectionWrapper {} .exclusiveCollectionWrapper .exclusiveCollection {} .exclusiveCollectionWrapper .exclusiveCollection .store {} /*************************/ /* special opening hours */ /*************************/ /* Added at 17.03.20. */ /* Edited at 22.04.20. Added staticBlocks. */ /* Edited at 23.04.20. Added 2 columns to staticBlocks. */ /* Edited at 06.05.20. Fixed bug. */ /* Edited at 17.08.20. Updated background-color. */ .folderid-special-opening-hours {} .folderid-special-opening-hours .staticBlocks { display: flex; flex-direction: row; justify-content: flex-start; } .folderid-special-opening-hours .staticPage { background-color: #9CB0B2; padding: 20px; } .folderid-special-opening-hours .staticPage .content { max-width: 1540px; margin: 0 auto; } .folderid-special-opening-hours .staticPage .content h1.heading, .folderid-special-opening-hours .staticPage .content h4.heading, .folderid-special-opening-hours .staticPage .content h6.heading, .folderid-special-opening-hours .staticPage .content p.bodycopy, .folderid-special-opening-hours .staticPage .content ul.bodycopy { max-width: 850px; margin-left: auto; margin-right: auto; } .folderid-special-opening-hours .staticPageBottom { background-color: #BFCBB6; padding: 20px; } .folderid-special-opening-hours .staticPageBottom .content { max-width: 1540px; margin: 0 auto; } .folderid-special-opening-hours .staticPageBottom .content h1.heading, .folderid-special-opening-hours .staticPageBottom .content h4.heading, .folderid-special-opening-hours .staticPageBottom .content h6.heading, .folderid-special-opening-hours .staticPageBottom .content p.bodycopy, .folderid-special-opening-hours .staticPageBottom .content ul.bodycopy { max-width: 500px; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 850px){ .folderid-special-opening-hours .staticBlocks.col--2 > div:nth-child(1) { width: calc(50% - 5px); margin: 0 5px 10px 0; } .folderid-special-opening-hours .staticBlocks.col--2 > div:nth-child(2) { width: calc(50% - 5px); margin: 0 0 10px 5px; } .folderid-special-opening-hours .staticBlocks.col--3 > div:nth-child(1) { width: calc(33.33% - 5px); margin: 0 5px 10px 0; } .folderid-special-opening-hours .staticBlocks.col--3 > div:nth-child(2) { width: calc(33.33% - 10px); margin: 0 5px 10px 5px; } .folderid-special-opening-hours .staticBlocks.col--3 > div:nth-child(3) { width: calc(33.33% - 5px); margin: 0 0 10px 5px; } } @media only screen and (max-width: 850px){ .folderid-special-opening-hours .staticBlocks { flex-direction: column; } .folderid-special-opening-hours .staticBlocks.col--2 > div, .folderid-special-opening-hours .staticBlocks.col--3 > div { width: 100%; } .folderid-special-opening-hours .staticBlocks.col--2 > div:nth-child(1), .folderid-special-opening-hours .staticBlocks.col--2 > div:nth-child(2), .folderid-special-opening-hours .staticBlocks.col--3 > div:nth-child(1), .folderid-special-opening-hours .staticBlocks.col--3 > div:nth-child(2), .folderid-special-opening-hours .staticBlocks.col--3 > div:nth-child(3) { margin: 0 0 10px 0; } } /*********************/ /* member get member */ /*********************/ /* Added at 25.11.20. */ #MGM_TITLE { background-color: #F0EFEB; padding: 40px 0 20px; } #MGM_TITLE h1.heading { margin: 0 auto; } #MGM_TITLE p.bodycopy:last-child { margin-bottom: 0; } #MGM_STEPBYSTEP { background-color: #F0EFEB; padding: 0 0 30px; } #MGM_STEPBYSTEP .incloseWrapper { max-width: 1280px; margin: 0 auto; } #MGM_STEPBYSTEP p.bodycopy {} #MGM_INTRO { max-width: 1200px; padding: 0 40px; margin: 0 auto; } #MGM_FORM { max-width: 1200px; padding: 40px 10px; margin: 0 auto; } #MGM_FORM form {} #MGM_FORM form .formElements { display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; } #MGM_FORM form .formElements .formElement {} #MGM_FORM form label[generated="true"] { padding: 10px; background-color: #FFDE88; border: 1px solid #F4BD2D; position: relative; text-align: left; margin: 7px 0 0 0; display: inline-block; float: none; } #MGM_FORM form label[generated="true"]:before, #MGM_FORM form label[generated="true"]:after { content: ""; position: absolute; border: 10px solid transparent; width: 0; height: 0; } #MGM_FORM form label[generated="true"]:before { left: 10px; top: -20px; border-left-color: transparent; border-bottom-color: #F4BD2D; } #MGM_FORM form label[generated="true"]:after { left: 10px; top: -19px; border-left-color: transparent; border-bottom-color: #FFDE88; } #MGM_FORM form input[type="submit"] { padding: 15px 26px; background-color: #000; color: #fff; text-transform: uppercase; font-size: 12px; font-family: 'Futura PT W01 Heavy', arial, sans-serif; border: none; appearance: none; -webkit-appearance: none; cursor: pointer; } #MGM_FORM form .formElements .formElement .checkBox label, #MGM_FORM form .formElements .formElement .checkBox .label { display: inline-block; font-weight: normal; cursor: pointer; } #MGM_FORM form .formElements .formElement .checkBox label .labelHolder.chckBx { display: inline-block; } #MGM_FORM form .formElements .formElement .checkBox .checkBoxHolder { width: 25px; height: 25px; cursor: pointer; display: inline-block; background-color: #f2f2f2; position: relative; margin-right: 10px; -ms-transform: translatey(5px); -webkit-transform: translatey(5px); -moz-transform: translatey(5px); -o-transform: translatey(5px); transform: translatey(5px); } #MGM_FORM form .formElements .formElement .checkBox .checkBoxHolder:after { content: ""; position: absolute; display: none; } #MGM_FORM form .formElements .formElement .checkBox .checkBoxHolder:after { left: 9px; top: 5px; width: 7px; height: 12px; border: 1px solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #MGM_FORM form .formElements .formElement .checkBox input:checked ~ .checkBoxHolder { background-color: #000; } #MGM_FORM form .formElements .formElement .checkBox input:checked ~ .checkBoxHolder:after { display: block; } #MGM_HOWDOESITWORK { background-color: #F0EFEB; padding: 40px 0 10px; margin-bottom: 10px; } #MGM_HOWDOESITWORK h3.heading { margin: 0 auto; } #MGM_HOWDOESITWORK p.bodycopy:last-child { margin-bottom: 0; } #MGM_HOWDOESITWORK .content { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; padding: 0 0 40px; } #MGM_HOWDOESITWORK .content .col { width: calc(50% - 20px); margin: 0 10px 10px; } #MGM_CONFIRMATION { max-width: 1200px; padding: 40px 10px; margin: 0 auto; } #MGM_CONFIRMATION .personalLinkInvitation { margin: 0 40px; padding: 30px; background-color: #f2f2f2; } @media only screen and (min-width: 500px) and (max-width: 1024px){ #MGM_STEPBYSTEP .categoryPageGridTilesWrapper .imageMap .areas .flex.top { justify-content: center; } } @media only screen and (max-width: 850px){ #MGM_STEPBYSTEP p.bodycopy { font-size: 12px; line-height: 15px; } #MGM_HOWDOESITWORK .content { flex-direction: column; } #MGM_HOWDOESITWORK .content .col { width: calc(100% - 40px); margin: 0 20px 10px; } #MGM_HOWDOESITWORK .content .col:after { content: ""; display: block; margin: 40px auto 0; width: 70%; height: 2px; background-color: #BB6D28; } #MGM_HOWDOESITWORK .content .col:last-child:after { display: none; } } /*********/ /* press */ /*********/ /* Added at 14.01.21. */ /* Edited at 15.01.21. Moved some styling from page to here. */ /* Edited at 30.03.21. Updated some styling. */ /* Edited at 09.11.22. Updated styling for copy. */ .pressPageWrapper {} .pressPageWrapper .pressPage {} .pressPageWrapper .pressPage .introWrapper { margin: 70px 0; } .pressPageWrapper .pressPage .contactDetailsWrapper {} .pressPageWrapper .pressPage .contactDetailsWrapper .content { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; background-color: #f2f2f2; min-height: 350px; } .pressPageWrapper .pressPage .uprImageBankWrapper { margin: 20px 0 70px; } .pressPageWrapper .pressPage .archiveItemsWrapper {} .pressPageWrapper .pressPage .archiveItemsWrapper h4.heading { margin-bottom: 0; } .pressPageWrapper .pressPage .archiveItemsWrapper p.bodycopy { margin-top: 10px; } .pressPageWrapper .pressPage .archiveItemsWrapper .archiveItems { display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; background-color: #f2f2f2; } .pressPageWrapper .pressPage .archiveItemsWrapper .archiveItems .archiveItem { width: 100%; max-width: 25%; } .pressPageWrapper .pressPage .archiveItemsWrapper .archiveItems .archiveItem .imgHolder { padding-top: 100%; } .pressPageWrapper .pressPage .archiveItemsWrapper .archiveItems .archiveItem .flex.left { padding: 0 20px 20px; } @media only screen and (max-width: 850px){ .pressPageWrapper .pressPage .introWrapper { margin: 35px 0; } .pressPageWrapper .pressPage .uprImageBankWrapper { margin: 0 0 35px 0; } .pressPageWrapper .pressPage .archiveItemsWrapper {} .pressPageWrapper .pressPage .archiveItemsWrapper .archiveItems .archiveItem { max-width: 50%; } .pressPageWrapper .pressPage .archiveItemsWrapper .archiveItems .archiveItem .flex.left { padding: 0 10px 10px; } } /*******************/ /* styling session */ /*******************/ /* Added at 14.01.21. */ /* Edited at 03.02.21. Added comingSoon sticker. */ .stylingSessionPageWrapper {} .stylingSessionPageWrapper .stylingSessionPage {} .stylingSessionPageWrapper .stylingSessionPage > .categoryMainGridTile .bttns.ctas .cta { min-width: 195px; } .stylingSessionPageWrapper .stylingSessionPage .bttns.ctas .cta { background-color: #334867; } .stylingSessionPageWrapper .stylingSessionPage .introWrapper { margin: 70px 0; } .stylingSessionPageWrapper .stylingSessionPage .adviceOptionsWrapper { margin: 70px 0; } .stylingSessionPageWrapper .stylingSessionPage .adviceOptionsWrapper .content { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px 0; background-color: #f3eeeb; min-height: 350px; position: relative; z-index: 1; } .stylingSessionPageWrapper .stylingSessionPage .adviceOptionsWrapper .content p.bodycopy:first-child { margin: 0; } .stylingSessionPageWrapper .stylingSessionPage .adviceOptionsWrapper .content p.bodycopy:last-child { margin: 0; } .stylingSessionPageWrapper .stylingSessionPage .adviceBenefitsWrapper { margin: 70px 0; } .stylingSessionPageWrapper .stylingSessionPage .adviceBenefitsWrapper .benefitsWrapper {} .stylingSessionPageWrapper .stylingSessionPage .adviceBenefitsWrapper .benefitsWrapper .benefits { display: flex; flex-wrap: nowrap; flex-direction: row; align-items: stretch; } .stylingSessionPageWrapper .stylingSessionPage .adviceBenefitsWrapper .benefitsWrapper .benefits .benefitsImage { width: calc(40% - 20px); margin-right: 10px; } .stylingSessionPageWrapper .stylingSessionPage .adviceBenefitsWrapper .benefitsWrapper .benefits .benefitsCopy { width: 60%; background-color: #334867; display: flex; flex-direction: column; justify-content: center; } .stylingSessionPageWrapper .stylingSessionPage .adviceBenefitsWrapper .benefitsWrapper .benefits .benefitsCopy .imageMap { width: auto; } .stylingSessionPageWrapper .stylingSessionPage .adviceBenefitsWrapper .benefitsWrapper .benefits .benefitsCopy .content { padding: 20px 0; } .stylingSessionPageWrapper .stylingSessionPage .testimonialsWrapper { margin: 70px 0 20px 0; } .stylingSessionPageWrapper .stylingSessionPage .testimonialsWrapper .cycle-nav-external-wrapper { width: 100%; } .stylingSessionPageWrapper .stylingSessionPage .testimonialsWrapper .cycle-nav-external-wrapper .slide { margin: 0 5px; } .stylingSessionPageWrapper .stylingSessionPage .testimonialsWrapper .cycle-nav-external-wrapper .content { padding: 20px; background-color: #f3eeeb; } @media only screen and (max-width: 850px){ .stylingSessionPageWrapper .stylingSessionPage .introWrapper { margin: 35px 0; } .stylingSessionPageWrapper .stylingSessionPage .adviceOptionsWrapper { margin: 35px 0; } .stylingSessionPageWrapper .stylingSessionPage .adviceBenefitsWrapper { margin: 35px 0; } .stylingSessionPageWrapper .stylingSessionPage .adviceBenefitsWrapper .benefitsWrapper .benefits .benefitsImage { width: calc(40% - 20px); margin-right: 10px; } .stylingSessionPageWrapper .stylingSessionPage .adviceBenefitsWrapper .benefitsWrapper .benefits .benefitsCopy { width: 60%; } .stylingSessionPageWrapper .stylingSessionPage .adviceBenefitsWrapper .benefitsWrapper .benefits .benefitsCopy .content ul.bodycopy { padding-left: 20px; } .stylingSessionPageWrapper .stylingSessionPage .testimonialsWrapper { margin: 35px 0 20px 0; } } /***********/ /* kickoff */ /***********/ /* Added at 16.07.21. */ .kickoffPageFW21 { background-color: #f2f2f2; background-image: url('../Landing pages/_static/kickoff/2021_HL08/CP_HL08_KICKOFF_BACKGROUND_01.svg'); background-repeat: repeat-y; background-size: cover; background-position: center top; } /**************/ /* kickoff HQ */ /**************/ /* Added at 20.08.21. */ .kickoffPageFW21HQ { background-color: #f2f2f2; background-image: url('../Landing pages/_static/kickoff/2021_HL08_HQ/CP_HL08_KICKOFF_HQ_BACKGROUND.svg'); background-repeat: repeat-y; background-size: cover; background-position: center top; } .kickoffPageFW21HQ .scrollIconWrapper .scrollIcon:before, .kickoffPageFW21HQ .scrollIconWrapper .scrollIcon:after { border: 2px solid #D7BCAF; border-top: 0; border-right: 0; } /*******************/ /* cookie overview */ /*******************/ /* Added at 31.05.22. */ table.cookieOverview {} table.cookieOverview thead {} table.cookieOverview thead tr { background-color: #000; } table.cookieOverview thead tr th { text-align: left; width: 25%; padding: 3px; color: #fff; } table.cookieOverview thead tr th:nth-child(1) { width: 15%; } table.cookieOverview thead tr th:nth-child(2) { width: 25%; } table.cookieOverview thead tr th:nth-child(3) { width: 45%; } table.cookieOverview thead tr th:nth-child(4) { width: 15%; } table.cookieOverview tbody tr {} table.cookieOverview tbody tr:nth-child(even) { background-color: #efefef; } table.cookieOverview tbody tr td { vertical-align: top; padding: 3px; } /*******************/ /* wear the moment */ /*******************/ /* Added at 02.08.22. */ /* Edited at 03.08.22. Added styling. */ /* Edited at 11.08.22. Added carousel styling. */ /* Edited at 09.11.22. Removed specific styling. */ .wearTheMomentPageWrapper {} .wearTheMomentPageWrapper .wearTheMomentPage { background-color: rgb(180,187,203); overflow: hidden; } .wearTheMomentPageWrapper .wearTheMomentPage .wearTheMomentContent { width: 100%; max-width: 1600px; margin: 0 auto; } .wearTheMomentPageWrapper .wearTheMomentPage .momentsWrapper {} .wearTheMomentPageWrapper .wearTheMomentPage .momentsWrapper .moments { display: flex; flex-direction: row; align-items: center; justify-content: center; } .wearTheMomentPageWrapper .wearTheMomentPage .momentsWrapper .moments .momentWrapper { width: 33.33%; } .wearTheMomentPageWrapper .wearTheMomentPage .momentsWrapper .moments .momentWrapper .moment { position: relative; margin: 0 15px; } @media only screen and (max-width: 850px){ .wearTheMomentPageWrapper .wearTheMomentPage .momentsWrapper .moments .momentWrapper { width: 50%; } .wearTheMomentPageWrapper .wearTheMomentPage .momentsWrapper .moments .momentWrapper:nth-child(odd) .moment { margin: 0 5px 0 0; } .wearTheMomentPageWrapper .wearTheMomentPage .momentsWrapper .moments .momentWrapper:nth-child(even) .moment { margin: 0 0 0 5px; } } /* carousel */ .momentsCarouselWrapper {} .momentsCarouselWrapper .momentsCarousel { padding: 0; overflow: hidden; } .momentsCarouselWrapper .momentsCarousel .categoryPageSlider .slide { padding: 0 5px; white-space: normal; display: flex; flex-direction: column; } .momentsCarouselWrapper .momentsCarousel .categoryPageSlider .slide .heading { margin: 10px 0; } .momentsCarouselWrapper .momentsCarousel .categoryPageSlider .slide .bodycopy.ctas { margin: 0; } @media only screen and (min-width: 1024px){ .momentsCarouselWrapper .momentsCarousel .cycle-nav-external-wrapper { padding: 0 48px; } .momentsCarouselWrapper .momentsCarousel .cycle-nav-external-wrapper .cycle-nav-external.inverse.cycle-prev { left: 10px; } .momentsCarouselWrapper .momentsCarousel .cycle-nav-external-wrapper .cycle-nav-external.inverse.cycle-next { right: 10px; } } @media only screen and (max-width: 1024px){ .momentsCarouselWrapper .momentsCarousel .categoryPageSlider { overflow: visible !important; max-width: 80%; left: 10%; } } /************/ /* seo page */ /************/ /* Added at 26.08.22. */ .seoPageWrapper {} .seoPageWrapper .seoPage {} .seoPageWrapper .seoPage .seoPageContent { max-width: 1310px; margin: 0 auto; } .seoPageWrapper .seoPage .productsGridTilesWrapper { max-width: 1310px; margin: 0 auto; } @media only screen and (max-width: 850px){ .seoPageWrapper .seoPage .seoPageContent { padding: 0 30px; } .seoPageWrapper .seoPage .productsGridTilesWrapper {} } /**************************/ /* personal shopping page */ /**************************/ /* Added at 12.12.22. */ /* Edited at 13.12.22. */ /* Edited at 09.01.23. Updated bannerbar padding. */ /* Edited at 27.06.23. Adding extra banner. Change stack id's css styles */ .personalShoppingPageWrapper {} .personalShoppingPageWrapper .personalShoppingPage { width: 100%; max-width: 1600px; margin: 0 auto; overflow: hidden; } .personalShoppingPageWrapper .personalShoppingPage #stack-01 h1.heading .outline { color: #fff; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } .personalShoppingPageWrapper .personalShoppingPage #stack-02 .categoryPageGridTilesWrapper[data-maintain-direction] { padding-top: 20px; border-top: 2px solid #000; } .personalShoppingPageWrapper .personalShoppingPage #stack-02 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 { width: auto; margin-right: 0; } .personalShoppingPageWrapper .personalShoppingPage #stack-02 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 p.bodycopy { margin-top: 0; } .personalShoppingPageWrapper .personalShoppingPage #stack-02 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-2-2 { width: calc(100% - 63px); } .personalShoppingPageWrapper .personalShoppingPage #stack-02 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-2-2 h4.heading { margin: 0; } .personalShoppingPageWrapper .personalShoppingPage #stack-03 .categoryPageGridTileWrapper.col-1-2 .incloseWrapper { background-color: #f2f2f2; } .personalShoppingPageWrapper .personalShoppingPage #stack-04 .categoryPageGridTileWrapper.col-1-2 .incloseWrapper { background-color: #f2f2f2; } .personalShoppingPageWrapper .personalShoppingPage #stack-05 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-2-2 { padding-top: 10%; } .personalShoppingPageWrapper .personalShoppingPage #stack-05 .blockquote { font-family: Georgia, serif; position: relative; width: 48px; height: 28px; } .personalShoppingPageWrapper .personalShoppingPage #stack-05 .blockquote:after { content: "\201C"; position: absolute; top: 0; left: 0; font-size: 80px; } .personalShoppingPageWrapper .personalShoppingPage #stack-06 .bannerBar.general { padding: 20px 0 12px; } .personalShoppingPageWrapper .personalShoppingPage #stack-07 .bannerBar.general { background-color: #fff; padding: 20px 0 12px; } @media only screen and (min-width: 1024px){ .personalShoppingPageWrapper .personalShoppingPage #stack-01 .categoryPageGridTileWrapper.col-1-2 { width: 40%; } .personalShoppingPageWrapper .personalShoppingPage #stack-01 .categoryPageGridTileWrapper.col-2-2 { width: 60%; } .personalShoppingPageWrapper .personalShoppingPage #stack-02 { margin-top: 70px; } .personalShoppingPageWrapper .personalShoppingPage #stack-03 { margin-top: 70px; } .personalShoppingPageWrapper .personalShoppingPage #stack-03 .categoryPageGridTileWrapper.col-1-2 { width: 33.33%; order: 1;} .personalShoppingPageWrapper .personalShoppingPage #stack-03 .categoryPageGridTileWrapper.col-2-2 { width: 66.66%; order: 0;} .personalShoppingPageWrapper .personalShoppingPage #stack-04 { margin-top: 70px; } .personalShoppingPageWrapper .personalShoppingPage #stack-04 .categoryPageGridTileWrapper.col-1-2 { width: 33.33%; } .personalShoppingPageWrapper .personalShoppingPage #stack-04 .categoryPageGridTileWrapper.col-2-2 { width: 66.66%; } .personalShoppingPageWrapper .personalShoppingPage #stack-05 { margin-top: 70px; margin-bottom: 70px; } .personalShoppingPageWrapper .personalShoppingPage #stack-05 > .categoryPageGridTiles > .categoryPageGridTileWrapper.col-1-2 { width: 60%; } .personalShoppingPageWrapper .personalShoppingPage #stack-05 > .categoryPageGridTiles > .categoryPageGridTileWrapper.col-2-2 { width: 40%; } .personalShoppingPageWrapper .personalShoppingPage #stack-05 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 { width: calc(50% - 35px); margin-right: 35px; } .personalShoppingPageWrapper .personalShoppingPage #stack-05 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-2-2 { width: calc(50% - 35px); margin-left: 35px; padding-top: 10%; } .personalShoppingPageWrapper .personalShoppingPage #stack-06 { margin-bottom: 10px; } .personalShoppingPageWrapper .personalShoppingPage #stack-06 .bannerBar .bodycopy.ctas .cta { font-size: 22px; } .personalShoppingPageWrapper .personalShoppingPage #stack-06 { margin-bottom: 10px; } .personalShoppingPageWrapper .personalShoppingPage #stack-06 .bannerBar .bodycopy.ctas .cta { font-size: 22px; } } @media only screen and (max-width: 1024px){ .personalShoppingPageWrapper .personalShoppingPage #stack-01 .categoryPageGridTileWrapper.col-1-2 { order: 2; } .personalShoppingPageWrapper .personalShoppingPage #stack-01 .categoryPageGridTileWrapper.col-2-2 { order: 1; } .personalShoppingPageWrapper .personalShoppingPage #stack-02 { margin-top: 30px; } .personalShoppingPageWrapper .personalShoppingPage #stack-03 { margin-top: 50px; } .personalShoppingPageWrapper .personalShoppingPage #stack-03 .categoryPageGridTileWrapper.col-1-2 { order: 2; } .personalShoppingPageWrapper .personalShoppingPage #stack-03 .categoryPageGridTileWrapper.col-2-2 { order: 1; } .personalShoppingPageWrapper .personalShoppingPage #stack-03 .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile > .imageMap { margin-bottom: 0; } .personalShoppingPageWrapper .personalShoppingPage #stack-04 { margin-top: 50px; } .personalShoppingPageWrapper .personalShoppingPage #stack-04 .categoryPageGridTileWrapper.col-1-2 { order: 2; } .personalShoppingPageWrapper .personalShoppingPage #stack-04 .categoryPageGridTileWrapper.col-2-2 { order: 1; } .personalShoppingPageWrapper .personalShoppingPage #stack-04 .categoryPageGridTileWrapper.col-2-2 .categoryPageGridTile > .imageMap { margin-bottom: 0; } .personalShoppingPageWrapper .personalShoppingPage #stack-05 { margin-top: 50px; margin-bottom: 50px; } .personalShoppingPageWrapper .personalShoppingPage #stack-05 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 {} .personalShoppingPageWrapper .personalShoppingPage #stack-05 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-2-2 { padding-top: 10%; padding-bottom: 10%; } .personalShoppingPageWrapper .personalShoppingPage #stack-05 .categoryPageGridTileWrapper.col-2-2 h4.heading { margin-bottom: 0; } .personalShoppingPageWrapper .personalShoppingPage #stack-06 { margin-bottom: 20px; } .personalShoppingPageWrapper .personalShoppingPage #stack-06 .bannerBar .bodycopy.ctas .cta { font-size: 18px; } .personalShoppingPageWrapper .personalShoppingPage #stack-07 { margin-bottom: 20px; } .personalShoppingPageWrapper .personalShoppingPage #stack-07 .bannerBar .bodycopy.ctas .cta { font-size: 18px; } } /********************************/ /* suiting guide teaser (women) */ /********************************/ /* Added at 22.03.23. */ .suitingGuideTeaserWrapper {} .suitingGuideTeaserWrapper .suitingGuideTeaser {} @media only screen and (max-width : 850px){ .suitingGuideTeaserWrapper {} } /*************************/ /* suiting guide (women) */ /*************************/ /* Added at 13.03.23. */ /* Edited at 17.03.23. */ /* Edited at 20.03.23. Added fonts. */ /* Edited at 21.03.23. */ /* Edited at 22.03.23. */ /* fonts */ @font-face { font-family: 'garamondregular'; src: url('../Category pages/_women/2023_C1C_SUITING_GUIDE/garamond_regular-webfont.woff2') format('woff2'), url('../Category pages/_women/2023_C1C_SUITING_GUIDE/garamond_regular-webfont.woff') format('woff'), url('../Category pages/_women/2023_C1C_SUITING_GUIDE/garamond_regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'garamonditalic'; src: url('../Category pages/_women/2023_C1C_SUITING_GUIDE/garamond_italic-webfont.woff2') format('woff2'), url('../Category pages/_women/2023_C1C_SUITING_GUIDE/garamond_italic-webfont.woff') format('woff'), url('../Category pages/_women/2023_C1C_SUITING_GUIDE/garamond_italic-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'garamondbold'; src: url('../Category pages/_women/2023_C1C_SUITING_GUIDE/garamond_bold-webfont.woff2') format('woff2'), url('../Category pages/_women/2023_C1C_SUITING_GUIDE/garamond_bold-webfont.woff') format('woff'), url('../Category pages/_women/2023_C1C_SUITING_GUIDE/garamond_bold-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } .suitingGuideWrapper { width: calc(100% - 16px); } .suitingGuideWrapper .suitingGuide {} .suitingGuideWrapper .suitingGuide .heading span.garamond_regular { font-family: 'garamondregular'; } .suitingGuideWrapper .suitingGuide .heading span.garamond_italic { font-family: 'garamonditalic'; } .suitingGuideWrapper .suitingGuide .heading span.garamond_bold { font-family: 'garamondbold'; } .suitingGuideWrapper .suitingGuide section { position: relative; margin-bottom: 70px; } .suitingGuideWrapper .suitingGuide section .wrapped { width: 100%; padding: 70px 0; } .suitingGuideWrapper .suitingGuide section .wrapped .wrappedContent { width: 50%; margin: 0 auto; } .suitingGuideWrapper .suitingGuide section h1.heading .garamond_regular { font-size: 100px; line-height: 80px; } .suitingGuideWrapper .suitingGuide section h2.heading .garamond_regular { font-size: 50px; line-height: 50px; } .suitingGuideWrapper .suitingGuide section ul.bodycopy { width: fit-content; margin: 0 auto; padding: 0 30px; } .suitingGuideWrapper .suitingGuide .categoryPageGridTiles { align-items: center; } @media only screen and (max-width: 1024px){ .suitingGuideWrapper .suitingGuide section .wrapped { padding: 50px 0; } /* fixes */ .suitingGuideWrapper .suitingGuide .wide[data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 { width: calc(50% - 5px); margin-right: 5px; } .suitingGuideWrapper .suitingGuide .wide[data-maintain-direction] .categoryPageGridTileWrapper.col-2-2 { width: calc(50% - 5px); margin-left: 5px; } } @media only screen and (max-width : 850px){ .suitingGuideWrapper .suitingGuide section .wrapped .wrappedContent {} .suitingGuideWrapper .suitingGuide section h1.heading .garamond_regular { font-size: 80px; line-height: 60px; } .suitingGuideWrapper .suitingGuide section h2.heading .garamond_regular { font-size: 30px; line-height: 30px; } } /* scroll icon */ .suitingGuideWrapper .suitingGuide .scrollIconWrapper { justify-content: flex-start; margin-top: 20px; } .suitingGuideWrapper .suitingGuide .scrollIconWrapper > a { border: 2px solid #000; padding: 21px 8px 14px; border-radius: 30px; } .suitingGuideWrapper .suitingGuide .scrollIconWrapper > a .scrollIcon:before { border: 2px solid #000; border-top: 0; border-right: 0; transform: translatex(50%) translateY(70%) rotate(-45deg); } .suitingGuideWrapper .suitingGuide .scrollIconWrapper > a .scrollIcon:after { display: none; } @media only screen and (max-width : 850px){ .suitingGuideWrapper .suitingGuide .scrollIconWrapper { display: none; } } /* radio tabs */ .suitingGuideWrapper .suitingGuide .tabbed { overflow-x: hidden; } .suitingGuideWrapper .suitingGuide .tabbed [type="radio"] { display: none; } .suitingGuideWrapper .suitingGuide .tabbed .tabs { display: flex; list-style: none; padding: 0; justify-content: center; } .suitingGuideWrapper .suitingGuide .tabbed .tabs .tab { text-align: center; } .suitingGuideWrapper .suitingGuide .tabbed .tabs .tab > label { display: block; padding: 10px; text-transform: uppercase; font-size: 22px; margin: 0 10px; cursor: pointer; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .suitingGuideWrapper .suitingGuide .tabbed .tabs .tab > label span { text-transform: none; color: #737373; font-size: 15px; font-family: "Futura PT W01 Book", arial, sans-serif; } .suitingGuideWrapper .suitingGuide .tabbed .tab-content { display: none; } .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(1):checked ~ section .center .tabs .tab:nth-of-type(1), .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(2):checked ~ section .center .tabs .tab:nth-of-type(2), .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(3):checked ~ section .center .tabs .tab:nth-of-type(3), .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(4):checked ~ section .center .tabs .tab:nth-of-type(4) {} .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(1):checked ~ section .center .tabs .tab:nth-of-type(1) label, .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(2):checked ~ section .center .tabs .tab:nth-of-type(2) label, .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(3):checked ~ section .center .tabs .tab:nth-of-type(3) label, .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(4):checked ~ section .center .tabs .tab:nth-of-type(4) label { font-family: "Futura PT W01 Heavy", arial, sans-serif; } .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(1):checked ~ section .center .tabs .tab:nth-of-type(1) label span, .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(2):checked ~ section .center .tabs .tab:nth-of-type(2) label span, .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(3):checked ~ section .center .tabs .tab:nth-of-type(3) label span, .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(4):checked ~ section .center .tabs .tab:nth-of-type(4) label span { color: #000; } .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1), .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2), .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3), .suitingGuideWrapper .suitingGuide .tabbed [type="radio"]:nth-of-type(4):checked ~ .tab-content:nth-of-type(4) { display: block; } @media only screen and (max-width : 850px){ .suitingGuideWrapper .suitingGuide .tabbed .tabs .tab > label { font-size: 18px; } } /* product carousels */ .suitingGuideWrapper .suitingGuide .productCarouselWrapper {} .suitingGuideWrapper .suitingGuide .productCarouselWrapper .productCarousel { padding: 0; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; min-height: 60px; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; padding: 0; cursor: pointer; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot { width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 50%; border: 2px solid #fff; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container.cycle-pager-active .dot { -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.25); box-shadow: 0 3px 3px rgba(0,0,0,0.25); } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0416"] { background-color: #D0B28E; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0734"] { background-color: #98D7CE; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0984"] { background-color: #EBD1D0; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0799"] { background-color: #254899; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0034"] { background-color: #B50943; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0839"] { background-color: #328365; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0361"] { background-color: #83000C; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0783"] { background-color: #14172A; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0060"] { background-color: #161417; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0565"] { background-color: #303B3D; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0036"] { background-color: #475854; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0372"] { background-color: #F1343A; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0430"] { background-color: #AE6A39; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0713"] { background-color: #BDB8D4; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0728"] { background-color: #1C192C; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0896"] { background-color: #2FB49D; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0985"] { background-color: #99C0EB; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0100"] { background-color: #F0EFEB; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0185"] { background-color: #E1BFBE; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0348"] { background-color: #A90118; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0682"] { background-color: #6795D1; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0803"] { background-color: #8E9778; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0104"] { background-color: #F5F3F0; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0187"] { background-color: #F6A8D0; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0109"] { background-color: #E9E8E3; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid*="_0823"] { background-color: #54C5B5; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container .dot[data-itemid="40072203_0900"] { background-image: url('../Category pages/_women/2023_C1C_SUITING_GUIDE/40072203_0900_pattern.jpg'); background-size: contain; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .productCarousel .categoryPageSlider .cycle-nav.cycle-prev, .suitingGuideWrapper .suitingGuide .productCarouselWrapper .productCarousel .categoryPageSlider .cycle-nav.cycle-next, .suitingGuideWrapper .suitingGuide .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-swatches, .suitingGuideWrapper .suitingGuide .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-info, .suitingGuideWrapper .suitingGuide .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-type, .suitingGuideWrapper .suitingGuide .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-pricing { display: none; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .productCarousel .categoryPageSlider .slide { background: url(../icons/2021_HL04/loader.gif) center center no-repeat; } .suitingGuideWrapper .suitingGuide section#stack-03 .productCarouselWrapper .productCarousel .categoryPageSlider .slide { margin: 0 15%; } .suitingGuideWrapper .suitingGuide section#stack-04 .productCarouselWrapper .productCarousel .categoryPageSlider .slide { margin: 0 15%; } .suitingGuideWrapper .suitingGuide section#stack-06 .productCarouselWrapper .productCarousel { padding: 0 15% 0 15%; } @media only screen and (max-width: 850px){ .suitingGuideWrapper .suitingGuide .productCarouselWrapper .cycle-external-pager .dot-container { width: 25px; height: 25px; } } @media only screen and (min-width: 1024px){ .suitingGuideWrapper .suitingGuide .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap:hover [data-image] { opacity: 1; } .suitingGuideWrapper .suitingGuide .productCarouselWrapper .productCarousel .categoryPageSlider .slide > .imageMap:hover [data-image-hover] { opacity: 0; } } /* page navigation */ .suitingGuideWrapper .suitingGuide .pageNavWrapper { display: flex; z-index: 2; } .suitingGuideWrapper .suitingGuide .pageNavWrapper .pageNavNext, .suitingGuideWrapper .suitingGuide .pageNavWrapper .pageNavPrev { display: flex; flex-direction: column; align-items: center; } .suitingGuideWrapper .suitingGuide .pageNavWrapper .pageNavPrev { margin-bottom: 20px; } .suitingGuideWrapper .suitingGuide .pageNavWrapper .pageNavNext > a, .suitingGuideWrapper .suitingGuide .pageNavWrapper .pageNavPrev > a { display: block; position: relative; width: 50px; height: 50px; border-radius: 50%; background-color: #fff; -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.25); box-shadow: 0 3px 3px rgba(0,0,0,0.25); } .suitingGuideWrapper .suitingGuide .pageNavWrapper .pageNavNext > a:after, .suitingGuideWrapper .suitingGuide .pageNavWrapper .pageNavPrev > a:after { content: ""; width: 18px; height: 18px; display: block; position: absolute; top: 50%; left: 50%; border: 2px solid #000; border-top: 0; border-right: 0; } .suitingGuideWrapper .suitingGuide .pageNavWrapper .pageNavNext > a:after { -webkit-transform: translatex(-50%) translateY(-70%) rotate(-45deg); transform: translatex(-50%) translateY(-70%) rotate(-45deg); } .suitingGuideWrapper .suitingGuide .pageNavWrapper .pageNavPrev > a:after { -webkit-transform: translatex(-50%) translateY(-30%) rotate(135deg); transform: translatex(-50%) translateY(-30%) rotate(135deg); } .suitingGuideWrapper .suitingGuide .pageNavWrapper .pageNavNext > p.bodycopy, .suitingGuideWrapper .suitingGuide .pageNavWrapper .pageNavPrev > p.bodycopy { width: 100px; text-align: center; font-size: 13px; line-height: 18px; } .suitingGuideWrapper .suitingGuide .pageNavWrapper .pageNavNext > p.bodycopy { margin-bottom: 5px; } .suitingGuideWrapper .suitingGuide .pageNavWrapper .pageNavPrev > p.bodycopy { margin-top: 5px; } @media only screen and (min-width : 850px){ .suitingGuideWrapper .suitingGuide .pageNavWrapper { flex-direction: column; position: absolute; top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); right: 10px; } } @media only screen and (max-width : 850px){ .suitingGuideWrapper .suitingGuide .pageNavWrapper { justify-content: center; display: none; } } /* specific */ .suitingGuideWrapper .suitingGuide section[id*="stack-07-"] .pageNavWrapper .pageNavNext > a { background-color: #55AC58; } .suitingGuideWrapper .suitingGuide section[id*="stack-07-"] .pageNavWrapper .pageNavNext > a:after { border: 2px solid #fff; border-top: 0; border-right: 0; } /* specific content */ .suitingGuideWrapper .suitingGuide section#stack-01 .categoryPageGridTilesWrapper { margin-bottom: 70px; } @media only screen and (max-width : 850px){ .suitingGuideWrapper { width: calc(100% - 36px); } .suitingGuideWrapper .suitingGuide section#stack-01 .categoryPageGridTilesWrapper { margin-bottom: 50px; } } /* tmp fix because of negative margin. Should be fixed by Emakina. */ .page-category-1223-fitguide .plp-products .product-grid { justify-content: center; } /******************/ /* internal tools */ /******************/ /* Added at 20.07.23. */ .toolsPageWrapper { width: 100%; max-width: 1600px; margin: 0 auto; } .toolsPageWrapper .toolsPage { padding: 0 30px; } /* content slot configuration generator */ .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage {} .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrappers { margin-bottom: 10px; } .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper { display: flex; flex-direction: row; flex-wrap: wrap; } .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements { display: flex; flex-direction: column; } .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements.half { width: calc(50% - 20px); margin: 0 5px; } .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements.full { width: calc(100% - 10px); margin: 0 5px; } .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements .col-1-1, .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements .col-1-1-1 { display: flex; flex-direction: row; } .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements .col-1-1 .formElement { width: 50%; } .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements .col-1-1-1 .formElement { width: 33.33%; } .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements .col-1-1-1 .formElement:nth-child(2) { width: calc(33.3% - 10px); margin-left: 5px; margin-right: 5px; } .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements .formElement {} .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements .formElement .sbHolder { height: 40px; } .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements .formElement a.sbSelector { height: 40px; line-height: 40px; } .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements .formElement input[type='text'] { width: 100%; } .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements .formElement select { padding: 3px 5px; height: 40px; border-radius: 3px; } .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements .formElement textarea { display: block; width: 100%; white-space: nowrap; overflow: auto; } .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements .formElement textarea[name="input"] { height: 200px; font-size: 13px; } .toolsPageWrapper.contentSlotConfigurationGenerator .toolsPage .formElementsWrapper .formElements .formElement textarea[name="result"] { height: 400px; font-size: 13px; color: #0082D8; } /************************************************************************* 10.0 Landing pages *************************************************************************/ /*********************/ /* 2023 / C2 / Pride */ /*********************/ /* Added at 08.05.23. */ /* Edited at 17.05.23. */ /* Edited at 23.05.23. */ /* Edited at 24.05.23. */ /* Edited at 25.05.23. */ .pridePageWrapper { position: relative; overflow: hidden; max-width: 100vw; } .pridePageWrapper .marquee { overflow: hidden; width: 100%; margin: 0 auto 140px; position: relative; } .pridePageWrapper .marquee .bannerBar { } .pridePageWrapper .marquee .bannerBar p.bodycopy { animation: marquee; display: flex; justify-content: space-between; margin: 0; animation: marquee 5s linear infinite; } .pridePageWrapper .marquee .bannerBar p.bodycopy > span { padding: 10px; white-space: nowrap; margin: 0 2%; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .pridePageWrapper .bg_01 { position: absolute; width: 100vw; height: 100vw; background-image: url('../Landing pages/_static/pride/2023_C2/LP_LB_C2_PRIDE_BACKGROUND_01_EN.png'); background-repeat: no-repeat; background-size: cover; top: 30%; left: 50%; transform: translateX(-100%); } /* geel */ .pridePageWrapper .bg_02 { position: absolute; width: 100vw; height: 100vw; background-image: url('../Landing pages/_static/pride/2023_C2/LP_LB_C2_PRIDE_BACKGROUND_02_EN.png'); background-repeat: no-repeat; background-size: cover; top: 10%; left: 50%; transform: translateX(-10%); } /* rood */ .pridePageWrapper .bg_03 { position: absolute; width: 100vw; height: 100vw; background-image: url('../Landing pages/_static/pride/2023_C2/LP_LB_C2_PRIDE_BACKGROUND_03_EN.png'); background-repeat: no-repeat; background-size: cover; top: -20%; left: 50%; transform: translateX(-100%); } /* groen */ .pridePageWrapper .bg_04 { position: absolute; width: 100vw; height: 100vw; background-image: url('../Landing pages/_static/pride/2023_C2/LP_LB_C2_PRIDE_BACKGROUND_04_EN.png'); background-repeat: no-repeat; background-size: cover; top: 60%; left: 50%; transform: translateX(-10%); } /* blauw */ .pridePageWrapper .pridePage { max-width: 1600px; margin: 0 auto; overflow: hidden; } .pridePageWrapper .pridePage .heading {} .pridePageWrapper .pridePage .bttns.ctas .cta {} .pridePageWrapper .pridePage section { max-width: 1310px; margin: 0 auto 140px; } .pridePageWrapper .pridePage section.full { max-width: 1600px; } .pridePageWrapper .pridePage section.narrow { max-width: 850px; } .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTiles { align-items: center; } .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-2 > .categoryPageGridTile > .gridTileContent, .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-2-2 > .categoryPageGridTile > .gridTileContent, .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-3.merged > .categoryPageGridTile > .gridTileContent, .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-3-3.merged > .categoryPageGridTile > .gridTileContent { padding: 0 30px; } .pridePageWrapper .pridePage .staticContent { padding: 0 30px; } .pridePageWrapper .pridePage .staticContent .bttns.ctas { justify-content: flex-start; } .pridePageWrapper .pridePage .staticContent .bttns.ctas .cta:first-child { margin-left: 0; } .pridePageWrapper .pridePage .externalNavWrapper {} .pridePageWrapper .pridePage .externalNavWrapper .externalNav { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; } .pridePageWrapper .pridePage .externalNavWrapper .externalNav .trigger { display: block; margin: 0 3px; font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-transform: uppercase; color: #ddd; cursor: pointer; margin-bottom: 5px; } .pridePageWrapper .pridePage .externalNavWrapper .externalNav .trigger.active { color: #000; text-decoration: underline; } .pridePageWrapper .pridePage .externalNavWrapper .externalNav .separator { display: block; width: 1px; background-color: #ddd; height: 18px; margin: 0 5px 5px 5px; } .pridePageWrapper .pridePage [data-stores] .cycle-slideshow .cycle-nav.cycle-prev, .pridePageWrapper .pridePage [data-stores] .cycle-slideshow .cycle-nav.cycle-next { display: none; } .pridePageWrapper .pridePage [data-stores] .cycle-slideshow .cycle-slide { width: 100%; } .pridePageWrapper .pridePage .storeInfoWrapper { width: 100%; } .pridePageWrapper .pridePage .storeInfoWrapper .storeInfo { width: 100%; display: flex; flex-direction: row; align-items: flex-start; } .pridePageWrapper .pridePage .storeInfoWrapper .storeInfo .col-1-2 { width: calc(50% - 5px); margin: 0 5px 0 0; } .pridePageWrapper .pridePage .storeInfoWrapper .storeInfo .col-2-2 { width: calc(50% - 5px); margin: 0 0 0 5px; display: flex; flex-direction: row; flex-wrap: wrap; } .pridePageWrapper .pridePage .storeInfoWrapper .storeInfo .col-1-2 p.bodycopy, .pridePageWrapper .pridePage .storeInfoWrapper .storeInfo .col-2-2 p.bodycopy { width: 100%; } .pridePageWrapper .pridePage .storeInfoWrapper .storeInfo .col-2-2 .floatLeft { width: 50%; } .pridePageWrapper .pridePage .storeInfoWrapper .storeInfo .col-2-2 .floatRight { width: 50%; text-align: right; } .pridePageWrapper .pridePage .storeInfoWrapper .storeInfo .col-2-2 .clearer { width: 100%; height: 5px; } .pridePageWrapper .pridePage #stack-01 .weXPrideLogo { width: 100%; max-width: 150px; margin: 0 auto 20px; } .pridePageWrapper .pridePage #stack-02 > .categoryPageGridTilesWrapper .blockquote { font-family: Georgia, serif; position: relative; width: 48px; height: 28px; } .pridePageWrapper .pridePage #stack-02 > .categoryPageGridTilesWrapper .blockquote:after { position: absolute; top: 0; left: 0; font-size: 80px; } .pridePageWrapper .pridePage #stack-02 > .categoryPageGridTilesWrapper .blockquote.before:after { content: "\201C"; } .pridePageWrapper .pridePage #stack-02 > .categoryPageGridTilesWrapper .blockquote.after:after { content: "\201D"; } .pridePageWrapper .pridePage #stack-02 > .categoryPageGridTilesWrapper .blockquote + p.bodycopy { font-size: 40px; line-height: 34px; margin-bottom: 20px; } .pridePageWrapper .pridePage #stack-03 h2.heading { margin-bottom: 20px; } .pridePageWrapper .pridePage #stack-03 .categoryPageGridTilesWrapper[data-maintain-direction] { padding-top: 20px; border-top: 2px solid #000; } .pridePageWrapper .pridePage #stack-03 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 { width: auto; margin-right: 0; } .pridePageWrapper .pridePage #stack-03 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 p.bodycopy { margin-top: 0; } .pridePageWrapper .pridePage #stack-03 .categoryPageGridTileWrapper.col-1-3 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 p.bodycopy .globalIcon.ellipse.inverse:before { background-color: #EDAE00; } .pridePageWrapper .pridePage #stack-03 .categoryPageGridTileWrapper.col-2-3 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 p.bodycopy .globalIcon.ellipse.inverse:before { background-color: #8AB2C8; } .pridePageWrapper .pridePage #stack-03 .categoryPageGridTileWrapper.col-3-3 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 p.bodycopy .globalIcon.ellipse.inverse:before { background-color: #C4CB85; } .pridePageWrapper .pridePage #stack-03 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-2-2 { width: calc(100% - 63px); } .pridePageWrapper .pridePage #stack-03 .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-2-2 h4.heading { margin: 0; } .pridePageWrapper .pridePage #stack-04 h2.heading { margin-bottom: 20px; } .pridePageWrapper .pridePage #stack-06 h2.heading { margin-bottom: 20px; } @media only screen and (min-width : 1024px){ .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-2 > .categoryPageGridTile > .gridTileContent, .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-2-2 > .categoryPageGridTile > .gridTileContent, .pridePageWrapper .pridePage .categoryPageGridTilesWrapper .categoryPageGridTileWrapper.col-1-3 > .categoryPageGridTile > .gridTileContent, .pridePageWrapper .pridePage .categoryPageGridTilesWrapper .categoryPageGridTileWrapper.col-2-3 > .categoryPageGridTile > .gridTileContent, .pridePageWrapper .pridePage .categoryPageGridTilesWrapper .categoryPageGridTileWrapper.col-3-3 > .categoryPageGridTile > .gridTileContent, .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-3.merged > .categoryPageGridTile > .gridTileContent, .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-3-3.merged > .categoryPageGridTile > .gridTileContent { margin: 0 auto; max-width: 80%; } .pridePageWrapper .pridePage #stack-02 > .categoryPageGridTilesWrapper > .categoryPageGridTiles > .categoryPageGridTileWrapper.col-1-2 { width: 40%; } .pridePageWrapper .pridePage #stack-02 > .categoryPageGridTilesWrapper > .categoryPageGridTiles > .categoryPageGridTileWrapper.col-2-2 { width: 60%; } .pridePageWrapper .pridePage #stack-02 > .categoryPageGridTilesWrapper .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 { width: calc(50% - 35px); margin-left: 35px; padding-bottom: 20%; } .pridePageWrapper .pridePage #stack-02 > .categoryPageGridTilesWrapper .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-2-2 { width: calc(50% - 35px); margin-right: 35px; padding-top: 0; } } @media only screen and (max-width : 1024px){ .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-2 > .categoryPageGridTile > .gridTileContent, .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-2-2 > .categoryPageGridTile > .gridTileContent, .pridePageWrapper .pridePage .categoryPageGridTilesWrapper .categoryPageGridTileWrapper.col-1-3 > .categoryPageGridTile > .gridTileContent, .pridePageWrapper .pridePage .categoryPageGridTilesWrapper .categoryPageGridTileWrapper.col-2-3 > .categoryPageGridTile > .gridTileContent, .pridePageWrapper .pridePage .categoryPageGridTilesWrapper .categoryPageGridTileWrapper.col-3-3 > .categoryPageGridTile > .gridTileContent, .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-3.merged > .categoryPageGridTile > .gridTileContent, .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-3-3.merged > .categoryPageGridTile > .gridTileContent { padding: 0 20px; } .pridePageWrapper .pridePage #stack-02 > .categoryPageGridTilesWrapper .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-1-2 { padding-bottom: 10%; } .pridePageWrapper .pridePage #stack-02 > .categoryPageGridTilesWrapper .categoryPageGridTileWrapper.col-1-2 h4.heading { margin-bottom: 0; } .pridePageWrapper .pridePage #stack-02 > .categoryPageGridTilesWrapper .categoryPageGridTilesWrapper[data-maintain-direction] .categoryPageGridTileWrapper.col-2-2 { padding-top: 20%; padding-bottom: 10%; } } @media only screen and (max-width : 850px){ .pridePageWrapper .marquee { margin: 0 auto 70px; } .pridePageWrapper .bg_01 { width: 200vw; height: 200vw; top: 25%; transform: translateX(-75%); } /* geel */ .pridePageWrapper .bg_02 { width: 200vw; height: 200vw; top: 10%; transform: translateX(-25%); } /* rood */ .pridePageWrapper .bg_03 { width: 200vw; height: 200vw; top: -5%; transform: translateX(-75%); } /* groen */ .pridePageWrapper .bg_04 { width: 200vw; height: 200vw; top: 70%; transform: translateX(-25%); } /* blauw */ .pridePageWrapper .pridePage section { margin: 0 auto 70px; } .pridePageWrapper .pridePage .marquee .bannerBar p.bodycopy { animation: marquee 10s linear infinite; } .pridePageWrapper .pridePage .marquee .bannerBar p.bodycopy > span { margin: 0 0.5%; } .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-3:not(.merged) { order: 1; } .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-1-3.merged { order: 2; } .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-3-3:not(.merged) { order: 1; } .pridePageWrapper .pridePage .categoryPageGridTilesWrapper.verticalCentered .categoryPageGridTileWrapper.col-3-3.merged { order: 2; } .pridePageWrapper .pridePage .staticContent { text-align: left; padding: 0 20px; } .pridePageWrapper .pridePage .storeInfoWrapper .storeInfo { flex-direction: column; } .pridePageWrapper .pridePage .storeInfoWrapper .storeInfo .col-1-2 { width: 100%; margin: 0 auto; } .pridePageWrapper .pridePage .storeInfoWrapper .storeInfo .col-2-2 { width: 100%; margin: 0 auto; } .pridePageWrapper .pridePage #stack-01 .categoryPageGridTileWrapper.col-1-2 .categoryPageGridTile { margin: 0 15%; } .pridePageWrapper .pridePage #stack-02 > .categoryPageGridTilesWrapper .blockquote + p.bodycopy { font-size: 26px; } .pridePageWrapper .pridePage #stack-02 .categoryPageGridTilesWrapper.verticalCentered > .categoryPageGridTiles > .categoryPageGridTileWrapper.col-1-2 { order: 2; } .pridePageWrapper .pridePage #stack-02 .categoryPageGridTilesWrapper.verticalCentered > .categoryPageGridTiles > .categoryPageGridTileWrapper.col-2-2 { order: 1; } .pridePageWrapper .pridePage #stack-04 .categoryPageGridTilesWrapper .categoryPageGridTileWrapper.col-1-2 { order: 2; } .pridePageWrapper .pridePage #stack-04 .categoryPageGridTilesWrapper .categoryPageGridTileWrapper.col-2-2 { order: 1; } } /******************************/ /* 2023 / C2 / Fashion show */ /******************************/ /* Added at 06.04.23. */ .fashionShowPageWrapper { max-width: 1600px; margin: 0 auto; overflow: hidden; } .fashionShowPageWrapper .fashionShowPage {} .fashionShowPageWrapper .fashionShowPage section { margin-bottom: 100px; } .fashionShowPageWrapper .fashionShowPage .content { max-width: 1200px; padding: 0 40px; margin: 0 auto; } .fashionShowPageWrapper .fashionShowPage .content h4.heading { margin-bottom: 30px; } @media only screen and (max-width : 850px){ .fashionShowPageWrapper .fashionShowPage section { margin-bottom: 50px; } } /* default grid */ .fashionShowPageWrapper .fashionShowPage .defaultGridTilesWrapper { position: relative; } .fashionShowPageWrapper .fashionShowPage .defaultGridTilesWrapper .defaultGridTiles { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 5px; } .fashionShowPageWrapper .fashionShowPage .defaultGridTilesWrapper .defaultGridTiles .gridTileWrapper {} .fashionShowPageWrapper .fashionShowPage .defaultGridTilesWrapper .defaultGridTiles .gridTileWrapper.span-2 { grid-column: span 2; } .fashionShowPageWrapper .fashionShowPage .defaultGridTilesWrapper .defaultGridTiles .gridTileWrapper .gridTile {} @media only screen and (max-width : 1024px){ .fashionShowPageWrapper .fashionShowPage .defaultGridTilesWrapper .defaultGridTiles { grid-template-columns: 1fr 1fr; grid-gap: 5px; } } /******************************/ /* 2020 / HL08 / WE & Friends */ /******************************/ /* Added at 16.06.20. */ /* Edited at 24.06.20. */ /* Edited at 25.06.20. */ /* Edited at 08.10.20. Added grid for influencers. */ /* Edited at 25.01.21. Updated social images. */ /* Edited at 11.03.21. Replaced loader icon. */ /* Edited at 26.07.21. Updated banners. */ /* Edited at 19.10.22. Updated styling for replatforming. */ .weFriendsPageWrapper { max-width: 1600px; margin: 0 auto; } .weFriendsPageWrapper .weFriendsPage {} .weFriendsPageWrapper .weFriendsPage .content { max-width: 1200px; padding: 0 40px; margin: 0 auto; } .weFriendsPageWrapper .weFriendsPage .content h4.heading.brown { color: #D99353; margin: 1.33em 0; } .weFriendsPageWrapper .weFriendsPage .content p.bodycopy span.label { background-color: #D8E6E7; color: #000; } /************************************************************************* 11.0 Persistant *************************************************************************/ /********************/ /* adaptive styling */ /********************/ /* Edited at 15.08.19. Added flexbox variation. */ /* Edited at 07.10.19. Added flexbox variation for tablet dimensions. */ /* Edited at 20.11.19. Added 'br' variation. */ /* Edited at 25.09.20. Updated 'br' from static to inline. */ [data-desktop-visible] { display: block; } [data-mobile-visible] { display: none; } [data-desktop-visible-inline] { display: inline-block; } [data-mobile-visible-inline] { display: none; } [data-tablet-desktop-visible] { display: block; } [data-tablet-mobile-visible] { display: none; } [data-flex-desktop-visible] { display: flex; } [data-flex-mobile-visible] { display: none; } [data-tablet-flex-desktop-visible] { display: flex; } [data-tablet-flex-mobile-visible] { display: none; } .imageMap .imgHolder[data-desktop-visible] { display: block; } .imageMap .imgHolder[data-mobile-visible] { display: none; } .imageMap .imgHolder[data-desktop-visible-inline] { display: inline-block; } .imageMap .imgHolder[data-mobile-visible-inline] { display: none; } .imageMap .imgHolder[data-tablet-desktop-visible] { display: block; } .imageMap .imgHolder[data-tablet-mobile-visible] { display: none; } .imageMap .areas .flex[data-tablet-flex-desktop-visible] { display: flex; } .imageMap .areas .flex[data-tablet-flex-mobile-visible] { display: none; } br[data-desktop-visible] { display: inline; } br[data-mobile-visible] { display: none; } br[data-tablet-desktop-visible] { display: inline; } br[data-tablet-mobile-visible] { display: none; } @media only screen and (max-width: 1024px){ [data-tablet-desktop-visible] { display: none; } [data-tablet-mobile-visible] { display: block; } [data-tablet-flex-desktop-visible] { display: none; } [data-tablet-flex-mobile-visible] { display: flex; } .imageMap .imgHolder[data-tablet-desktop-visible] { display: none; } .imageMap .imgHolder[data-tablet-mobile-visible] { display: block; } .imageMap .areas .flex[data-tablet-flex-desktop-visible] { display: none; } .imageMap .areas .flex[data-tablet-flex-mobile-visible] { display: flex; } br[data-tablet-desktop-visible] { display: none; } br[data-tablet-mobile-visible] { display: inline; } } @media only screen and (max-width: 850px){ [data-desktop-visible] { display: none; } [data-mobile-visible] { display: block; } [data-desktop-visible-inline] { display: none; } [data-mobile-visible-inline] { display: inline-block; } [data-flex-desktop-visible] { display: none; } [data-flex-mobile-visible] { display: flex; } .imageMap .imgHolder[data-desktop-visible] { display: none; } .imageMap .imgHolder[data-mobile-visible] { display: block; } .imageMap .imgHolder[data-desktop-visible-inline] { display: none; } .imageMap .imgHolder[data-mobile-visible-inline] { display: inline-block; } br[data-desktop-visible] { display: none; } br[data-mobile-visible] { display: inline; } } /****************************/ /* fixed elements on scroll */ /****************************/ /* Related to 'global.fixedElements.activeOnScroll();' */ [data-active-on-scroll] { display: none; opacity: 0.0; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } [data-active-on-scroll].active { display: block; opacity: 1.0; } .imageMap .imgHolder[data-active-on-scroll] { display: none; opacity: 0.0; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .imageMap .imgHolder[data-active-on-scroll].active { display: block; opacity: 1.0; } /************************/ /* hide from main pages */ /************************/ .page-category-11 [data-hide-from-main], .page-category-12 [data-hide-from-main], .page-category-00 [data-hide-from-main], .page-category-sale [data-hide-from-main] { display: none; } /*****************/ /* fluid content */ /*****************/ /* Added at 14.02.23. Added functions to content.js. */ /* Edited at 13.03.23. Updated styling for ctas. */ .fluid { width: 100%; } @media only screen and (min-width: 850px){ .fluid[data-fluid="1/2"], .fluid[data-fluid="2/2"] { width: calc(50% - 5px); } .fluid[data-fluid="1/2"] { margin-right: 5px; } .fluid[data-fluid="2/2"] { margin-left: 5px; } .fluid[data-fluid="1/3"] { width: calc(33.33% - 5px); margin-right: 5px; } .fluid[data-fluid="2/3"] { width: calc(33.33% - 10px); margin-left: 5px; margin-right: 5px; } .fluid[data-fluid="3/3"] { width: calc(33.33% - 5px); margin-left: 5px; } } /************************************************************************* 12.0 Hotfixes *************************************************************************/ /******************************/ /* hide facebook login button */ /******************************/ /* Hide button as Facebook app need to be approved. */ /* Added at 30.01.23. */ .button-facebook-login { display: none; } /***************************/ /* hide store stock on pdp */ /***************************/ /* Hide store stock on PDP for FR, DE & AT. */ /* Added at 14.02.23. */ .lang-fr_fr.page-pdp .js-pdp-stores-anchor.pdp-stores-button, .lang-de_de.page-pdp .js-pdp-stores-anchor.pdp-stores-button, .lang-de_at.page-pdp .js-pdp-stores-anchor.pdp-stores-button { display: none; } /***********************************/ /* add sticker to product set page */ /***********************************/ /* Stickers on product set page do not work so a workaround to inject these is in place. Unfortunately the styling is a bit off. This is a fix. Should be replace by an Emakine Equivalent solution. */ /* Added at 15.03.23. */ .set-item-info .prices .price .stickerWrapper { margin-left: 10px; } .set-item-info .prices .price .stickerWrapper .sticker { margin-top: 0; } /******************************/ /* fix stickers on pdp mobile */ /******************************/ /* Added at 06.04.23. */ .prices-add-to-cart-actions .pdp-promo > .content-asset { display: flex; flex-direction: row; } .prices-add-to-cart-actions .pdp-promo > .content-asset .stickerWrapper .sticker { margin-top: 0; margin-left: 3px; } .prices-add-to-cart-actions .pdp-promo > .content-asset .stickerWrapper:first-child .sticker { margin-left: 0; } /************************/ /* approaching discount */ /************************/ /* Approaching discount (freeshipping threshold) is not styled. This is a temporary fix that should be replaced by Emakina. */ /* Added at 26.04.23. */ .page-cart .single-approaching-discount { padding: 15px 30px; color: #33BA00; background-color: #EFF7EA; } /******************************/ /* hide active filter buttons */ /******************************/ /* Hide active filter buttons on PLP. This is part of a hotfix/workaround 'hideActiveFiltersOnPLP'. */ /* Added at 06.06.23. */ .plp-filter-bar .filter-list .filter-value { display: none; } /***************************************************************/ /* hide unnecessary label from return methods in return portal */ /***************************************************************/ /* Hide unnecessary label from return methods on return portal page. */ /* Added at 31.07.23. */ /* Added at 01.08.23. */ ul.return-methods__list li.return-methods__item h2.return-methods__label-title > span { display: none; }