/** 2019 (c) WE Fashion These styles are written for the WE Fashion website **/ /** INDEX 01.0 Global - fonts - general - typography - icons - schedule elements - display/hide elements to customergroups - replace elements - viewport - image maps - captions - ctas - responsive text - tabs - videos - fittext - scroll icon - fade on scroll 02.0 Components - countdown variations - dynamic delivery time - cycle slideshow - sidepanel-iframe - popup - popup bar - hotspots - hotspot urls - USPs - SVG text - stickers - category labels - confetti - feedback tool - smart conditions - image detail trigger - page message - bannerrow slideshow - bannerrow - banner bar - pressurebar - BeCommerce logo - thuiswinkelWaarborg logo - delayed holiday delivery - radio tabs - image range slider - product range slider - product range guide - push message - sizechart - product rate - facebook - product slot carousel - magazine - menu - progress ring - segmentation - parallax - recommended categories - main categories - recommended sizes - notificare - filters - read more - widget social media - spawn messages - zoom thumbnail - reviews - abandoned cart popup 03.0 Navigation 03.1 General - country selector - recommend categories in mobile menu - mobile menu stickers 03.2 Header - meganav - meganav coupons - meganav USPs 03.3 LHN - category tags - category stickers - recommend categories in lhn 03.4 Footer - light optin - livechat bar - subscription box - subscription popup - subscription page - unsubscribe confirmation popup - login popup - login sidepanel - footer - checkout footer 04.0 Homepage - general - USPs - grid (2020) - faq button for visitors in app - shopping awards 05.0 Main pages - grid (2018) - inspiration - back to top 06.0 Product list page (categories) - general - top banner - grid (2019) - groupfilter buttons - inclose content - category page components - triptychs - category section with background image - pod banner - USPs - USPs Product Heroes - Listing banner - cluster banner - crosssell navigation - hero products - display available content slots in template - fitguide (2019) - basics carousel - stills carousel - brands carousel - product carousel - product carousel tweaks - view detail image - fitguide color carousel - tip van jip ctas - touzani - teens collection - influencers - krijg de kleren 07.0 Product detail page - USPs - external usp - shop the look - product set - bannerrow margin - stockcheck link icon - sizechart link icon - generated product set - storecheck link icon - stretch link - lengths link - pdp message - variant selector - additional info - brand logos 08.0 System pages 08.1 Account - register confirmation page - activation confirmation page - navigation - dashboard 08.2 Cart - general - USPs - probability reminder 08.3 Checkout - general - log in / enter your information - delivery method - payment 08.4 Order confirmation - general - facebook - restore optin 08.5 Returnportal - roadmap - slideout 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 - giftcard - FAQ - adjusted opening hours - brandbook - ocapi - WE is ME - WE box - WE care - general conditions - exclusive collection page - special opening hours - member get member - press 10.0 Landing pages - 2020 / HL11 / 'Kalverstraat' winactie - 2020 / HL08 / 'Summer outfits' winactie - 2020 / HL08 / WE & Friends 11.0 Persistant - adaptive styling - fixed elements on scroll - hide from main pages - display registered/recognized content - username - hide from category 12.0 Hotfixes - koppelverkoop pricing on recommendation product tiles - force secondary banner margin - certona adjustments - cookie wall pros/cons icons - hide search icon from LU - fixes on product set page - fix sticker on two columned products on plp - fix positioning back to top button - remove unneccessary whitespacing on pages - add margin to fb button in checkout - coloured shipping method pricelabels - change colour add-to-cart button - change favorites icon in top menu - mobile menu improvements - sidepanel width - hide sentinel from carousel - more info adjustments - adjust load more products button on plp - fix margin sizechart link on customized sweater pdp - remove storelocator from header - remove store check link from pdp - remove grey background on register page - make minicart button green - fix meganav dropdown - remove sticky usp content slot on pdp - adjust z-index of sidepanel on PDP - make hero products full width on tablet - display icon on active filter button - fix sticker position on product set page - hide content slot content from PDP sidepanel - add margin to online stock message on PDP - fix slot tile alignment on PLP - country selector positioning - make certona carousel two columned on mobile - remove header from highlighted products from home and main pages - cart pages fixes - fix position of stickers on PDP - remove margin on delivery option text on cart page - remove duplicate usps in sidepanel on mobile - fix layout of sidepanel in favour of variantSelector - hide countries from store locator - remove uppercase styling from navigation - display product images in return portal on mobile **/ /************************************************************************* 01.0 Global *************************************************************************/ /*********/ /* fonts */ /*********/ /* Added at 08.04.20. */ /* Edited at 12.05.20. Removed workaround fonts. */ /* @font-face { font-family: 'FuturaPT-Book'; src: url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-Book.eot'); src: url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-Book.eot?#iefix') format('embedded-opentype'), url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-Book.woff') format('woff'); font-weight: 400; font-style: normal; mso-font-alt: 'Arial'; } @font-face { font-family: 'FuturaPT-Medium'; src: url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-Medium.eot'); src: url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-Medium.eot?#iefix') format('embedded-opentype'), url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-Medium.woff') format('woff'); font-weight: 500; font-style: normal; mso-font-alt: 'Arial'; } @font-face { font-family: 'FuturaPT-Heavy'; src: url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-Heavy.eot'); src: url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-Heavy.eot?#iefix') format('embedded-opentype'), url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-Heavy.woff') format('woff'); font-weight: 700; font-style: normal; mso-font-alt: 'Arial'; } @font-face { font-family: 'FuturaPT-Demi'; src: url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-Demi.eot'); src: url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-Demi.eot?#iefix') format('embedded-opentype'), url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-Demi.woff') format('woff'); font-weight: 600; font-style: normal; mso-font-alt: 'Arial'; } @font-face { font-family: 'FuturaPT-Bold'; src: url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-Bold.eot'); src: url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-Bold.eot?#iefix') format('embedded-opentype'), url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-Bold.woff') format('woff'); font-weight: 500; font-style: normal; mso-font-alt: 'Arial'; } @font-face { font-family: 'FuturaPT-ExtraBold'; src: url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-ExtraBold.eot'); src: url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-ExtraBold.eot?#iefix') format('embedded-opentype'), url('https://wefashion.slgnt.eu/scripts/Fonts/FuturaPT-ExtraBold.woff') format('woff'); font-weight: 500; font-style: normal; mso-font-alt: 'Arial'; } */ /***********/ /* 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'. */ 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; } 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 li, ul.bodycopy li { margin: 3px 0; } 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.4em; font-size: 0.6em; } h5.heading sup { top: -0.4em; font-size: 0.6em; } h6.heading sup { top: -0.4em; font-size: 0.6em; } p.bodycopy .label.large { margin: 5px; } div.hSpace { margin-top: 12px; } } /* responsiveness */ /* @media only screen and (min-width: 1600px){ h1.heading { font-size: 50px; } h2.heading { font-size: 28px; } h3.heading { font-size: 24px; } h4.heading { font-size: 22px; } h5.heading { font-size: 18px; } } @media only screen and (min-width: 850px) and (max-width: 1600px){ h1.heading { font-size: 3.125vw; } h2.heading {} h3.heading {} h4.heading { font-size: min(2.588vw, 26px); } h5.heading {} #primary:not(.content-nonav) h1.heading { font-size: calc( (3.125 / 100) * (100vw - 230px)); } #primary:not(.content-nonav) h4.heading { font-size: min(calc( (2.588 / 100) * (100vw - 230px)), 26px); } } @media only screen and (min-width: 420px) and (max-width: 850px){ h1.heading { font-size: 6.2vw; } h2.heading {} h3.heading {} h4.heading { font-size: 4.286vw; } h5.heading {} } @media only screen and (max-width: 420px){ 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; } } */ /* 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: 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; } /* additional effects/animations */ /* sale */ .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; } } .dropExtraSaleShadow, .inverse p.bodycopy.dropExtraSaleShadow { text-shadow: #D1102D 0.06em 0.06em, #000 0.07em 0.08em; } .dropExtraSaleShadow.animated { animation-name: dropExtraSaleShadow; -webkit-animation-name: dropExtraSaleShadow; animation-duration: 3.0s; -webkit-animation-duration: 3.0s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes dropExtraSaleShadow { 0% { text-shadow: #D1102D 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: #D1102D 0.06em 0.06em, #000 0.07em 0.08em; } } @-webkit-keyframes dropExtraSaleShadow { 0% { text-shadow: #D1102D 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: #D1102D 0.06em 0.06em, #000 0.07em 0.08em; } } .dropSaleGoldShadow { text-shadow: #E99F00 0.06em 0.06em, #000 0.07em 0.08em; } .dropSaleGoldShadow.animated { animation-name: dropSaleGoldShadow; -webkit-animation-name: dropSaleGoldShadow; animation-duration: 3.0s; -webkit-animation-duration: 3.0s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes dropSaleGoldShadow { 0% { text-shadow: #E99F00 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: #E99F00 0.06em 0.06em, #000 0.07em 0.08em; } } @-webkit-keyframes dropSaleGoldShadow { 0% { text-shadow: #E99F00 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: #E99F00 0.06em 0.06em, #000 0.07em 0.08em; } } /* memberevent */ .memberEventShowHide { animation: memberEventShowHide 5.0s infinite; -webkit-animation: memberEventShowHide 5.0s infinite; } @keyframes memberEventShowHide { 0% { opacity: 0; } 20% { opacity: 0; } 40% { opacity: 0; } 60% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes memberEventShowHide { 0% { opacity: 0; } 20% { opacity: 0; } 40% { opacity: 0; } 60% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } } .memberEventLeftways { animation: memberEventLeftways 5.0s infinite; -webkit-animation: memberEventLeftways 5.0s infinite; } @keyframes memberEventLeftways { 0% { right: 0; } 20% { right: 39%; } 40% { right: 39%; } 60% { right: 0; } 100% { right: 0; } } @-webkit-keyframes memberEventLeftways { 0% { right: 0; } 20% { right: 39%; } 40% { right: 39%; } 60% { right: 0; } 100% { right: 0; } } .memberEventRightways { animation: memberEventRightways 5.0s infinite; -webkit-animation: memberEventRightways 5.0s infinite; } @keyframes memberEventRightways { 0% { left: 0; } 20% { left: 39%; } 40% { left: 39%; } 60% { left: 0; } 100% { left: 0; } } @-webkit-keyframes memberEventRightways { 0% { left: 0; } 20% { left: 39%; } 40% { left: 39%; } 60% { left: 0; } 100% { left: 0; } } .memberEventFlickering { animation: memberEventFlickering 5.0s infinite; -webkit-animation: memberEventFlickering 5.0s infinite; } @keyframes memberEventFlickering { 0% {} 20% {} 40% {} 60% { opacity: 1; } 61% { opacity: 0; } 62% { opacity: 1; } 80% { opacity: 1; } 81% { opacity: 0; } 82% { opacity: 1; } 90% { opacity: 1; } 100% {} } @-webkit-keyframes memberEventFlickering { 0% {} 20% {} 40% {} 60% { opacity: 1; } 61% { opacity: 0; } 62% { opacity: 1; } 80% { opacity: 1; } 81% { opacity: 0; } 82% { opacity: 1; } 90% { opacity: 1; } 100% {} } /* 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; } /* 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. */ /* 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.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: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/2021_HL01/icon-sprite.svg'); } .globalIcon.sprite._xxl:after { background-image: url('../icons/2021_HL01/icon-sprite.svg'); background-size: calc(1056px * 5.33); } .globalIcon.sprite._xl:after { background-image: url('../icons/2021_HL01/icon-sprite.svg'); background-size: calc(1056px * 3); } .globalIcon.sprite._l:after { background-image: url('../icons/2021_HL01/icon-sprite.svg'); background-size: calc(1056px * 2); } .globalIcon.sprite._m:after { background-image: url('../icons/2021_HL01/icon-sprite.svg'); background-size: calc(1056px * 1); } .globalIcon.sprite._s:after { background-image: url('../icons/2021_HL01/icon-sprite.svg'); background-size: calc(1056px * 0.66); } .globalIcon.sprite._xs:after { background-image: url('../icons/2021_HL01/icon-sprite.svg'); background-size: calc(1056px * 0.5); } .globalIcon.sprite._xxs:after { background-image: url('../icons/2021_HL01/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.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.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)); } /* mask */ .globalIcon.spriteMask:after { content: ''; display: block; width: 100%; height: 100%; -webkit-mask-image: url('../icons/2021_HL01/icon-sprite.svg'); mask-image: url('../icons/2021_HL01/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._xxl:after { -webkit-mask-image: url('../icons/2021_HL01/icon-sprite.svg'); mask-image: url('../icons/2021_HL01/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/2021_HL01/icon-sprite.svg'); mask-image: url('../icons/2021_HL01/icon-sprite.svg'); -webkit-mask-size: calc(1056px * 3); mask-size: calc(1056px * 3); } .globalIcon.spriteMask._l:after { -webkit-mask-image: url('../icons/2021_HL01/icon-sprite.svg'); mask-image: url('../icons/2021_HL01/icon-sprite.svg'); -webkit-mask-size: calc(1056px * 2); mask-size: calc(1056px * 2); } .globalIcon.spriteMask._m:after { -webkit-mask-image: url('../icons/2021_HL01/icon-sprite.svg'); mask-image: url('../icons/2021_HL01/icon-sprite.svg'); -webkit-mask-size: calc(1056px * 1); mask-size: calc(1056px * 1); } .globalIcon.spriteMask._s:after { -webkit-mask-image: url('../icons/2021_HL01/icon-sprite.svg'); mask-image: url('../icons/2021_HL01/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/2021_HL01/icon-sprite.svg'); mask-image: url('../icons/2021_HL01/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/2021_HL01/icon-sprite.svg'); mask-image: url('../icons/2021_HL01/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.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.deliverytime: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.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.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.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; } /************/ /* viewport */ /************/ .viewPort { max-width: 1600px; margin: 0 auto; } .viewPortStatic { max-width: 1400px; margin: 0 auto; } /**************/ /* image maps */ /**************/ /* Edited at 25.07.19. Added flexbox to arrange text in extra layer. */ .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; } /* 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; } } /************/ /* captions */ /************/ /* Edited at 25.07.19. Added new range of styling. */ /* Edited at 09.10.19. Removed old range of styling. */ /* new */ .captionWrapper { display: block; width: 100%; } .captionWrapper .caption { display: block; } .captionWrapper .caption .headingPlaceholder { margin-top: 20px; } .captionWrapper .caption .heading { margin: 20px auto 15px; } /********/ /* 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. */ /* buttons */ .ctas.bttns { display: flex; flex-direction: row; margin: 0 auto; } .left .ctas.bttns { justify-content: start; margin: inherit; } .center .ctas.bttns { justify-content: center; margin: inherit; } .right .ctas.bttns { justify-content: end; margin: inherit; } .ctas.bttns .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-block; text-align: center; } .ctas.bttns.gold .cta { color: #202020; background-color: #c5a534; } .ctas.bttns .cta u { text-decoration: none; } /* desktop only */ @media only screen and (min-width: 850px) { .ctas.bttns .cta:first-child { margin-left: 0; } .ctas.bttns .cta:last-child { margin-right: 0; } .ctas.bttns .cta:hover { background-color: #111; } .ctas.bttns.gold .cta:hover { background-color: #c5a534; } } /* mobile only */ @media only screen and (max-width: 850px) { .ctas.bttns { flex-direction: column; } .ctas.bttns .cta { margin: 5px 0; } .ctas.bttns .cta:first-child { margin-top: 15px; } .ctas.bttns .cta:last-child { margin-bottom: 15px; } } /*******************/ /* 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; } /**********/ /* videos */ /**********/ /* Added at 30.03.18. */ /* Edited at 30.03.18. */ /* Edited at 09.04.20. Added unmute/mute button. */ .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'); } /**********************/ /* product thumbnails */ /**********************/ /* Added at 15.04.21. This is supposed to be used for interactive videos. */ /* Added at 10.06.21. Added shadow to product thumbnails. */ .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 > .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; } } /***********/ /* fittext */ /***********/ /* Added at 25.04.19. */ .fittextWrapper { position: absolute; } .fittextWrapper .fittext { text-align: center; font-family: 'Futura PT W01 Book', arial, sans-serif; width: 100%; margin: 0; line-height: 0.8em; color: #fff; } .fittextWrapper .fittext.uppercase { text-transform: uppercase; } .fittextWrapper .fittext.heavy { font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .fittextWrapper .fittext.inverse { color: #000; } /***************/ /* scroll icon */ /***************/ /* Added at 20.11.19. */ /* Edited at 05.12.19. Changed size for mobile. */ /* Edited at 30.12.20. Added inverse variation. */ .scrollIconWrapper { width: 100%; height: 50px; position: relative; } .scrollIconWrapper .scrollIcon { position: absolute; top: 50%; left: 50%; 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 .scrollIcon:before, .scrollIconWrapper .scrollIcon:after { content: ''; display: block; width: 14px; height: 14px; border: 2px solid #000; border-top: 0; border-right: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .inverse .scrollIconWrapper .scrollIcon:before, .inverse .scrollIconWrapper .scrollIcon:after { border: 2px solid #fff; border-top: 0; border-right: 0; } .scrollIconWrapper .scrollIcon:before { } .scrollIconWrapper .scrollIcon:after { -webkit-transform: translatey(-50%) rotate(-45deg); transform: 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 .scrollIcon:before, .scrollIconWrapper .scrollIcon:after { width: 12px; height: 12px; } } /******************/ /* fade on scroll */ /******************/ /* Added at 28.01.21. */ /*[data-fade-on-scroll] { display: none; } */ /************************************************************************* 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. */ /* 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); } } /* 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; } } /* 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; } /********************/ /* sidepanel-iframe */ /********************/ /* Edited at 11.03.21. Replaced loader icon. */ .sidepanel-iframe-loader { 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.9); } .sidepanel-iframe-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; overflow-y: scroll; } .sidepanel-iframe { width: 100%; height: 100%; display: none; background: #fff; } /* ios devices */ .ua_ios .sidepanel-iframe-wrapper { -webkit-overflow-scrolling: touch; } .ua_ios iframe.sidepanel-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*********/ /* 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. */ .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; background: url('../icons/close.png?$staticlink$') no-repeat 8px 7px; cursor: pointer; z-index: 2; } @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; background: url('../icons/close_invert.png?$staticlink$') no-repeat 8px 7px; transform: translatey(-100%); -webkit-transform: translatey(-100%); } } /* 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.viewDetailImgPopup {} .popupNotificationWrapper.viewDetailImgPopup .popupNotificationOverlay { background: rgba(0, 0, 0, 0.8) url('../icons/2020_HL03/overlay-loader.gif') center center no-repeat; } .popupNotificationWrapper.viewDetailImgPopup .popupNotificationContainer { position: fixed; max-width: calc(539px + 60px); overflow: hidden; } .popupNotificationWrapper.viewDetailImgPopup .popupNotificationContainer .popupNotificationClose { background: url('../icons/close_invert.png?$staticlink$') no-repeat 8px 7px; } .ua_ios .popupNotificationWrapper.viewDetailImgPopup .popupNotificationContainer .popupNotification { padding-top: 0; } @media only screen and (max-width : 850px){ .popupNotificationWrapper.viewDetailImgPopup .popupNotificationContainer { width: 85%; } .popupNotificationWrapper.viewDetailImgPopup .popupNotificationContainer .popupNotificationClose { top: 15px; right: 15px; transform: none; -webkit-transform: none; } /* fix */ .ua_ios .popupNotificationWrapper.viewDetailImgPopup .popupNotificationContainer .popupNotification { padding-top: 0; } } /*************/ /* popup bar */ /*************/ /* Added at 06.10.20. */ /* Edited at 07.10.20. Finalized styling. */ .popupBarWrapper { display: none; position: fixed; width: 100%; bottom: 40px; z-index: 99; } .popupBarWrapper .popupBar { display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: center; position: relative; } .popupBarWrapper .popupBar .popupBarContent { width: 100%; max-width: 1600px; } .popupBarWrapper .popupBar .popupBarClose { position: absolute; top: 0; right: 0; cursor: pointer; z-index: 3; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .popupBarWrapper.general {} .popupBarWrapper.general .popupBar { background-color: #E5E5E5; } .popupBarWrapper.general .popupBar .popupBarClose { top: 0; right: 0; } .popupBarWrapper.general .popupBar .popupBarContent { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 20px 0; } .popupBarWrapper.general .popupBar .popupBarContent .imageWrapper { position: relative; width: 200px; height: 0px; margin-left: 20px; margin-right: 10px; } .popupBarWrapper.general .popupBar .popupBarContent .imageWrapper img { position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .popupBarWrapper.general .popupBar .popupBarContent .copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-left: 10px; margin-right: 48px; } .popupBarWrapper.general .popupBar .popupBarContent .copy p.bodycopy { margin: 0 5px; } .popupBarWrapper.general .popupBar .popupBarContent .copy p.ctas.bttns { margin: 0; } .popupBarWrapper.general .popupBar .popupBarContent .copy p.ctas.bttns a { margin-bottom: 0; } @media only screen and (max-width : 850px){ .popupBarWrapper.general .popupBar .popupBarClose { top: 0; right: 0; } .popupBarWrapper.general .popupBar .popupBarContent { padding: 10px 0; flex-direction: column; padding: 0 0 20px; } .popupBarWrapper.general .popupBar .popupBarContent .imageWrapper { width: 150px; margin-left: 10px; } .popupBarWrapper.general .popupBar .popupBarContent .imageWrapper img { -webkit-transform: translate(-50%, -65%); transform: translate(-50%, -65%); } .popupBarWrapper.general .popupBar .popupBarContent .copy { flex-direction: column; align-items: flex-start; align-items: center; justify-content: center; margin: 65px 10px 0; } .popupBarWrapper.general .popupBar .popupBarContent .copy p.bodycopy { margin: 5px 0; text-align: center; } } /* specific styling */ .popupBarWrapper#faceMaskPopupBar {} .popupBarWrapper#faceMaskPopupBar .popupBar { background-color: #E5E5E5; } .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarClose { top: 0; right: 0; } .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarContent { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 55px 0; } .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarContent .imageWrapper { position: relative; width: 200px; height: 0px; margin-left: 20px; margin-right: 10px; } .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarContent .imageWrapper img { position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarContent .copy { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-left: 10px; margin-right: 48px; } .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarContent .copy p.bodycopy { margin: 0 5px; } .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarContent .copy p.bodycopy:first-child { margin-left: 0; } .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarContent .copy p.bodycopy:last-child { margin-right: 0; } .popupBarWrapper#faceMaskPopupBar .popupBar .areas a[href*="product-show?pid="] { display: none; } @media only screen and (min-width : 850px){ .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarContent .copy p.bodycopy { font-size: 1.25em; } } @media only screen and (max-width : 850px){ .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarClose { top: 0; right: 0; } .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarContent { padding: 10px 0; } .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarContent .imageWrapper { width: 180px; margin-left: 10px; } .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarContent .copy { flex-direction: column; align-items: flex-start; justify-content: center; margin-right: 48px; } .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarContent .copy p.bodycopy { margin: 5px 0; } .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarContent .copy p.bodycopy:first-child { margin: 0; } .popupBarWrapper#faceMaskPopupBar .popupBar .popupBarContent .copy p.bodycopy:last-child { margin-bottom: 0; } } /************/ /* 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. */ .product-url .hotspot { position: absolute; z-index: 2; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .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 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 .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. */ .wishHotspot { position: absolute; z-index: 2; opacity: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .wishHotspot.initialized { opacity: 1; } .wishHotspot.inverse .product-lovebutton:before { background-position: -234px -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; } /********/ /* USPs */ /********/ /* Edited at 05.07.19. Moved hotfix to hide this on the main pages to hotfixes section. */ .usp-slot-container { display: inline; float: right; } .usp-slot-container .usp-slot { position: relative; } .usp-slot-container .usp-slot p { text-align: right; } .usp-slot-container .usp-slot p .beCommerce { margin: -7px 0 0 5px; } .usp-slot-container .usp-slot p a { color: #ff6402; } /* Responsive & adaptive */ @media only screen and (max-width: 850px) { .usp-slot-container { float: none; } .usp-slot-container .usp-slot p { padding: 0 15px; } } @media only screen and (max-width : 420px){ .usp-slot-container .usp-slot p { padding: 0; } .usp-slot-container .html-slot-container { right: 20px; } } /* homepage */ .page-home .usp-slot-container { display: block; float: none; overflow: hidden; } .page-home .usp-slot-container .usp-slot { width: 100%; } .page-home .usp-slot-container .usp-slot p { text-align: center; } /* USP bar */ .usp_bar { width: 80%; margin: 0 0 0 auto; padding-top: 4px; } .usp_bar img { width: 100%; } /* homepage */ .page-home .usp_bar { width: 80%; margin: 0 auto; padding: 4px 0; } /************/ /* SVG text */ /************/ /* Edited at 05.07.19. Cleaned up code a bit. */ .svgWrapper .subSvg {} .svgWrapper .subSvg.heading {} .svgWrapper .subSvg.heading .text { font-family: 'Futura PT W01 Heavy', arial, sans-serif; font-weight: normal; text-rendering: geometricPrecision; } .svgWrapper .subSvg.heading .text.medium { font-family: 'Futura PT W01 Medium', arial, sans-serif; } .svgWrapper .subSvg.heading .text.bold { font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .svgWrapper .subSvg.subheading {} .svgWrapper .subSvg.subheading .text { font-family: 'Futura PT W01 Book', arial, sans-serif; font-weight: normal; text-rendering: geometricPrecision; } .svgWrapper .subSvg.subheading .text.medium { font-family: 'Futura PT W01 Medium', arial, sans-serif; } .svgWrapper .subSvg.subheading .text.bold { font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .svgWrapper .subSvg.body {} .svgWrapper .subSvg.body .text { font-family: 'Futura PT W01 Book', arial, sans-serif; font-weight: normal; text-rendering: geometricPrecision; } .svgWrapper .subSvg.body .text.medium { font-family: 'Futura PT W01 Medium', arial, sans-serif; } .svgWrapper .subSvg.body .text.bold { font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .svgWrapper .subSvg.hr {} .svgWrapper .subSvg.hr .rect {} .svgWrapper .subSvg.ctas {} .svgWrapper .subSvg.ctas .subSvg.cta {} .svgWrapper .subSvg.ctas .subSvg.cta .k { fill: none; stroke-width: 1; } .svgWrapper .subSvg.ctas .subSvg.cta .text { font-family: 'Futura PT W01 Book', arial, sans-serif; font-weight: normal; text-rendering: geometricPrecision; } .svgWrapper .subSvg.ctas .subSvg.cta .rect { fill: none; } /* general */ /* This is the default styling */ .svgWrapper .subSvg {} .svgWrapper .subSvg.heading {} .svgWrapper .subSvg.heading .text { fill: #000; text-transform: uppercase; } .svgWrapper .subSvg.subheading {} .svgWrapper .subSvg.subheading .text { fill: #000; } .svgWrapper .subSvg.subheading .text.bold { text-transform: uppercase; } .svgWrapper .subSvg.hr { stroke: #000; stroke-width: 1; } .svgWrapper .subSvg.hr .rect { fill: #000; } .svgWrapper .subSvg.ctas {} .svgWrapper .subSvg.ctas .subSvg.cta {} .svgWrapper .subSvg.ctas .subSvg.cta .rect { stroke: #000; } .svgWrapper .subSvg.ctas .subSvg.cta .text { fill: #000; } /* imprint */ /* This is the styling on the 'imprint' page on DE. */ .svgWrapper.imprint .subSvg {} .svgWrapper.imprint .subSvg.heading {} .svgWrapper.imprint .subSvg.heading .text { fill: #58585A; } .svgWrapper.imprint .subSvg.heading .text.bold {} .svgWrapper.imprint .subSvg.subheading {} .svgWrapper.imprint .subSvg.subheading .text { fill: #58585A; font-family: 'Futura PT W01 Book', arial, sans-serif; text-transform: none; } .svgWrapper.imprint .subSvg.subheading .text.bold {} .svgWrapper.imprint .subSvg.hr {} .svgWrapper.imprint .subSvg.hr .rect { fill: #58585A; } .svgWrapper.imprint .subSvg.ctas {} .svgWrapper.imprint .subSvg.ctas .subSvg.cta {} .svgWrapper.imprint .subSvg.ctas .subSvg.cta .rect { stroke: #58585A; } .svgWrapper.imprint .subSvg.ctas .subSvg.cta .text { fill: #58585A; } .svgWrapper.imprint .subSvg.stroke { stroke: #58585A; stroke-width: 4; } .svgWrapper.imprint .subSvg.stroke.bold { stroke-width: 8; } /* subNavigation */ /* This is the styling on the subnavigation on main pages */ .svgWrapper.subNavigation .subSvg {} .svgWrapper.subNavigation .subSvg.heading .text { fill: #000; text-transform: uppercase; } .svgWrapper.subNavigation .subSvg.heading .text {} .svgWrapper.subNavigation .subSvg.subheading {} .svgWrapper.subNavigation .subSvg.subheading .text { fill: #000; } .svgWrapper.subNavigation .subSvg.subheading .text.bold { text-transform: uppercase; } .svgWrapper.subNavigation .subSvg.hr { stroke: #000; stroke-width: 1; } .svgWrapper.subNavigation .subSvg.hr .rect {} .svgWrapper.subNavigation .subSvg.ctas {} .svgWrapper.subNavigation .subSvg.ctas .subSvg.cta {} .svgWrapper.subNavigation .subSvg.ctas .subSvg.cta .rect { stroke: #000; } .svgWrapper.subNavigation .subSvg.ctas .subSvg.cta .text { fill: #000; font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-transform: uppercase; } /* detailLabel */ /* This is the styling on the label text on detail triggers */ .svgWrapper.detailLabel.left { position: absolute; top: 50%; left: -50%; transform: translate(-100%, -55%); } .svgWrapper.detailLabel.right { position: absolute; top: 50%; left: 0; transform: translate(50%, -55%); } .svgWrapper.detailLabel .subSvg {} .svgWrapper.detailLabel .subSvg.heading .text { fill: #fff; text-transform: uppercase; } .svgWrapper.detailLabel.inverse .subSvg.heading .text { fill: #000; text-transform: uppercase; } .svgWrapper.detailLabel .subSvg.heading .text {} .svgWrapper.detailLabel .subSvg.subheading {} .svgWrapper.detailLabel .subSvg.subheading .text { fill: #fff; } .svgWrapper.detailLabel.inverse .subSvg.subheading .text { fill: #000; } .svgWrapper.detailLabel .subSvg.subheading .text.bold { text-transform: uppercase; } .svgWrapper.detailLabel .subSvg.body {} .svgWrapper.detailLabel .subSvg.body .text { fill: #fff; } .svgWrapper.detailLabel.inverse .subSvg.body .text { fill: #000; } .svgWrapper.detailLabel .subSvg.body .text.medium {} .svgWrapper.detailLabel .subSvg.body .text.bold {} /************/ /* 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. */ /* general */ .stickerWrapper { position: relative; } .stickerWrapper.ellipse {} .stickerWrapper a { text-decoration: none; cursor: pointer; } .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: 9px; line-height: 14px; } .stickerWrapper.ellipse .sticker .stickerContent p { font-size: 15px; line-height: 18px; } .stickerWrapper.ellipse .sticker .stickerContent p .small { display: none; } } /* presale (fix, need to be relooked at) */ /* Note: Added at 07.12.18. Last edited at 07.12.18. */ .stickerWrapper.presale {} .stickerWrapper.presale:first-child {} .stickerWrapper.presale .sticker {} .stickerWrapper.presale .sticker .stickerContent { padding: 1px; } .stickerWrapper.presale .sticker .stickerContent p { font-size: 8.5px; } @media only screen and (max-width: 850px){ .stickerWrapper.presale .sticker {} .stickerWrapper.presale .sticker .stickerContent p {} } /* linda variation */ /* Added at 09.10.19. */ .stickerWrapper.linda .imageMap { width: 76px; } @media only screen and (max-width: 850px){ .stickerWrapper.linda .imageMap { width: 71px; } } /* power price paradise */ /* Added at 04.09.20. */ .stickerWrapper.powerPriceParadise { width: 76px; margin-left: 10px; } @media only screen and (max-width: 850px){ .stickerWrapper.powerPriceParadise { width: 55px; } .page-pdp #product-content .stickerWrapper.powerPriceParadise, .page-pdp #product-set-list .stickerWrapper.powerPriceParadise { transform: translatey(-30px); } } /* salty dog */ /* Added at 07.05.21. This is a new variation which replaces the old one. */ .stickerWrapper.saltyDogKids { width: 85px; } .stickerWrapper.saltyDogKids .imageMap { background-color: #D4D219; padding: 3px; } .stickerWrapper.saltyDogKids .imageMap .imgHolder { -webkit-mask-image: url('../Category pages/_men/2021_HL06/sticker-salty-dog.svg'); mask-image: url('../Category pages/_men/2021_HL06/sticker-salty-dog.svg'); padding-top: 18.6%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: #fff; } .stickerWrapper.saltyDogMen { width: 85px; } .stickerWrapper.saltyDogMen .imageMap { background-color: #000; padding: 3px; } .stickerWrapper.saltyDogMen .imageMap .imgHolder { -webkit-mask-image: url('../Category pages/_kids/2021_HL06/sticker-salty-dog.svg'); mask-image: url('../Category pages/_kids/2021_HL06/sticker-salty-dog.svg'); padding-top: 18.6%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: #fff; } @media only screen and (max-width: 850px){ .stickerWrapper.saltyDogKids { width: 60px; } .page-pdp #product-content .stickerWrapper.saltyDogKids, .page-pdp #product-set-list .stickerWrapper.saltyDogKids { transform: translatey(-5px); } .stickerWrapper.saltyDogMen { width: 60px; } .page-pdp #product-content .stickerWrapper.saltyDogMen, .page-pdp #product-set-list .stickerWrapper.saltyDogMen { transform: translatey(-5px); } } /* plp specific */ /* Added at 21.05.19. Hide stickers from product sets on PLP. */ /* Edited at 09.09.19. Turned css off at Ferdinands' request. */ /* body[class*="page-category-"] .product-tile[data-itemid*="_set"] .stickerWrapper { display: none; } body[class*="page-category-"] .product-tile[data-itemid*="_set"] .stickerWrapper[data-plp-visible] { display: block; } */ /* Added at 13.01.21. */ body[class*="page-category-"] .product-tile[data-itemid*="_set"] .stickerWrapper[data-plp-visible="no"], body.page-productsearchresult .product-tile[data-itemid*="_set"] .stickerWrapper[data-plp-visible="no"] { display: none; } /* Edited at 15.09.20. Added changes to stickers on mobile PDP. */ /* pdp (changes) */ .page-pdp #product-content .stickerWrapper, .page-pdp #product-set-list .stickerWrapper { float: left; margin-right: 8px; margin-bottom: 8px; } .page-pdp #product-content .stickerWrapper:first-child, .page-pdp #product-set-list .stickerWrapper:first-child { margin-top: 0; } .page-pdp #product-content .stickerWrapper .sticker, .page-pdp #product-set-list .stickerWrapper .sticker { margin: 0; } .page-pdp #product-content .stickerWrapper .imageMap, .page-pdp #product-set-list .stickerWrapper .imageMap { margin: 0; } @media only screen and (max-width: 850px){ .page-pdp #product-content .stickerWrapper { margin: 0 8px 0 0; } .page-pdp #product-content .stickerWrapper:last-child { margin-right: 0; } .page-pdp #product-set-list .stickerWrapper { margin-bottom: 0; } .page-pdp #product-content .stickerWrapper.ellipse, .page-pdp #product-set-list .stickerWrapper.ellipse { -webkit-transform: translatey(-45px); transform: translatey(-45px); margin-right: 0; } .page-pdp #product-content .stickerWrapper.ellipse .sticker, .page-pdp #product-set-list .stickerWrapper.ellipse .sticker { width: 65px; height: 65px; } .page-pdp #product-content .stickerWrapper .sticker .stickerContent, .page-pdp #product-set-list .stickerWrapper .sticker .stickerContent { padding: 1px 5px; } .page-pdp #product-content .stickerWrapper .sticker .stickerContent p, .page-pdp #product-set-list .stickerWrapper .sticker .stickerContent p { font-size: 11px; line-height: 15px; } .page-pdp #product-content .stickerWrapper.ellipse .sticker .stickerContent p, .page-pdp #product-set-list .stickerWrapper.ellipse .sticker .stickerContent p { font-size: 18px; line-height: 22px; } /* hotfix. Added at 13.05.19. Put stickers in a row instead of below one another. */ .pdp-addToCart__mobile .pdp-main-subtitle .promotion { display: flex; } /* hotfix. Added at 17.09.20. Align stickers to the right. */ /* hotfix. Edited at 04.03.21. Align stickers to the center (vertically). */ .pdp-addToCart .promotion .content-asset { justify-content: flex-end; align-items: center; } } /* overlay */ .pdp-quick-overlay .promotion { display: inline-block; margin-bottom: 1.5em; } .pdp-quick-overlay .promotion .stickerWrapper { margin-top: 0; display: inline-block; margin-right: 5px; } /*******************/ /* category labels */ /*******************/ /* Added at 25.04.19. */ /* Edited at 08.06.21. Updated padding for mobile. */ /* general */ .plpTagWrapper { position: relative; text-align: center; } .plpTagWrapper .plpTag { background: #000; margin-top: 10px; display: inline-block; } .plpTagWrapper .plpTag .plpTagContent { padding: 0 10px; color: #fff; } .plpTagWrapper .plpTag .plpTagContent p { margin: 0; font-family: 'Futura PT W01 Medium', arial, sans-serif; cursor: default; text-align: center; font-size: 12px; line-height: 25px; font-weight: normal; letter-spacing: 1px; } .plpTagWrapper .plpTag .plpTagContent 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){ .plpTagWrapper .plpTag .plpTagContent { padding: 0 5px; } .plpTagWrapper .plpTag .plpTagContent p { font-size: 10px; line-height: 15px; } } /************/ /* confetti */ /************/ .confettiWrapper { position: absolute; width: 100%; bottom: 0; left: 0; z-index: 150; } .confettiWrapper .confettiContent { position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .confettiWrapper .confettiContent .confettiBack { position: absolute; } .confettiWrapper .confettiContent .confettiFront { position: absolute; } /*****************/ /* feedback tool */ /*****************/ /* Edited at 18.05.20. Rebuilt entire function. This now links to a VWO survey to collect feedback. */ /* trigger button */ .vwoFeedbackTriggerWrapper { position: absolute; top: 0; right: 0; width: 100%; } .vwoFeedbackTriggerWrapper .vwoFeedbackTrigger { position: fixed; bottom: 15px; right: 15px; width: 38px; height: 38px; cursor: pointer; z-index: 99; } .vwoFeedbackTriggerWrapper .vwoFeedbackTrigger:after { content: ''; display: block; width: 38px; height: 38px; background-image: url('../icons/2020_HL06/we_icon_feedback.svg'); } /********************/ /* smart conditions */ /********************/ .smartConditionsWrapper {} .smartConditionsWrapper .smartConditions {} .smartConditionsWrapper .smartConditions h1 {} .smartConditionsWrapper .smartConditions h1.uppercase { text-transform: uppercase; } .smartConditionsWrapper .smartConditions p {} .smartConditionsWrapper .smartConditions p b {} /************************/ /* image detail trigger */ /************************/ [data-detail-trigger-wrapper] { position: absolute; width: 100%; z-index: 2; } [data-detail-trigger-wrapper] [data-detail-trigger] { display: block; position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.25); cursor: pointer; transition: all ease 0.2s; -webkit-transition: all ease 0.2s; } [data-detail-trigger-wrapper] [data-detail-trigger] .dot { display: block; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.8); transition: all ease 0.2s; -webkit-transition: all ease 0.2s; } [data-detail-trigger-wrapper] [data-detail-trigger]:hover { width: 32px; height: 32px; background: rgba(255, 255, 255, 0.5); } [data-detail-trigger-wrapper] [data-detail-trigger]:hover .dot { width: 22px; height: 22px; background: rgba(255, 255, 255, 1.0); } [data-detail-trigger-wrapper] [data-detail] { width: 0; height: 0; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: hidden; border-radius: 50%; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; cursor: pointer; border: 0; } [data-detail-trigger-wrapper] [data-detail].active { width: 100%; height: auto; border: 5px solid rgba(255, 255, 255, 0.25); } [data-detail-trigger-wrapper] [data-detail-label] { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } [data-detail-trigger-wrapper] .inverse [data-detail-label] { } /* inverse styling */ .inverse[data-detail-trigger-wrapper] [data-detail-trigger] { background: rgba(0, 0, 0, 0.25); } .inverse[data-detail-trigger-wrapper] [data-detail-trigger] .dot { background: rgba(0, 0, 0, 0.8); } .inverse[data-detail-trigger-wrapper] [data-detail] { border: 0; } /****************/ /* 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. */ .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; background: url('../icons/close.png?$staticlink$') no-repeat 8px 7px; cursor: pointer; z-index: 3; } .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: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; } .stickyPageMessageWrapper .stickyPageMessage .stickyPageMessageContent.product .copyWrapper { display: flex; flex-direction: column; justify-content: center; } /* page message banner */ [data-page-message-banner] { display: none; } .stickyPageMessageWrapper [data-page-message-banner] { display: block; } /* on pdp */ @media only screen and (max-width : 850px){ .page-pdp .stickyPageMessageWrapper { bottom: 120px; } } /***********************/ /* bannerrow slideshow */ /***********************/ /* Edited at 05.07.19. Updated mediaquery for pager */ /* Edited at 20.05.20. Added specific styling for AfterPay and Klarna bannerrow in sidepanel PDP. */ .bannerrow { position: relative; width: 100%; min-height: 40px; margin: 0 auto; z-index: 1; } .page-home .bannerrow { margin: 0 auto 0.5625%; } .page-category-11 .bannerrow, .page-category-12 .bannerrow, .page-category-00 .bannerrow, .page-category-sale .bannerrow { margin: 0 auto 0.75%; } @media only screen and (max-width : 850px){ .bannerrow { min-height: auto; } .page-home .bannerrow { margin: 0 auto 0.5625%; } .page-category-11 .bannerrow, .page-category-12 .bannerrow, .page-category-00 .bannerrow, .page-category-sale .bannerrow { margin: 0 auto 1.5%; } .page-pdp .bannerrow { margin: 0 auto 1.5%; } } /* global */ .bannerrow-slideshow { background: #F2F2F2; width: 100%; } .bannerrow-slideshow .cycle-slide { overflow: auto; } .bannerrow-slideshow .cycle-slide p { display: block; color: #222; text-align: center; font-family: 'Futura PT W01 Book', arial, sans-serif; margin: 0; padding: 0.2em; font-size: 1.6em; line-height: 1.6em; letter-spacing: 0.025em; } .bannerrow-slideshow .cycle-slide p sup { top: -0.3em; } .bannerrow-slideshow .cycle-slide p span.separator { display: inline; } .bannerrow-slideshow .cycle-slide p .ctas {} .bannerrow-slideshow .cycle-slide p .ctas a.cta { line-height: 1.4em; text-transform: none; text-decoration: underline; display: inline; position: relative; margin: 0 0.5em 0 0; text-align: center; transition: all ease 0.3s; -moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; transform: translatey(-0.1em); -webkit-transform: translatey(-0.1em); -moz-transform: translatey(-0.1em); } .bannerrow-slideshow .cycle-slide p .ctas a.cta span { transition: all ease 0.3s; -moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; } @media only screen and (max-width : 850px){ .bannerrow-slideshow .cycle-slide p { font-size: 1.4em; } .bannerrow-slideshow .cycle-slide p .ctas { margin-right: 0; clear: both; display: block; } .bannerrow-slideshow .cycle-slide p span.separator { display: none; } } /* pager */ .bannerrow-slideshow .cycle-custom-pager, .page-home .bannerrow-slideshow .cycle-custom-pager { position: absolute; bottom: 1.5%; left: auto; right: 1.5%; width: 20%; z-index: 150; text-align: right; } /* responsiveness */ @media only screen and (max-width : 480px) { .bannerrow-slideshow .cycle-custom-pager { display: none; } } /* urgency */ .bannerrow-slideshow.urgency { background: #FF690C; } .bannerrow-slideshow.urgency .cycle-slide {} .bannerrow-slideshow.urgency .cycle-slide p { color: #fff; font-family: 'Futura PT W01 Book', arial, sans-serif; font-size: 1.4em; letter-spacing: 0.025em; } .bannerrow-slideshow.urgency .cycle-slide p.sub { font-family: 'Futura PT W01 Book', arial, sans-serif; font-size: 1.3em; text-transform: none; } .bannerrow-slideshow.urgency .cycle-slide p a { color: #fff; } .bannerrow-slideshow.urgency .cycle-slide p .ctas { display: inline; } .bannerrow-slideshow.urgency .cycle-slide p .ctas a.cta { line-height: 1.4em; text-transform: none; text-decoration: underline; display: inline; position: relative; margin: 0 0.5em 0 0; text-align: center; transition: all ease 0.3s; -moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; transform: translatey(-0.1em); -webkit-transform: translatey(-0.1em); -moz-transform: translatey(-0.1em); } .bannerrow-slideshow.urgency .cycle-slide p .ctas a.cta span { font-family: 'Futura PT W01 Medium', arial, sans-serif; color: #fff; transition: all ease 0.3s; -moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; } @media only screen and (max-width : 850px){ .bannerrow-slideshow.urgency .cycle-slide p { font-family: 'Futura PT W01 Medium', arial, sans-serif; font-size: 1.2em; } .bannerrow-slideshow.urgency .cycle-slide p .ctas { display: block; clear: both; } } /* specific */ .overlay #afterPayBannerrow, .overlay #klarnaPayBannerrow { display: none; } /*************/ /* bannerrow */ /*************/ /* Edited at 27.11.18. */ /* Edited at 11.06.19. Do not display delayedHolidayDeliveryBannerrow on mobile home. */ /* Edited at 16.07.19. Changed padding cta underline. */ /* Edited at 19.07.19. Updated 'huge' to meet other heading fontsizes. Removed letterspacing. */ /* Edited at 25.07.19. Updated font sizes as a quick fix to match them with new typography. */ /* Edited at 12.08.19. Added maximum width for bannerrows on the homepage. Now 1920px wide. */ /* Edited at 17.12.19. Added margin to '#delayedHolidayDeliveryBannerrow'. */ /* Edited at 16.04.20. Added bodycopy text. */ /* Edited at 23.12.20. Removed margin of '#delayedHolidayDeliveryBannerrow' on homepage. */ .generalBannerrowWrapper { padding: 10px; max-width: 1600px; margin: 0 auto; } .generalBannerrowWrapper.full { max-width: 100%; } .generalBannerrowWrapper .generalBannerrow {} .generalBannerrowWrapper .generalBannerrow h4 { color: #fff; font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-align: center; margin: 0; font-size: 22px; letter-spacing: 0.05em; text-transform: uppercase; } .generalBannerrowWrapper .generalBannerrow p { color: #fff; font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-align: center; margin: 0; font-size: 15px; line-height: 24px; } .generalBannerrowWrapper .generalBannerrow p.bodycopy { font-family: 'Futura PT W01 Book', arial, sans-serif; } .generalBannerrowWrapper .generalBannerrow p b { font-weight: normal; font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .generalBannerrowWrapper .generalBannerrow p sup { top: -0.25em; } .generalBannerrowWrapper .generalBannerrow p.inverse { color: #000; } .generalBannerrowWrapper .generalBannerrow p .huge { display: inline-block; font-size: 28px; line-height: 10px; -webkit-transform: translateY(50%); transform: translateY(50%); margin-right: 30px; font-size: 22px; } .generalBannerrowWrapper .generalBannerrow p .line {} .generalBannerrowWrapper .generalBannerrow p .uppercase { text-transform: uppercase; } .generalBannerrowWrapper .generalBannerrow p .ctas { margin: 0 0 0 20px; font-size: 11px; } .generalBannerrowWrapper .generalBannerrow p .ctas a.cta { color: #fff; text-decoration: none; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; margin-right: 10px; } .generalBannerrowWrapper .generalBannerrow p .ctas a.cta.stroke { border-bottom: 0; } .generalBannerrowWrapper .generalBannerrow p .ctas a.cta u { text-decoration: none; border-bottom: 1px solid #fff; padding-bottom: 1px; } .generalBannerrowWrapper .generalBannerrow p.inverse .ctas a.cta { color: #000; font-size: 14px; } .generalBannerrowWrapper .generalBannerrow p.inverse .ctas a.cta u { border-bottom: 1px solid #000; } .generalBannerrowWrapper .generalBannerrow p .ctas a.cta:last-child { margin-right: 0; } /* specific */ .generalBannerrowWrapper.koppelVerkoop { padding: 20px 10px; } @media only screen and (min-width: 850px){ .generalBannerrowWrapper .generalBannerrow p .ctas a.cta:hover {} } @media only screen and (max-width: 850px){ .generalBannerrowWrapper { padding: 20px; } .generalBannerrowWrapper .generalBannerrow h4 { font-size: 18px; } .generalBannerrowWrapper .generalBannerrow p .huge { display: inline; line-height: 25px; -webkit-transform: translateY(0); transform: translateY(0); margin-right: 0; font-size: 18px; } .generalBannerrowWrapper .generalBannerrow p .line { display: block; margin: 2px 0 0 0; } .generalBannerrowWrapper .generalBannerrow p .line:first-child { margin: 0 0 0 0; } .generalBannerrowWrapper .generalBannerrow p .ctas { display: block; margin: 8px 0 0 0; } /* specific */ .generalBannerrowWrapper.koppelVerkoop { padding: 36px 10px; } } /* Hide delayedHolidayDeliveryBannerrow on mobile home */ @media only screen and (max-width: 850px){ .page-home .categoryMainGridTile#delayedHolidayDeliveryBannerrow { display: none; } } /* Add margin on top */ #delayedHolidayDeliveryBannerrow { margin-top: 10px; } .page-home #delayedHolidayDeliveryBannerrow { margin-top: 0; } /* fix for homepage */ .page-home .generalBannerrowWrapper { max-width: 1920px; } /**************/ /* banner bar */ /**************/ /* Added at 08.06.20. Replacement of bannerrow. */ .bannerBar { position: relative; width: 100%; margin: 0 auto; z-index: 1; } .bannerBar.general { text-align: center; padding: 5px; background-color: #f2f2f2; } .bannerBar.general.inverse { background-color: #000; } .bannerBar.general p.bodycopy {} .bannerBar.general p.bodycopy.ctas {} @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 {} } .bannerBars { display: flex; align-items: center; justify-content: center; } .bannerBars > .imageMap { flex-grow: 1; flex-basis: 0; align-self: stretch; display: flex; align-items: center; } .bannerBars > .imageMap .bannerBar { display: flex; align-self: center; flex-direction: column; height: 100%; justify-content: center; } @media only screen and (min-width: 850px){ .bannerBars { flex-direction: row; } .bannerBars > .imageMap { margin: 0 10px; } .bannerBars.narrow > .imageMap { margin: 0 5px; } .bannerBars.zero > .imageMap { margin: 0; } .bannerBars > .imageMap:first-child { margin-left: 0; } .bannerBars > .imageMap:last-child { margin-right: 0; } } @media only screen and (max-width: 850px){ .bannerBars { flex-direction: column; } .bannerBars > .imageMap { margin: 10px 0; } .bannerBars.narrow > .imageMap { margin: 5px 0; } .bannerBars.zero > .imageMap { margin: 0; } .bannerBars > .imageMap:first-child { margin-top: 0; } .bannerBars > .imageMap:last-child { margin-bottom: 0; } } /* specific styling - can be removed if not used anymore */ /* Added at 03.03.21. */ .page-cart .covid19BannerbarMakeAppointment .bannerBar.general p.bodycopy.ctas { display: none; } /***************/ /* 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. */ #pressure-bar {} #pressure-bar .bannerrow { margin: 0 auto 0; min-height: auto; } #pressure-bar .bannerrow .bannerrow-slideshow .cycle-slide p { padding: 0.6em; } #close-pressure-bar { width: 20px; height: 20px; transform: translatey(-65%); -webkit-transform: translatey(-65%); background: #000; border-radius: 50%; } #close-pressure-bar:before, #close-pressure-bar:after { content: ""; display: block; width: 12px; height: 2px; background-color: #fff; position: absolute; top: 7px; left: 5px; } #close-pressure-bar:before { -ms-transform: translate(-1px, 4px) rotate(-45deg); -webkit-transform: translate(-1px, 2px) rotate(-45deg); transform: translate(-1px, 2px) rotate(-45deg); } #close-pressure-bar: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){ #pressure-bar .bannerrow { margin: 0 auto 0; } /* fixes for pdp */ .page-pdp .pdp-addToCart-fixed { z-index: 1001; } .page-pdp #pressure-bar { bottom: 117px; box-shadow: 0 -0.075em 0.5em 0 rgba(0,0,0,0.25); } /* fixes for cart page */ .page-cart #pressure-bar { bottom: 70px; box-shadow: 0 -0.075em 0.5em 0 rgba(0,0,0,0.25); } } /****************************/ /* thuiswinkelWaarborg logo */ /****************************/ /* Added at 18.06.20. */ .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 auto; } .footer__content .thuiswinkelWaarborgWrapper .thuiswinkelWaarborg { width: 115px; } /*******************/ /* BeCommerce logo */ /*******************/ /* Added at 16.07.18. */ /* Edited at 18.06.20. Adjusted width. */ .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 */ .pdp-usp-container .beCommerceWrapper { margin: 1.0em 20px; } /* cart */ .cartUsps .cartUsp .beCommerceWrapper { width: 34px; } /****************************/ /* 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. */ .radioTabs { position: relative; clear: both; } .radioTabs .radioTab { width: 100%; } .radioTabs .radioTab > .radioButton { display: none; } .radioTabs .radioTab > label { background-color: #f2f2f2; padding: 15px 10px; border: 1px solid #f2f2f2; border-bottom: 1px solid #dedede; width: 50%; float: none; cursor: pointer; } .radioTabs .radioTab > label h2 { margin: 10px 0; } .radioTabs .radioTab > label:before { display: none; } .radioTabs .radioTab:nth-child(1) > label { left: 0; } .radioTabs .radioTab:nth-child(2) > label { position: absolute; top: 0; left: 50%; } .radioTabs .radioTab > .radioButton:checked ~ label { background-color: #fff; font-weight: bold; border: 1px solid #dedede; border-bottom: none; } .radioTabs .radioTab > .content { padding: 10px 0; width: 100%; display: none; } .radioTabs .radioTab > .content:after { content: ""; display: table; clear: both; } .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'. */ .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 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; } /* content*/ .sizechartWrapper .sizechart .sizechartContentWrapper {} .sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent {} .sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent [data-remote-tab-content] { display: none; } #size_chart_men_blazers.sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent .size_chart_men_blazers[data-remote-tab-content], #size_chart_men_pantalons.sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent .size_chart_men_pantalons[data-remote-tab-content], #size_chart_men_shirts.sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent .size_chart_men_shirts[data-remote-tab-content], #size_chart_men_tops.sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent .size_chart_men_tops[data-remote-tab-content], #size_chart_men_jeans.sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent .size_chart_men_jeans[data-remote-tab-content], #size_chart_men_trousers.sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent .size_chart_men_trousers[data-remote-tab-content], #size_chart_women_tops.sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent .size_chart_women_tops[data-remote-tab-content], #size_chart_women_skirts.sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent .size_chart_women_skirts[data-remote-tab-content], #size_chart_women_jeans.sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent .size_chart_women_jeans[data-remote-tab-content], #size_chart_women_trousers.sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent .size_chart_women_trousers[data-remote-tab-content], #size_chart_boys.sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent .size_chart_boys[data-remote-tab-content], #size_chart_girls.sizechartWrapper .sizechart .sizechartContentWrapper .sizechartContent .size_chart_girls[data-remote-tab-content] { display: block; } /* selector */ .sizechartWrapper .sizechart .sizechartSelectorWrapper {} .sizechartWrapper .sizechart .sizechartSelectorWrapper .sizechartSelector { text-align: center; } .sizechartWrapper .sizechart .sizechartSelectorWrapper .sizechartSelector ul { list-style-type: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; vertical-align: top; } .sizechartWrapper .sizechart .sizechartSelectorWrapper .sizechartSelector ul:last-child { margin: 0; } .sizechartWrapper .sizechart .sizechartSelectorWrapper .sizechartSelector ul li { min-width: 25%; text-align: left; margin-top: 5px; } @media (max-width: 420px) { .sizechartWrapper .sizechart .sizechartSelectorWrapper .sizechartSelector ul li { min-width: 33.33%; } } .sizechartWrapper .sizechart .sizechartSelectorWrapper .sizechartSelector ul li label { display: initial; float: none; text-align: unset; margin-bottom: 0; cursor: pointer; padding: 0; } .sizechartWrapper .sizechart .sizechartSelectorWrapper .sizechartSelector ul li .checkBoxHolder { width: 25px; height: 25px; cursor: pointer; display: inline-block; background-color: #eee; position: relative; margin-right: 5px; -ms-transform: translatey(5px); -webkit-transform: translatey(5px); -moz-transform: translatey(5px); -o-transform: translatey(5px); transform: translatey(5px); } .sizechartWrapper .sizechart .sizechartSelectorWrapper .sizechartSelector ul li .checkBoxHolder:after { content: ""; position: absolute; display: none; 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); } .sizechartWrapper .sizechart .sizechartSelectorWrapper .sizechartSelector ul li input:checked ~ .checkBoxHolder { background-color: #FF690C; } .sizechartWrapper .sizechart .sizechartSelectorWrapper .sizechartSelector ul li input:checked ~ .checkBoxHolder:after { display: block; } .sizechartWrapper .sizechart .sizechartSelectorWrapper .sizechartSelector ul li label .labelHolder { display: inline-block; padding-top: 10px; font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .sizechartWrapper .sizechart .sizechartSelectorWrapper .sizechartSelector .sizechartSelectorAlert {} .sizechartWrapper .sizechart .sizechartSelectorWrapper .sizechartSelector .sizechartSelectorAlert p { font-style: italic; } /* 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; } /* submit */ .sizechartWrapper .sizechart button.cta { 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; } /* 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: 10px; } .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%; } } /****************/ /* product rate */ /****************/ /* vote module */ .productRateWrapper { position: relative; } .productRateWrapper .productRate { width: 100%; border-bottom: 1px solid #dfdfdf; margin-bottom: 20px; } .productRateWrapper .productRate .productRateContent { text-align: center; padding: 10px; } .productRateWrapper .productRate .productRateContent p { color: #000; font-size: 1.2em; margin: 5px auto; } .productRateWrapper .productRate .productRateContent .productRatingWrapper { position: relative; width: 100%; max-width: 40px; display: inline-block; margin: 0 10px; opacity: 0.3; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .productRateWrapper .productRate .productRateContent .productRatingWrapper:hover { opacity: 1.0; } .productRateWrapper .productRate .productRateContent .productRatingWrapper.active { opacity: 1.0; } .productRateWrapper .productRate .productRateContent .imgHolder.productRating { padding-top: 123.5%; } .productRateWrapper .productRate .productRateContent .imgHolder.productRating.thumbUp { background-image: url('../icons/thumb-up.gif'); } .productRateWrapper .productRate .productRateContent .imgHolder.productRating.thumbDown { background-image: url('../icons/thumb-down.gif'); } .productRateWrapper .productRate .productRateContent .productRatingWrapper .jsSubmitProductRating { cursor: pointer; top: 0; left: 0; width: 100%; height: 100%; } /* rate page */ .productRatePageWrapper {} .productRatePageWrapper .productRatePage {} .productRatePageWrapper .productRatePage .productRatePageContent {} .productRatePageWrapper .productRatePage .productRatePageContent textarea { width: 100%; height: 100px; } .productRatePageWrapper .productRatePage .productRatePageContent [data-clarify-rate] { cursor: pointer; background: black; color: #fff; text-align: center; text-transform: uppercase; padding: 14px; font-size: 14px; font-weight: bold; width: 150px; margin-top: 20px; border: none; } .productRatePageWrapper .productRatePage .productRatePageContent [data-clarify-rate]:hover { background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#414141),color-stop(100%,#000)); background-image: -moz-linear-gradient(#414141,#000); background-image: -webkit-linear-gradient(#414141,#000); background-image: linear-gradient(#414141,#000); } /************/ /* facebook */ /************/ .fbLikeSidepanel { padding-top: 30px; } .fbLikeSidepanel .page-intro { display: block; } .fbLikeSidepanel .page-liked { display: none; } .fbLikeSidepanel .page-disliked { display: none; } /*************************/ /* product slot carousel */ /*************************/ /* Added at 24.09.19. */ /* Edited at 25.09.19. Minor changes. */ /* Edited at 30.09.19. Updated mobile version of carousel tweaks. */ /* Edited at 01.10.19. Minor changes to padding and margin. */ /* Edited at 07.01.20. Fixed 'flexbox' issue on IE. */ /* Edited at 11.03.21. Replaced loader icon. */ [data-product-slot-carousel] { background: url(../icons/2021_HL04/loader.gif) center center no-repeat #f2f2f2; min-height: 100px; } [data-product-slot-carousel-nav] { display: none; } .productSlotCarouselIntroWrapper { margin-bottom: 10px; } .productSlotCarouselIntroWrapper .productSlotCarouselIntro { background-color: #f2f2f2; padding: 10px 30px 20px; } .productSlotCarouselIntroWrapper .productSlotCarouselIntro .content { display: flex; flex-direction: column; justify-content: center; } .productSlotCarouselIntroWrapper .productSlotCarouselIntro .content p.ctas.bttns { margin: 0; } .productSlotCarouselIntroWrapper .productSlotCarouselIntro .content .heading { margin: 0 auto; } .productSlotCarouselIntroWrapper .productSlotCarouselIntro .content .start, .productSlotCarouselIntroWrapper .productSlotCarouselIntro .content .stop { font-size: 13px; background-color: #666; color: #fff; border-bottom: 5px solid #333; border-radius: 5px; } .productSlotCarousel { position: relative; background-color: #f2f2f2; } .productSlotCarousel .separator { position: absolute; top: calc(50% - 35px); left: 0; width: 100%; height: 10px; z-index: 0; background-color: #fff; } .productSlotCarousel .setBackground { position: absolute; top: 0; left: 33.33%; width: 33.33%; height: 100%; z-index: 0; background-color: #d7d7d7; } .productSlotCarousel .holds { position: relative; } .productSlotCarousel .holds .hold { position: absolute; z-index: 2; background-color: #666; padding: 15px 26px; margin: 0; text-decoration: none; color: #fff; font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-transform: uppercase; font-size: 13px; border-bottom: 5px solid #333; border-radius: 5px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .productSlotCarousel .holds .hold.active { background-color: #333; border-bottom: 5px solid #000; } .productSlotCarousel .holds:nth-child(2) .hold { top: -20px; left: 50%; -webkit-transform: translate(-50%,-100%); -moz-transform: translate(-50%,-100%); transform: translate(-50%,-100%); } .productSlotCarousel .holds:nth-child(6) .hold { bottom: 20px; left: 50%; -webkit-transform: translatex(-50%); -moz-transform: translatex(-50%); transform: translatex(-50%); } .categoryPageSliderWrapper { z-index: 1; } .categoryPageSliderWrapper:nth-child(1) { margin: 10px auto 0; padding-bottom: 59px; } .categoryPageSliderWrapper:nth-child(3) { margin: 0 auto; padding-bottom: 59px; } .categoryPageSliderWrapper .categoryPageSlider { position: relative; overflow: hidden; } .categoryPageSliderWrapper .categoryPageSlider[data-hold] .cycle-nav {} .categoryPageSliderWrapper .categoryPageSlider .cycle-carousel-wrap { display: flex; } .categoryPageSliderWrapper .categoryPageSlider .slide { position: relative; display: flex; flex-direction: column; justify-content: flex-end; white-space: normal; height: 100%; padding: 20px; } .categoryPageSliderWrapper .categoryPageSlider [data-current-slide] .slide {} .categoryPageSliderWrapper .categoryPageSlider .slide .imgHolderWrapper { flex: 1 0 auto; -moz-flex: 1; -webkit-flex: 1; background-color: #fff; } .categoryPageSliderWrapper .categoryPageSlider .slide .imgHolderWrapper .imgHolder { padding-top: 65%; background-size: 70%; background-position: center; opacity: 0.3; } .categoryPageSliderWrapper .categoryPageSlider [data-current-slide] .slide .imgHolderWrapper .imgHolder { opacity: 1.0; } .categoryPageSliderWrapper .categoryPageSlider .slide .productDetails { display: none; } .productSlotCarouselOutroWrapper { margin-top: 10px; } .productSlotCarouselOutroWrapper .productSlotCarouselOutro { background-color: #f2f2f2; padding: 20px 30px 20px; } .productSlotCarouselOutroWrapper .productSlotCarouselOutro .content { display: flex; flex-direction: column; justify-content: center; } .productSlotCarouselOutroWrapper .productSlotCarouselOutro .content p.ctas.bttns { margin: 0; } .productSlotCarouselOutroWrapper .productSlotCarouselOutro .content .view { font-size: 13px; background-color: #666; color: #fff; border-bottom: 5px solid #333; border-radius: 5px; } @media only screen and (min-width : 850px){ .productSlotCarouselIntroWrapper .productSlotCarouselIntro .content .start:hover, .productSlotCarouselIntroWrapper .productSlotCarouselIntro .content .stop:hover { background-color: #888; } .productSlotCarousel .holds .hold:hover { background-color: #888; } .productSlotCarouselOutroWrapper .productSlotCarouselOutro .content .view:hover { background-color: #888; } } @media only screen and (max-width : 850px){ .productSlotCarouselIntroWrapper { margin-bottom: 20px; } .productSlotCarousel { overflow: hidden; } .productSlotCarousel .separator { top: calc(50% - 30px); } .productSlotCarousel .setBackground { left: 17.5%; width: 65%; height: 100%; } .categoryPageSliderWrapper { width: 65%; } .categoryPageSliderWrapper:nth-child(1) { margin: 10px 17.5% 0; padding-bottom: 59px; } .categoryPageSliderWrapper:nth-child(3) { margin: 0 17.5%; padding-bottom: 59px; } .categoryPageSliderWrapper .categoryPageSlider {} .categoryPageSliderWrapper .categoryPageSlider .slide { padding: 20px; } .categoryPageSliderWrapper .categoryPageSlider .slide .imgHolderWrapper {} .categoryPageSliderWrapper .categoryPageSlider .slide .imgHolderWrapper .imgHolder { padding-top: 65%; background-size: 85%; } .productSlotCarousel .categoryPageSlider.cycle-slideshow { overflow: visible !important; } .productSlotCarousel .categoryPageSlider.cycle-slideshow .inverse.cycle-prev { left: -17.5%; } .productSlotCarousel .categoryPageSlider.cycle-slideshow .inverse.cycle-next { right: -17.5%; } .productSlotCarouselOutroWrapper { margin-top: 20px; } } /************/ /* 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%; } /********/ /* menu */ /********/ /* Added at 22.10.19. Added functions to content.js. */ /* Edited at 11.11.19. Added some styling to make menu responsive and mobile accessable. */ [data-navigation-menu-hamburger] { width: 50px; height: 50px; cursor: pointer; padding: 12px 13px; position: absolute; top: 0; left: 0; background-color: #000; z-index: 2; } [data-navigation-menu-hamburger] div { margin: 6px 0; height: 2px; background-color: #fff; } [data-navigation-menu-hamburger] div:first-child { margin-top: 4px; } [data-navigation-menu-hamburger] div:last-child { margin-bottom: 0; } [data-navigation-menu] { z-index: 101; position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; overflow: hidden; } [data-navigation-menu] [data-navigation-menu-overlay] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); cursor: pointer; z-index: -1; } [data-navigation-menu] .tabsHeader { width: 100%; max-width: calc(100% - 50px); height: 50px; background-color: #fff; } [data-navigation-menu] .tabsHeader .tabsClose { width: 50px; height: 50px; margin-left: auto; position: relative; cursor: pointer; } [data-navigation-menu] .tabsHeader .tabsClose:before, [data-navigation-menu] .tabsHeader .tabsClose:after { position: absolute; content: ""; top: 50%; left: 50%; width: 16px; height: 2px; background-color: #000; } [data-navigation-menu] .tabsHeader .tabsClose:before { -ms-transform: translate(-50%) rotate(-45deg); -webkit-transform: translate(-50%) rotate(-45deg); transform: translate(-50%) rotate(-45deg); } [data-navigation-menu] .tabsHeader .tabsClose:after { -ms-transform: translate(-50%) rotate(45deg); -webkit-transform: translate(-50%) rotate(45deg); transform: translate(-50%) rotate(45deg); } [data-navigation-menu] .tabs { display: flex; flex-direction: row; width: 100%; max-width: calc(100% - 50px); } [data-navigation-menu] .tabs .tab { display: block; width: 100%; cursor: pointer; padding: 12px 10px; border: 1px solid #dedede; border-left: 0; background-color: #f2f2f2; color: #333; text-align: center; font-size: 16px; } [data-navigation-menu] .tabs .tab:last-child { border-right: 0; } [data-navigation-menu] .tabs .tab.active { background-color: #fff; color: #000; font-weight: bold; } [data-navigation-menu] [data-navigation-menu-tab-content] { display: none; overflow-y: scroll !important; width: 100%; max-width: calc(100% - 50px); height: calc(100% - 94px); background-color: #fff; } [data-navigation-menu] [data-navigation-menu-tab-content] .promos {} [data-navigation-menu] [data-navigation-menu-tab-content] .promos .imageMap {} [data-navigation-menu] [data-navigation-menu-tab-content] .promos .imageMap .imgHolder { padding-top: 200px; } [data-navigation-menu] [data-navigation-menu-tab-content="11"] .promos .imageMap .imgHolder { background-color: #666; } [data-navigation-menu] [data-navigation-menu-tab-content="12"] .promos .imageMap .imgHolder { background-color: #666; } [data-navigation-menu] [data-navigation-menu-tab-content="00"] .promos .imageMap .imgHolder { background-color: #666; } [data-navigation-menu] [data-navigation-menu-tab-content="sale"] .promos .imageMap .imgHolder { background-color: #666; } [data-navigation-menu] ul { margin: 0; padding: 0; border-left: 1px solid #dedede; position: relative; width: 100%; } [data-navigation-menu] ul li { display: block; border: 1px solid #dedede; border-left: 0; border-top: 0; } [data-navigation-menu] ul li.current { background-color: #E8E8FF; } [data-navigation-menu] ul li.current > a { font-weight: bold; } [data-navigation-menu] ul li.active {} [data-navigation-menu] ul li.active > ul { background-color: #f9f9f9; } [data-navigation-menu] ul li.active > ul li.active > ul { background-color: #ededed; } [data-navigation-menu] ul li a { display: block; padding: 12px 10px; text-decoration: none; color: #000; position: relative; font-size: 16px; } [data-navigation-menu] ul li a u { text-decoration: none; } [data-navigation-menu] ul li a.view-all { font-style: italic; } [data-navigation-menu] ul li a[data-navigation-submenu-trigger]:after { content: ''; position: absolute; top: 50%; right: 10px; width: 10px; height: 10px; border: 2px solid transparent; border-right: 2px solid #555; border-bottom: 2px solid #555; transform: translateY(-50%) rotate(45deg); } [data-navigation-menu] ul li a[data-navigation-submenu-trigger="active"] { font-weight: bold; } [data-navigation-menu] ul li a[data-navigation-submenu-trigger="active"]:after { transform: translateY(-30%) rotate(-135deg); } [data-navigation-menu] ul li ul { height: 0; overflow: hidden; } [data-navigation-menu] ul li ul.active {} [data-navigation-menu] ul li ul li { border-right: 0; } [data-navigation-menu] ul li ul li:first-child { border-top: 1px solid #dedede; } [data-navigation-menu] ul li ul li:last-child { border-bottom: 0; } [data-navigation-menu] ul li ul li a { padding-left: 30px; } [data-navigation-menu] ul li ul li ul {} [data-navigation-menu] ul li ul li ul li {} [data-navigation-menu] ul li ul li ul li a { padding-left: 60px; } /*****************/ /* 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; } /****************/ /* segmentation */ /****************/ /* Added at 30.01.20. Added functions to content.js */ [data-segments] {} [data-segments] [data-segment] { display: none; } [data-segments] [data-segment][data-enabled] { display: block; } /************/ /* parallax */ /************/ /* Added at 12.02.20. */ /* Edited at 30.03.20. Added some styling. */ /* documentation: https://keithclark.co.uk/articles/pure-css-parallax-websites/ */ [data-parallax] { height: 500px; /* fallback for older browsers */ height: 100vh; overflow-x: hidden; overflow-y: auto; -webkit-perspective: 300px; perspective: 300px; -webkit-perspective-origin-x: 100%; perspective-origin-x: 100%; overflow: -moz-scrollbars-none; -ms-overflow-style: none; } [data-parallax]::-webkit-scrollbar { width: 0 !important; } [data-parallax__group] { position: relative; height: 500px; /* fallback for older browsers */ height: 100vh; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } [data-parallax__layer] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform-origin-x: 100%; transform-origin-x: 100%; } [data-parallax__layer__fore] { -webkit-transform: translateZ(90px) scale(.7); transform: translateZ(90px) scale(.7); z-index: 1; } [data-parallax__layer__base] { -webkit-transform: translateZ(0); transform: translateZ(0); z-index: 4; } [data-parallax__layer__back] { -webkit-transform: translateZ(-300px) scale(2); transform: translateZ(-300px) scale(2); z-index: 3; } [data-parallax__layer__deep] { -webkit-transform: translateZ(-600px) scale(3); transform: translateZ(-600px) scale(3); z-index: 2; } /* demo styles */ [data-parallax] { font-size: 200%; } /* centre the content in the parallax layers */ [data-parallax] .content { text-align: center; position: absolute; left: 50%; top: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* style the groups */ #group1 { z-index: 5; } /* slide over group 2 */ #group2 { z-index: 3; } /* slide under groups 1 and 3 */ #group3 { z-index: 4; } /* slide over group 2 and 4 */ #group4 { z-index: 2; } /* slide under group 3 and 5 */ #group5 { z-index: 3; } /* slide over group 4 and 6 */ #group6 { z-index: 2; } /* slide under group 5 and 7 */ #group7 { z-index: 3; } /* slide over group 7 */ /**************************/ /* recommended categories */ /**************************/ /* Added at 29.06.20. */ /* Edited at 14.07.20. Renamed 'popcat' to 'recommended categories'. */ /* Edited at 11.03.21. Removed class 'hidden'. Added loading icon to banners. */ .recommendedCategories { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .recommendedCategories .recommendedCategory { background: url(../icons/2021_HL04/loader.gif) center center no-repeat; } .recommendedCategories .recommendedCategory:nth-child(1) { width: calc(25% - 6.5px); margin: 0 6.5px 0 0; } .recommendedCategories .recommendedCategory:nth-child(2) { width: calc(25% - 7px); margin: 0 5px 0 3.5px; } .recommendedCategories .recommendedCategory:nth-child(3) { width: calc(25% - 7px); margin: 0 3.5px 0 5px; } .recommendedCategories .recommendedCategory:nth-child(4) { width: calc(25% - 6.5px); margin: 0 0 0 6.5px; } @media only screen and (max-width: 1024px){ .recommendedCategories { flex-wrap: wrap; } .recommendedCategories .recommendedCategory:nth-child(1) { width: calc(50% - 5px); margin: 0 5px 10px 0; } .recommendedCategories .recommendedCategory:nth-child(2) { width: calc(50% - 5px); margin: 0 0 10px 5px; } .recommendedCategories .recommendedCategory:nth-child(3) { width: calc(50% - 5px); margin: 0 5px 0 0; } .recommendedCategories .recommendedCategory:nth-child(4) { width: calc(50% - 5px); margin: 0 0 0 5px; } } /*******************/ /* main categories */ /*******************/ /* Added at 23.11.20. Similar to recommended categories. */ .mainCategories { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .mainCategories .mainCategory {} .mainCategories .mainCategory:nth-child(1) { width: calc(25% - 6.5px); margin: 0 6.5px 0 0; } .mainCategories .mainCategory:nth-child(2) { width: calc(25% - 7px); margin: 0 5px 0 3.5px; } .mainCategories .mainCategory:nth-child(3) { width: calc(25% - 7px); margin: 0 3.5px 0 5px; } .mainCategories .mainCategory:nth-child(4) { width: calc(25% - 6.5px); margin: 0 0 0 6.5px; } @media only screen and (max-width: 1024px){ .mainCategories { flex-wrap: wrap; } .mainCategories .mainCategory:nth-child(1) { width: calc(50% - 5px); margin: 0 5px 10px 0; } .mainCategories .mainCategory:nth-child(2) { width: calc(50% - 5px); margin: 0 0 10px 5px; } .mainCategories .mainCategory:nth-child(3) { width: calc(50% - 5px); margin: 0 5px 0 0; } .mainCategories .mainCategory:nth-child(4) { width: calc(50% - 5px); margin: 0 0 0 5px; } } /*********************/ /* recommended sizes */ /*********************/ /* Added at 07.09.20. */ /* Edited at 08.09.20. */ /* Edited at 17.09.20. Updated tip trigger color. */ /* Edited at 11.03.21. Replaced loader icon. */ .recommendedSizeTriggerWrapper { display: block; margin-bottom: 10px; margin-left: 29px; } .recommendedSizeTriggerWrapper .recommendedSizeTrigger { line-height: 24px; } .recommendedSizeTriggerWrapper .recommendedSizeTrigger > span { position: absolute; top: 0; left: -29px; -webkit-transform: translatey(-4px); transform: translatey(-4px); } .recommendedSizeTriggerWrapper .recommendedSizeTipTrigger { font-family: "Futura PT W01 Book", arial, sans-serif; border-bottom: 1px solid #7a7a7a; color: #7a7a7a; position: relative; } .recommendedSizeTriggerWrapper .recommendedSizeTipTrigger { cursor: pointer; } .recommendedSizeTriggerWrapper .recommendedSizeTipTrigger u { text-decoration: none; border-bottom: 1px solid #000; cursor: pointer; } .recommendedSizeTriggerWrapper .recommendedSizeTipWrapper { overflow: hidden; height: 0; cursor: pointer; } .recommendedSizeTriggerWrapper .recommendedSizeTipWrapper .recommendedSizeTip { border: 1px solid #CDCDCD; background-color: #FFFBE5; padding: 15px; margin-top: 15px; position: relative; display: inline-block; } .recommendedSizeTriggerWrapper .recommendedSizeTipWrapper .recommendedSizeTip:before, .recommendedSizeTriggerWrapper .recommendedSizeTipWrapper .recommendedSizeTip:after { content: ""; position: absolute; border: 10px solid transparent; width: 0; height: 0; } .recommendedSizeTriggerWrapper .recommendedSizeTipWrapper .recommendedSizeTip:before { left: 30px; top: -20px; border-left-color: transparent; border-bottom-color: #CDCDCD; } .recommendedSizeTriggerWrapper .recommendedSizeTipWrapper .recommendedSizeTip:after { left: 30px; top: -19px; border-left-color: transparent; border-bottom-color: #FFFBE5; } .recommendedSizeTriggerWrapper .recommendedSizeTipWrapper .recommendedSizeTip p.bodycopy { margin: 0; } .recommendedSizeLoaderWrapper { position: absolute; top: 0; left: 0; width: 100%; z-index: 99; display: none; } .recommendedSizeLoaderWrapper .recommendedSizeLoader { position: fixed; 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); } /**************/ /* 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; } } /***********/ /* filters */ /***********/ /* Added at 25.08.20. */ .filtersWrapper {} .filtersWrapper .sorting {} .filtersWrapper .sorting .sortWrapper { width: 100%; padding: 20px 0; overflow: auto; display: flex; flex-direction: row; } .filtersWrapper .sorting .sortWrapper .sortBy { padding: 10px; background-color: #fff; cursor: pointer; margin: 0 7.5px; -webkit-transition: all ease .3s; transition: all ease .3s; } .filtersWrapper .sorting .sortWrapper .sortBy:first-child { margin-left: 0; } .filtersWrapper .sorting .sortWrapper .sortBy:last-child { margin-right: 0; } .filtersWrapper .sorting .sortWrapper .sortBy p.bodycopy { color: #000; margin: 0; } .filtersWrapper .sorting .sortWrapper .sortBy.active { background-color: #000; } .filtersWrapper .sorting .sortWrapper .sortBy.active p.bodycopy { color: #fff; } .filtersWrapper .filters {} .filtersWrapper .filters .tabWrapper { border-bottom: 1px solid #dedede; } .filtersWrapper .filters .tabWrapper .tab { cursor: pointer; position: relative; padding: 15px 0; } .filtersWrapper .filters .tabWrapper .tab p.bodycopy { margin: 0; } .filtersWrapper .filters .tabWrapper .tab p.bodycopy .indicator { display: inline-block; margin-left: 5px; width: 20px; height: 20px; background-color: #FF690C; color: #fff; text-align: center; border-radius: 50%; font-size: 13px; -webkit-transition: all ease .3s; transition: all ease .3s; opacity: 0; } .filtersWrapper .filters .tabWrapper .tab .globalIcon { position: absolute; top: 50%; right: 0; -webkit-transform: translatey(-50%); transform: translatey(-50%); } .filtersWrapper .filters .tabWrapper .tab .globalIcon.navup { display: none; } .filtersWrapper .filters .tabWrapper .tab .globalIcon.navdown { display: block; } .filtersWrapper .filters .tabWrapper[data-tab="active"] .tab .globalIcon.navup { display: block; } .filtersWrapper .filters .tabWrapper[data-tab="active"] .tab .globalIcon.navdown { display: none; } .filtersWrapper .filters .tabWrapper .content { padding-top: 0; } .filtersWrapper .filters .tabWrapper[data-tab="active"] .content { border-top: 1px solid #dedede; } .filtersWrapper .filters .tabWrapper .content .filterWrapper { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 23px; margin-bottom: 17px; position: relative; } .filtersWrapper .filters .tabWrapper .content .filterWrapper .filter.swatch { margin: 0 3px 3px 0; background-color: #f2f2f2; color: #000; width: calc(12.5% - 3px); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; border: 1px solid #dedede; -webkit-transition: all ease .3s; transition: all ease .3s; cursor: pointer; } .filtersWrapper .filters .tabWrapper .content .filterWrapper .filter.swatch:before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; border: 3px solid #fff; } .filtersWrapper .filters .tabWrapper .content .filterWrapper .filter.swatch:after { content: ""; padding-top: 100%; display: block; } .filtersWrapper .filters .tabWrapper .content .filterWrapper .filter.swatch span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); font-size: 13px; } .filtersWrapper .filters .tabWrapper .content .filterWrapper .filter.swatch.ellipse, .filtersWrapper .filters .tabWrapper .content .filterWrapper .filter.swatch.ellipse:before { border-radius: 50%; } .filtersWrapper .filters .tabWrapper .content .filterWrapper .filter.swatch.active { background-color: #000; color: #fff; border: 1px solid #000; } .filtersWrapper .filters .filterNav { margin: 20px 0; display: flex; flex-direction: row; flex-wrap: no-wrap; } .filtersWrapper .filters .filterNav .btn { width: calc(50% - 7.5px); padding: 10px 0; color: #fff; text-align: center; text-decoration: none; } .filtersWrapper .filters .filterNav .btn:nth-child(1) { margin-right: 7.5px; background-color: #000; } .filtersWrapper .filters .filterNav .btn:nth-child(2) { margin-left: 7.5px; background-color: #00AD41; } @media only screen and (max-width: 850px){ .filtersWrapper .filters .tabWrapper .content .filterWrapper .filter.swatch { width: calc(20% - 3px); } } @media only screen and (max-width: 420px){ .filtersWrapper .filters .tabWrapper .content .filterWrapper .filter.swatch { width: calc(25% - 3px); } } /*************/ /* 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. */ [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); } .brandbookContent [data-read-more] [data-read-more-switch] { background: rgba(234,233,230,1); background: linear-gradient(0deg, rgba(234,233,230,1) 0%, rgba(234,233,230,0) 100%); border-bottom: 50px solid rgba(234,233,230,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. */ .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; top: 40%; 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; right: -4%; } .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%; } } /***********/ /* reviews */ /***********/ /* Added at 05.02.21. */ /* Edited at 12.02.21. Added some styling. */ /* Edited at 18.02.21. Added some styling. */ .reviewsTeaser { float: right; visibility: hidden; } .reviewsTeaser span:not(.globalIcon) { display: inline-block; -webkit-transform: translatey(-7px); transform: translatey(-7px); margin-left: 5px; text-decoration: underline; } [data-reviews] { margin: 0 auto 30px; padding: 0 30px; max-width: 1600px; } [data-reviews] .intro.center h4.heading { margin-bottom: 0; } [data-reviews] .intro.center p.bodycopy { position: relative; z-index: 1; } [data-reviews] .intro.center p.bodycopy span.ratingDescription { display: inline-block; -webkit-transform: translatey(-10px); transform: translatey(-10px); margin-left: 5px; } [data-reviews] .productRatings { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: center; } [data-reviews] .productRatings .productRating { width: calc(50% - 10px); margin: 0 5px; background-color: #f2f2f2; } [data-reviews] .productRatings .productRating.wide { width: 100%; margin: 0; } [data-reviews] .productRatings .productRating .content { padding: 6px 20px 10px; width: 100%; max-width: 440px; margin: 0 auto; position: relative; z-index: 1; } [data-reviews] .productRatings .productRating.wide .content { max-width: 850px; } [data-reviews] .productRatings .productRating .content p.bodycopy {} [data-reviews] .productRatings .productRating .content p.bodycopy:nth-child(1), [data-reviews] .productRatings .productRating .content p.bodycopy:nth-child(2) { margin-bottom: 0; } [data-reviews] .productRatings .productRating .content p.bodycopy:nth-child(3) { margin: 10px 0 20px; } [data-reviews] .productRatings .productRating .content p.bodycopy span.recommendation, [data-reviews] .productRatings .productRating .content p.bodycopy span.disapprove { display: inline-block; -webkit-transform: translatey(-7px); transform: translatey(-7px); margin-left: 10px; } @media only screen and (max-width: 850px){ [data-reviews] { margin: 35px 0 20px 0; padding: 0; } [data-reviews] .intro.center p.bodycopy { margin-top: 5px; } [data-reviews] .productRatings {} [data-reviews] .productRatings .productRating, [data-reviews] .productRatings .productRating.wide { width: 100%; margin: 0 15px 10px; } [data-reviews] .productRatings .productRating .content { padding: 5px 20px 10px; } [data-reviews] .productRatings .productRating .content p.bodycopy span.disapprove { margin-top: 10px; } } /************************/ /* 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. */ .popupNotificationWrapper.abandonedCart {} .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 .productCarouselWrapper {} .popupNotificationWrapper.abandonedCart .productCarouselWrapper .productCarousel {} .popupNotificationWrapper.abandonedCart .productCarouselWrapper .productCarousel .slide { max-width: 385px; margin: 0 auto; background: url(../icons/2021_HL04/loader.gif) center center no-repeat #fff; } .popupNotificationWrapper.abandonedCart .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-info h3.product-name { font-family: "Futura PT W01 Medium"; font-size: 1rem; } .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.ctas.bttns .cta { background-color: #00BF48; } .popupNotificationWrapper.abandonedCart .popupNotificationOverlay { background: rgba(0, 0, 0, 0.6); } .popupNotificationWrapper.abandonedCart .popupNotification { padding-top: 10px; } .popupNotificationWrapper.abandonedCart .popupNotification .productCarouselWrapper {} .popupNotificationWrapper.abandonedCart .popupNotification .productCarouselWrapper .productCarousel { background-color: #fff; } @media only screen and (min-width: 850px){ .popupNotificationWrapper.abandonedCart .popupNotificationContainer { min-width: 423px; max-width: 850px; } .popupNotificationWrapper.abandonedCart .popupNotification .productCarouselWrapper .productCarousel .slide { } .popupNotificationWrapper.abandonedCart .outroWrapper .outro p.ctas.bttns .cta:hover { background-image: linear-gradient(#00D852,#00BF48); } } @media only screen and (max-width: 850px){ .popupNotificationWrapper.abandonedCart .popupNotificationContainer { top: 100px; -webkit-transform: translatex(-50%) translatey(0); transform: translatex(-50%) translatey(0); } } /************************************************************************* 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. */ .wrapper-splash .content-asset { background: #000; } .wrapper-splash .content-asset .splash { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url('../Navigation/country-selector/2020_HL03_GENERAL/Splash_Image_HL03_EN.jpg'); background-position: center top; background-size: cover; } /***************************************/ /* recommend categories in mobile menu */ /***************************************/ /* Added at 16.02.21. Belongs to global.recommendedCategories.initialize(). */ /* Edited at 13.04.21. Updated styling for kids menu. */ .menu-category li.recommendedCategoriesTitle, .menu-category li.moreCategoriesTitle { text-transform: uppercase; font-family: 'Futura PT W01 Heavy', arial, sans-serif; color: #000; padding: 15px 15px; } .menu-category li a span.recommended { padding: 3px 8px; background-color: #E1E1E1; color: #000; font-size: 15px; } .menu-category li.level-1-category a span.recommended { text-transform: none; } /************************/ /* mobile menu stickers */ /************************/ /* Added at 07.05.21. */ .menu-category li .mobileMenuStickerWrapper { display: flex; align-items: center; height: 40px; } .menu-category li .mobileMenuStickerWrapper a { width: 100%; height: 40px; } .menu-category li .mobileMenuStickerWrapper a .mobileMenuSticker { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; } .menu-category li .mobileMenuStickerWrapper a .mobileMenuSticker .imgHolder {} /* teen collection */ .menu-category li .mobileMenuStickerWrapper.teenCollection a .mobileMenuSticker .imgHolder { width: 40px; background-image: url('../Category pages/_kids/2021_HL03/sticker-teens-collection.svg'); background-size: 100%; background-repeat: no-repeat; -webkit-transform: translatey(-9px); transform: translatey(-9px); padding-top: 8.8%; } .menu-category li .mobileMenuStickerWrapper.teenCollection a .mobileMenuSticker .tag { margin-bottom: 2px; -webkit-transform: translatey(-7px); transform: translatey(-7px); } /* salty dog kids */ .menu-category li .mobileMenuStickerWrapper.saltyDogKids a .mobileMenuSticker { -webkit-transform: translatey(-2px); transform: translatey(-2px); } .menu-category li .mobileMenuStickerWrapper.saltyDogKids a .mobileMenuSticker .imgHolder { width: 80px; background-image: url('../Category pages/_kids/2021_HL05_SALTYDOG/sticker-salty-dog.svg'); background-size: 100%; background-repeat: no-repeat; padding-top: 4.6%; } /* salty dog men */ .menu-category li .mobileMenuStickerWrapper.saltyDogMen a .mobileMenuSticker { -webkit-transform: translatey(-2px); transform: translatey(-2px); } .menu-category li .mobileMenuStickerWrapper.saltyDogMen a .mobileMenuSticker .imgHolder { width: 80px; background-image: url('../Category pages/_kids/2021_HL05_SALTYDOG/sticker-salty-dog.svg'); background-size: 100%; background-repeat: no-repeat; padding-top: 4.6%; } /************************************************************************* 03.2 Header */ /***********/ /* meganav */ /***********/ /* Edited at 17.09.19. Adjusted some styles to fix coupon fonts. */ .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: #fff !important; } .mega-nav-dropdown .jsMegaNav tr td ul li p.bodycopy.ctas a.cta:hover { 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. */ .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; } .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; } /****************/ /* 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. */ .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: 1.5px; 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]) { 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]) .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; } } /***********************************/ /* recommend categories in meganav */ /***********************************/ /* Added at 17.02.21. Belongs to global.recommendedCategories.initialize(). */ .mega-nav-dropdown .jsMegaNav tr td ul li.recommendedCategoriesTitle, .mega-nav-dropdown .jsMegaNav tr td ul li.moreCategoriesTitle {} .mega-nav-dropdown.jsMegaNav00 .jsMegaNav tr td ul li.recommendedCategoriesTitle, .mega-nav-dropdown.jsMegaNav00 .jsMegaNav tr td ul li.moreCategoriesTitle { font-size: 11px; } .mega-nav-dropdown .jsMegaNav tr td ul li a span.recommended { padding: 3px 8px; background-color: #E1E1E1; color: #000; } /************************************************************************* 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. */ 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 } } /*********************/ /* category stickers */ /*********************/ /* Added at 22.01.21. */ /* Edited at 06.04.21. Added tag to mobile menu. */ /* Edited at 08.04.21. Added SaltyDog tag. */ /* Edited at 07.05.21. Renamed to category stickers. Created generic style. */ .categoryStickerWrapper { display: flex; align-items: center; height: 40px; } .categoryStickerWrapper a {} .categoryStickerWrapper a .categorySticker { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; } .categoryStickerWrapper a .categorySticker .imgHolder {} /* teen collection */ .categoryStickerWrapper.teenCollection a .categorySticker .imgHolder { width: 40px; background-image: url('../Category pages/_kids/2021_HL03/sticker-teens-collection.svg'); background-size: 100%; background-repeat: no-repeat; padding-top: 36.85%; } .categoryStickerWrapper.teenCollection a .categorySticker .tag { margin-bottom: 2px; -webkit-transform: translatey(-2px); transform: translatey(-2px); } /* salty dog kids*/ .categoryStickerWrapper.saltyDogKids a .categorySticker { -webkit-transform: translatey(-3px); transform: translatey(-3px); padding-top: 5.6%; } .categoryStickerWrapper.saltyDogKids a .categorySticker .imgHolder { width: 80px; background-image: url('../Category pages/_kids/2021_HL05_SALTYDOG/sticker-salty-dog.svg'); background-size: 100%; background-repeat: no-repeat; padding-top: 18.6%; } /* salty dog men */ .categoryStickerWrapper.saltyDogMen a .categorySticker { -webkit-transform: translatey(-3px); transform: translatey(-3px); padding-top: 5.6%; } .categoryStickerWrapper.saltyDogMen a .categorySticker .imgHolder { width: 80px; background-image: url('../Category pages/_kids/2021_HL05_SALTYDOG/sticker-salty-dog.svg'); background-size: 100%; background-repeat: no-repeat; padding-top: 18.6%; } /*******************************/ /* recommend categories in lhn */ /*******************************/ /* Added at 16.02.21. Belongs to global.recommendedCategories.initialize(). */ /* Edited at 13.04.21. Adjusted styling for kids menu. */ .refinement ul li.recommendedCategoriesTitle, .refinement ul li.moreCategoriesTitle { font-family: 'Futura PT W01 Heavy', arial, sans-serif; font-size: 13px; letter-spacing: 0; } .refinement ul li a span.recommended { padding: 3px 8px; background-color: #E1E1E1; color: #000; font-size: 12px; } .refinement #category-level-1 li a span.recommended { text-transform: none; } /************************************************************************* 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. */ .livechatBarWrapper {} .livechatBarWrapper .livechatBar { margin-bottom: 10px; background-color: #CBECFF; padding: 10px 0; display: flex; align-items: center; justify-content: center; } .livechatBarWrapper .livechatBar .content { display: flex; flex-direction: row; align-items: center; justify-content: center; } .livechatBarWrapper .livechatBar .content .iconWrapper {} .livechatBarWrapper .livechatBar .content .copy {} @media only screen and (min-width: 850px){ .livechatBarWrapper .livechatBar .content .copy { margin-left: 5px; } } @media only screen and (max-width: 850px){ .livechatBarWrapper .livechatBar .content { flex-direction: column; } .livechatBarWrapper .livechatBar .content .copy p.bodycopy { margin-top: 0; text-align: center; } } /* hide from specific pages */ .folderid-cs-faq-index .livechatBarWrapper, .folderid-cs-faq-order-delivery .livechatBarWrapper, .folderid-cs-faq-return-swap .livechatBarWrapper, .folderid-cs-faq-payment .livechatBarWrapper, .folderid-cs-faq-general .livechatBarWrapper, .folderid-cs-faq-app .livechatBarWrapper, .folderid-cs-faq-we-is-me .livechatBarWrapper, .folderid-cs-faq-corona .livechatBarWrapper, .folderid-cs-faq-member-get-member .livechatBarWrapper, .folderid-cs-faq-external-brands .livechatBarWrapper { display: none; } /********************/ /* subscription box */ /********************/ /* Added at 14.11.19. Moved from footer styling. Renewed styling for light optin, commentarized. */ /* Edited at 11.12.19. Renewed styling after selligent light optin went live. */ /* Edited at 20.12.19. Fixed some mobile styling. */ /* Edited at 28.01.20. Updated flexbox styling. */ /* Edited at 11.03.21. Replaced loader icon. */ .subscriptionBoxWrapper { width: 100%; background-color: #f2f2f2; position: relative; } .subscriptionBoxWrapper .subscriptionBoxLoader { 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; } .subscriptionBoxWrapper .subscriptionBox { max-width: 1600px; margin: 0 auto; padding: 20px 20px 40px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .subscriptionBoxWrapper .subscriptionBox .content form {} .subscriptionBoxWrapper .subscriptionBox .content form .formElements { display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; } .subscriptionBoxWrapper .subscriptionBox .content form .formElements .formElement {} .subscriptionBoxWrapper .subscriptionBox .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; } .subscriptionBoxWrapper .subscriptionBox .content form label[generated="true"]:before, .subscriptionBoxWrapper .subscriptionBox .content form label[generated="true"]:after { content: ""; position: absolute; border: 10px solid transparent; width: 0; height: 0; } .subscriptionBoxWrapper .subscriptionBox .content form label[generated="true"]:before { left: 10px; top: -20px; border-left-color: transparent; border-bottom-color: #F4BD2D; } .subscriptionBoxWrapper .subscriptionBox .content form label[generated="true"]:after { left: 10px; top: -19px; border-left-color: transparent; border-bottom-color: #FFDE88; } .subscriptionBoxWrapper .subscriptionBox .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; } .subscriptionBoxWrapper .subscriptionBox .content.subscribe { display: flex; flex-direction: column; justify-content: center; align-items: center; } .subscriptionBoxWrapper .subscriptionBox .content.subscribe .copy p.ctas.bttns a { margin: 0; } .subscriptionBoxWrapper .subscriptionBox .content.subscribe form {} .subscriptionBoxWrapper .subscriptionBox .content.subscribe form input[type="email"] { width: 100%; height: 43px; } .subscriptionBoxWrapper .subscriptionBox .content.preferences { display: flex; flex-direction: row; justify-content: center; align-items: top; } .subscriptionBoxWrapper .subscriptionBox .content.preferences form .formElements { flex-direction: column; align-items: start; } .subscriptionBoxWrapper .subscriptionBox .content.preferences form .formElements .formElement .checkBox label, .subscriptionBoxWrapper .subscriptionBox .content.preferences form .formElements .formElement .checkBox .label { display: inline-block; font-weight: normal; cursor: pointer; } .subscriptionBoxWrapper .subscriptionBox .content.preferences form .formElements .formElement .checkBox label .labelHolder.chckBx { display: inline-block; } .subscriptionBoxWrapper .subscriptionBox .content.preferences form .formElements .formElement .checkBox .checkBoxHolder { width: 25px; height: 25px; cursor: pointer; display: inline-block; background-color: #fff; position: relative; margin-right: 10px; -ms-transform: translatey(5px); -webkit-transform: translatey(5px); -moz-transform: translatey(5px); -o-transform: translatey(5px); transform: translatey(5px); } .subscriptionBoxWrapper .subscriptionBox .content.preferences form .formElements .formElement .checkBox .checkBoxHolder:after { content: ""; position: absolute; display: none; } .subscriptionBoxWrapper .subscriptionBox .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); } .subscriptionBoxWrapper .subscriptionBox .content.preferences form .formElements .formElement .checkBox input:checked ~ .checkBoxHolder { background-color: #000; } .subscriptionBoxWrapper .subscriptionBox .content.preferences form .formElements .formElement .checkBox input:checked ~ .checkBoxHolder:after { display: block; } .subscriptionBoxWrapper .subscriptionBox .content.preferences form button { margin-top: 10px; } .subscriptionBoxWrapper .subscriptionBox .content.confirmation { display: flex; flex-direction: column; justify-content: center; align-items: center; } .page-cart .subscriptionBoxWrapper, .page-account .subscriptionBoxWrapper { height: 0px; border-bottom: 1px solid #dedede; } .page-cart .subscriptionBoxWrapper .subscriptionBox, .page-account .subscriptionBoxWrapper .subscriptionBox, .folderid-selligent-light-optin-page .subscriptionBoxWrapper .subscriptionBox { display: none; } @media only screen and (min-width: 850px){ .subscriptionBoxWrapper .subscriptionBox .content.subscribe .copy { display: flex; flex-direction: column; align-items: center; } .subscriptionBoxWrapper .subscriptionBox .content.subscribe .copy p.bodycopy {} .subscriptionBoxWrapper .subscriptionBox .content.subscribe .copy p.bodycopy.uppercase { margin-bottom: 0; } .subscriptionBoxWrapper .subscriptionBox .content.subscribe form { display: inline-block; text-align: left; } .subscriptionBoxWrapper .subscriptionBox .content.subscribe form input[type="email"] { width: 400px; } .subscriptionBoxWrapper .subscriptionBox .content.subscribe form button { margin-left: 8px; } .subscriptionBoxWrapper .subscriptionBox .content.preferences { max-width: 1024px; } .subscriptionBoxWrapper .subscriptionBox .content.preferences .copy { max-width: 50%; margin-right: 20px; } .subscriptionBoxWrapper .subscriptionBox .content.preferences .copy p.bodycopy.uppercase { margin-bottom: 0; } .subscriptionBoxWrapper .subscriptionBox .content.preferences form .formElements { flex-direction: row; flex-wrap: wrap; } .subscriptionBoxWrapper .subscriptionBox .content.preferences form .formElements .formElement { width: 25%; } .subscriptionBoxWrapper .subscriptionBox .content.preferences form .formElements .formElement:last-child { width: 100%; } .subscriptionBoxWrapper .subscriptionBox .content.confirmation .copy { display: flex; flex-direction: column; align-items: center; } .subscriptionBoxWrapper .subscriptionBox .content.confirmation .copy p.bodycopy {} .subscriptionBoxWrapper .subscriptionBox .content.confirmation .copy p.bodycopy.uppercase { margin-bottom: 0; } } @media only screen and (max-width: 850px){ .subscriptionBoxWrapper .subscriptionBox .content form .formElements { flex-direction: column; justify-content: center; } .subscriptionBoxWrapper .subscriptionBox .content form .formElements .formElement { width: 100%; padding-bottom: 10px; text-align: center; } .subscriptionBoxWrapper .subscriptionBox .content form .formElements .formElement:last-child { padding-bottom: 0; } .subscriptionBoxWrapper .subscriptionBox .content form button {} .subscriptionBoxWrapper .subscriptionBox .content.subscribe { flex-direction: column; } .subscriptionBoxWrapper .subscriptionBox .content.subscribe .copy p.bodycopy { text-align: center; } .subscriptionBoxWrapper .subscriptionBox .content.subscribe form { width: 100%; } .subscriptionBoxWrapper .subscriptionBox .content.subscribe form input[type="email"] { height: 38px; } .subscriptionBoxWrapper .subscriptionBox .content.preferences { flex-direction: column; } .subscriptionBoxWrapper .subscriptionBox .content.preferences form { width: 100%; } .subscriptionBoxWrapper .subscriptionBox .content.preferences form .formElements { flex-direction: row; flex-wrap: wrap; } .subscriptionBoxWrapper .subscriptionBox .content.preferences form .formElements .formElement { width: 50%; } .subscriptionBoxWrapper .subscriptionBox .content.preferences form .formElements .formElement:last-child { width: 100%; } .subscriptionBoxWrapper .subscriptionBox .content.confirmation { flex-direction: column; } } /**********************/ /* subscription popup */ /**********************/ /* Added at 07.05.20. */ /* Edited at 11.03.21. Replaced loader icon. */ .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: calc(100% - 60px); max-width: 850px; padding: 20px 20px 40px; display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: #fff; z-index: 2; } .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.ctas.bttns 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; } } /*********************/ /* subscription page */ /*********************/ /* Added at 05.08.20. */ /* Edited at 11.03.21. Replaced loader icon. */ .subscriptionPageWrapper { position: relative; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .subscriptionPageWrapper.active { display: block; } .subscriptionPageWrapper .subscriptionPageLoader { 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; } .subscriptionPageWrapper .subscriptionPage { position: relative; width: calc(100% - 60px); max-width: 850px; margin: 0 auto; padding: 20px 20px 40px; display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: #fff; z-index: 2; } .subscriptionPageWrapper .subscriptionPage .subscriptionPageClose { position: absolute; top: 0; right: 0; width: 50px; height: 50px; cursor: pointer; z-index: 1; } .subscriptionPageWrapper .subscriptionPage .subscriptionPageClose:before, .subscriptionPageWrapper .subscriptionPage .subscriptionPageClose:after { position: absolute; content: ""; top: 50%; left: 50%; width: 16px; height: 2px; background-color: #000; } .subscriptionPageWrapper .subscriptionPage .subscriptionPageClose:before { -ms-transform: translate(-50%) rotate(-45deg); -webkit-transform: translate(-50%) rotate(-45deg); transform: translate(-50%) rotate(-45deg); } .subscriptionPageWrapper .subscriptionPage .subscriptionPageClose:after { -ms-transform: translate(-50%) rotate(45deg); -webkit-transform: translate(-50%) rotate(45deg); transform: translate(-50%) rotate(45deg); } .subscriptionPageWrapper .subscriptionPage .content form {} .subscriptionPageWrapper .subscriptionPage .content form .formElements { display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; } .subscriptionPageWrapper .subscriptionPage .content form .formElements .formElement {} .subscriptionPageWrapper .subscriptionPage .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; } .subscriptionPageWrapper .subscriptionPage .content form label[generated="true"]:before, .subscriptionPageWrapper .subscriptionPage .content form label[generated="true"]:after { content: ""; position: absolute; border: 10px solid transparent; width: 0; height: 0; } .subscriptionPageWrapper .subscriptionPage .content form label[generated="true"]:before { left: 10px; top: -20px; border-left-color: transparent; border-bottom-color: #F4BD2D; } .subscriptionPageWrapper .subscriptionPage .content form label[generated="true"]:after { left: 10px; top: -19px; border-left-color: transparent; border-bottom-color: #FFDE88; } .subscriptionPageWrapper .subscriptionPage .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; } .subscriptionPageWrapper .subscriptionPage .content.subscribe { display: flex; flex-direction: column; justify-content: center; align-items: center; } .subscriptionPageWrapper .subscriptionPage .content.subscribe .copy p.ctas.bttns a { margin: 0; } .subscriptionPageWrapper .subscriptionPage .content.subscribe form {} .subscriptionPageWrapper .subscriptionPage .content.subscribe form input[type="email"] { width: 100%; height: 43px; } .subscriptionPageWrapper .subscriptionPage .content.preferences { display: flex; flex-direction: row; justify-content: center; align-items: top; } .subscriptionPageWrapper .subscriptionPage .content.preferences form .formElements { flex-direction: column; align-items: start; } .subscriptionPageWrapper .subscriptionPage .content.preferences form .formElements .formElement .checkBox label, .subscriptionPageWrapper .subscriptionPage .content.preferences form .formElements .formElement .checkBox .label { display: inline-block; font-weight: normal; cursor: pointer; } .subscriptionPageWrapper .subscriptionPage .content.preferences form .formElements .formElement .checkBox label .labelHolder.chckBx { display: inline-block; } .subscriptionPageWrapper .subscriptionPage .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); } .subscriptionPageWrapper .subscriptionPage .content.preferences form .formElements .formElement .checkBox .checkBoxHolder:after { content: ""; position: absolute; display: none; } .subscriptionPageWrapper .subscriptionPage .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); } .subscriptionPageWrapper .subscriptionPage .content.preferences form .formElements .formElement .checkBox input:checked ~ .checkBoxHolder { background-color: #000; } .subscriptionPageWrapper .subscriptionPage .content.preferences form .formElements .formElement .checkBox input:checked ~ .checkBoxHolder:after { display: block; } .subscriptionPageWrapper .subscriptionPage .content.preferences form button { margin-top: 10px; } .subscriptionPageWrapper .subscriptionPage .content.confirmation { display: flex; flex-direction: column; justify-content: center; align-items: center; } .page-cart .subscriptionPageWrapper, .page-account .subscriptionPageWrapper { height: 0px; border-bottom: 1px solid #dedede; } .page-cart .subscriptionPageWrapper .subscriptionPage, .page-account .subscriptionPageWrapper .subscriptionPage { display: none; } @media only screen and (min-width: 850px){ .subscriptionPageWrapper .subscriptionPage .content.subscribe .copy { display: flex; flex-direction: column; align-items: center; } .subscriptionPageWrapper .subscriptionPage .content.subscribe .copy p.bodycopy {} .subscriptionPageWrapper .subscriptionPage .content.subscribe .copy p.bodycopy.uppercase { margin-bottom: 0; } .subscriptionPageWrapper .subscriptionPage .content.subscribe form { display: inline-block; text-align: left; } .subscriptionPageWrapper .subscriptionPage .content.subscribe form input[type="email"] { width: 400px; } .subscriptionPageWrapper .subscriptionPage .content.subscribe form button { margin-left: 8px; } .subscriptionPageWrapper .subscriptionPage .content.preferences { max-width: 1024px; } .subscriptionPageWrapper .subscriptionPage .content.preferences .copy { max-width: 50%; margin-right: 20px; } .subscriptionPageWrapper .subscriptionPage .content.preferences .copy p.bodycopy.uppercase { margin-bottom: 0; } .subscriptionPageWrapper .subscriptionPage .content.preferences form .formElements { flex-direction: row; flex-wrap: wrap; } .subscriptionPageWrapper .subscriptionPage .content.preferences form .formElements .formElement { width: 50%; } .subscriptionPageWrapper .subscriptionPage .content.preferences form .formElements .formElement:last-child { width: 100%; } .subscriptionPageWrapper .subscriptionPage .content.confirmation .copy { display: flex; flex-direction: column; align-items: center; } .subscriptionPageWrapper .subscriptionPage .content.confirmation .copy p.bodycopy {} .subscriptionPageWrapper .subscriptionPage .content.confirmation .copy p.bodycopy.uppercase { margin-bottom: 0; } } @media only screen and (max-width: 850px){ .subscriptionPageWrapper .subscriptionPage .content form .formElements { flex-direction: column; justify-content: center; } .subscriptionPageWrapper .subscriptionPage .content form .formElements .formElement { width: 100%; padding-bottom: 10px; text-align: center; } .subscriptionPageWrapper .subscriptionPage .content form .formElements .formElement:last-child { padding-bottom: 0; } .subscriptionPageWrapper .subscriptionPage .content form button {} .subscriptionPageWrapper .subscriptionPage .content.subscribe { flex-direction: column; } .subscriptionPageWrapper .subscriptionPage .content.subscribe .copy p.bodycopy { text-align: center; } .subscriptionPageWrapper .subscriptionPage .content.subscribe form { width: 100%; } .subscriptionPageWrapper .subscriptionPage .content.subscribe form input[type="email"] { height: 38px; } .subscriptionPageWrapper .subscriptionPage .content.preferences { flex-direction: column; } .subscriptionPageWrapper .subscriptionPage .content.preferences form { width: 100%; } .subscriptionPageWrapper .subscriptionPage .content.preferences form .formElements { flex-direction: row; flex-wrap: wrap; } .subscriptionPageWrapper .subscriptionPage .content.preferences form .formElements .formElement { width: 50%; } .subscriptionPageWrapper .subscriptionPage .content.preferences form .formElements .formElement:last-child { width: 100%; } .subscriptionPageWrapper .subscriptionPage .content.confirmation { flex-direction: column; } } /**********************************/ /* unsubscribe confirmation popup */ /**********************************/ /* Added at 23.06.20. */ /* Edited at 11.03.21. Replaced loader icon. */ .unsubscribeConfirmationPopupWrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; display: none; } .unsubscribeConfirmationPopupWrapper.active { display: block; } .unsubscribeConfirmationPopupWrapper .unsubscribeConfirmationPopupOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0,0,0,0.5); cursor: pointer; } .unsubscribeConfirmationPopupWrapper .unsubscribeConfirmationPopupLoader { 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; } .unsubscribeConfirmationPopupWrapper .unsubscribeConfirmationPopup { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% - 60px); max-width: 850px; padding: 20px 20px 40px; display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: #fff; z-index: 2; } .unsubscribeConfirmationPopupWrapper .unsubscribeConfirmationPopup .content[data-specific-optout]{ display: none; } .unsubscribeConfirmationPopupWrapper .unsubscribeConfirmationPopup .unsubscribeConfirmationPopupClose { position: absolute; top: 0; right: 0; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; } @media only screen and (min-width: 850px){ .unsubscribeConfirmationPopupWrapper .unsubscribeConfirmationPopup .content .copy { display: flex; flex-direction: column; align-items: center; } .unsubscribeConfirmationPopupWrapper .unsubscribeConfirmationPopup .content .copy p.bodycopy {} .unsubscribeConfirmationPopupWrapper .unsubscribeConfirmationPopup .content .copy p.bodycopy.uppercase { margin-bottom: 0; } } @media only screen and (max-width: 850px){ .unsubscribeConfirmationPopupWrapper .unsubscribeConfirmationPopup .content .copy p.bodycopy { text-align: center; } } /***************/ /* login popup */ /***************/ /* Added at 30.09.20. */ /* Edited at 28.10.20. Disabled, because this was replaced by sidepanel equivalent. */ /* Edited at 11.03.21. Replaced loader icon. */ /* .loginPopupWrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; display: none; } .loginPopupWrapper .loginPopupOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0,0,0,0.5); } .loginPopupWrapper .loginPopupLoader { 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; } .loginPopupWrapper .loginPopup { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% - 60px); max-width: 850px; padding: 20px; display: flex; flex-direction: row; justify-content: center; align-items: center; background-color: #fff; z-index: 2; } .loginPopupWrapper .loginPopup .loginPopupClose { position: absolute; top: 0; right: 0; width: 50px; height: 50px; cursor: pointer; z-index: 1; } .loginPopupWrapper .loginPopup .loginPopupClose:before, .loginPopupWrapper .loginPopup .loginPopupClose:after { position: absolute; content: ""; top: 50%; left: 50%; width: 16px; height: 2px; background-color: #000; } .loginPopupWrapper .loginPopup .loginPopupClose:before { -ms-transform: translate(-50%) rotate(-45deg); -webkit-transform: translate(-50%) rotate(-45deg); transform: translate(-50%) rotate(-45deg); } .loginPopupWrapper .loginPopup .loginPopupClose:after { -ms-transform: translate(-50%) rotate(45deg); -webkit-transform: translate(-50%) rotate(45deg); transform: translate(-50%) rotate(45deg); } .loginPopupWrapper .loginPopup .content {} .loginPopupWrapper .loginPopup .content .account-maincont { padding: 0; } .loginPopupWrapper .loginPopup .content .account-maincont .col-container { margin: 0; border-spacing: 0; display: flex; } .loginPopupWrapper .loginPopup .content .account-maincont .col-container .col-1, .loginPopupWrapper .loginPopup .content .account-maincont .col-container .col-2 { display: block; } @media only screen and (min-width: 850px){ .loginPopupWrapper .loginPopup .content .account-maincont .col-container .col-1 { width: calc(50% - 10px); margin-right: 10px; } .loginPopupWrapper .loginPopup .content .account-maincont .col-container .col-2 { width: calc(50% - 10px); margin-left: 10px; } } @media only screen and (max-width: 850px){ .loginPopupWrapper { position: absolute; } .loginPopupWrapper .loginPopup { position: absolute; top: 70px; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .loginPopupWrapper .loginPopup .content {} .loginPopupWrapper .loginPopup .content .account-maincont {} .loginPopupWrapper .loginPopup .content .account-maincont .col-container { flex-direction: column; } } */ /*******************/ /* login sidepanel */ /*******************/ /* Added at 28.10.20. */ .loginSidepanelTrigger { display: none; } .loginSidepanelFormWrapper {} .loginSidepanelFormWrapper .loginSidepanelForm {} .loginSidepanelFormWrapper .loginSidepanelContentWrapper { border: 1px solid #dedede; padding: 30px; margin-bottom: 20px; } .loginSidepanelFormWrapper .loginSidepanelContentWrapper .loginSidepanelContent {} .loginSidepanelFormWrapper .registerSidepanelContentWrapper { border: 1px solid #dedede; padding: 30px; } .loginSidepanelFormWrapper .registerSidepanelContentWrapper .registerSidepanelContent {} @media only screen and (max-width: 850px){ .loginSidepanelFormWrapper .loginSidepanelContentWrapper { padding: 15px; } .loginSidepanelFormWrapper .registerSidepanelContentWrapper { padding: 15px; } } /**********/ /* footer */ /**********/ /* Added at 22.06.18. */ /* Edited at 22.11.18. */ /* Edited at 08.04.19. Added specific fixes on cart & account pages. */ /* Edited at 05.08.19. Added billpay-klarna. */ /* Edited at 26.08.19. Added some flexbox improvements. Updated mobile shipping methods and payment methods to be a fixed part of the footer. */ /* Edited at 12.09.19. Added 50% width column option. */ /* Edited at 12.11.19. Added styling for error messaging. */ /* Edited at 14.11.19. Moved subscription box styling to separate section. */ /* Edited at 14.05.20. Added bpost. */ /* Edited at 23.07.20. Removed old styling. */ /* fixes */ footer.footer { background-color: #fff; position: static; } .footer__content { max-width: 100%; } /* footer */ .newFooterWrapper { width: 100%; max-width: 1600px; padding: 0 20px; margin: 0 auto; } .newFooterWrapper .newFooter { padding: 20px 0 60px 0; } .newFooterWrapper .newFooter p.newFooterTitle { font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-transform: uppercase; font-size: 18px; } .newFooterWrapper .newFooter p.newFooterCopy {} .newFooterWrapper .newFooter p a { text-decoration: none; color: #000; } .newFooterWrapper .newFooter p .seperator { color: #dfdfdf; } .newFooterWrapper .newFooter .newFooterTopWrapper {} .newFooterWrapper .newFooter .newFooterTopWrapper .newFooterTop {} .newFooterWrapper .newFooter .cols { display: flex; flex-direction: row; flex-wrap: wrap; } .newFooterWrapper .newFooter .cols .col-25 { width: 25%; } .newFooterWrapper .newFooter .cols .col-50 { width: 50%; } .newFooterWrapper .newFooter .cols .col-75 { width: 75%; } .newFooterWrapper .newFooter p.newFooterTitle { position: relative; margin: 0; padding: 15px 0; } .newFooterWrapper .newFooter .tabWrapper {} .newFooterWrapper .newFooter .tabWrapper .tab {} .newFooterWrapper .newFooter .tabWrapper .content {} .newFooterWrapper .newFooter .tabWrapper .content ul { margin: 0; padding: 0; list-style: none; } .newFooterWrapper .newFooter .tabWrapper .content ul li { height: 27px; } .newFooterWrapper .newFooter .tabWrapper .content ul li a { display: block; padding: 5px 0; text-decoration: none; color: #000; } .newFooterWrapper .newFooter .newFooterTopWrapper .newFooterTop .newFooterPaymentMethodsMobile { text-align: center; } .newFooterWrapper .newFooter .newFooterTopWrapper .newFooterTop .newFooterShippingMethodsMobile { text-align: center; } /* social */ .newFooterWrapper .newFooter .newFooterTopWrapper .newFooterTop .newFooterSocialMobile { text-align: center; } .newFooterWrapper .newFooter .hr { width: 100%; margin: 20px 0; height: 1px; background-color: #dfdfdf; } /* footer */ .newFooterWrapper .newFooter .newFooterBottomWrapper {} .newFooterWrapper .newFooter .newFooterBottomWrapper .newFooterBottom {} /* desktop only */ @media only screen and (min-width: 850px){ .newFooterWrapper .newFooter p a:hover { color: #999; } .newFooterWrapper .newFooter .tabWrapper .content .lang-selector { margin-top: 15px; margin-left: 9px; } .newFooterWrapper .newFooter .tabWrapper .content ul li a:hover { color: #999; } } /* mobile only */ @media only screen and (max-width: 850px){ .newFooterWrapper .newFooter { padding: 20px 0 20px 0; } .newFooterWrapper .newFooter p { text-align: center; } .newFooterWrapper .newFooter .cols { flex-direction: column; } .newFooterWrapper .newFooter .cols .col-25, .newFooterWrapper .newFooter .cols .col-50, .newFooterWrapper .newFooter .cols .col-75 { width: 100%; } .newFooterWrapper .newFooter .tabWrapper .tab p.newFooterTitle { text-align: left; cursor: pointer; padding: 10px 0; } .newFooterWrapper .newFooter .tabWrapper .tab p.newFooterTitle:after { content: "+"; position: absolute; right: 0; top: 50%; transform: translatey(-50%); -webkit-transform: translatey(-50%); } .newFooterWrapper .newFooter .tabWrapper[data-footer-tab="active"] .tab p.newFooterTitle:after { content: "-"; position: absolute; right: 0; top: 50%; transform: translatey(-50%); -webkit-transform: translatey(-50%); } .newFooterWrapper .newFooter .tabWrapper .content { height: 0; overflow: hidden; } .newFooterWrapper .newFooter .tabWrapper .content ul { padding: 0 0 10px 0; } .newFooterWrapper .newFooter .tabWrapper .content ul li { height: auto; text-align: left; } .newFooterWrapper .newFooter .tabWrapper .content ul li a { padding: 8px 0; } .newFooterWrapper .newFooter .newFooterBottomWrapper .newFooterBottom .col-25, .newFooterWrapper .newFooter .newFooterBottomWrapper .newFooterBottom .col-50, .newFooterWrapper .newFooter .newFooterBottomWrapper .newFooterBottom .col-75 { text-align: center; } } /*******************/ /* checkout footer */ /*******************/ /* Edited at 25.09.20. Adjusted styling to meet new footer. */ .footer.footer-content-checkout.footer-content-checkout { background-color: #fff; } .footer.footer-content-checkout .footer__content { padding: 0; } .footer.footer-content-checkout .newFooterWrapper { border-top: 1px solid #dedede; } /* mobile only */ @media only screen and (max-width: 850px){ .footer.footer-content-checkout.footer-content-checkout, .footer.footer-content-checkout.footer-content-checkout .footer__content { padding: 0; } } /************************************************************************* 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 {} .page-home #homeslides.homepage { max-width: 1600px; margin: 0 auto; } .page-home #homeslides > .html-asset-container { margin-top: 0; } /********/ /* 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. */ .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; text-align: center; margin: 0 10px; z-index: 1; position: relative; } .homeUspsWrapper .homeUsps ul li > span:not([data-dynamic-delivery-time]) { position: relative; width: 16px; height: 13px; display: inline-block; margin-right: 2px; } .homeUspsWrapper .homeUsps ul li > span:not([data-dynamic-delivery-time]) .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. */ .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){ .page-home .grid-row.grid-2 { width: 50%; } .homePageGridTile.full {} /* two columns */ .homePageGridTile.col-1-2, .homePageGridTile.col-2-2 {} /* 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%; } @media only screen and (max-width: 850px){ .grid-row.grid-4 { width: 50%; } } /* remove after 30.03.21. */ .page-home .homePageGridTile.specialOpeningHoursBannerbar { float: left; width: 100%; margin-top: 10px; } /* 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. */ .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; } .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 { margin-bottom: 10px; } .categoryMainGridTile.full > .categoryMainSlider { margin-bottom: 10px; } .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 { margin-bottom: 10px; } .categoryMainGridTile.full > .navigation-overlay > .imageMap { margin-top: -10px; } .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 { margin-top: -10px; } @media only screen and (max-width: 850px){ .grid-row.grid-1-3 { width: 100%; } .categoryMainGridTile.full {} /* two columns */ .categoryMainGridTile.col-1-2, .categoryMainGridTile.col-2-2 { margin-left: 0; margin-right: 0; } /* three columns */ .categoryMainGridTile.col-1-3, .categoryMainGridTile.col-2-3, .categoryMainGridTile.col-3-3 { margin-left: 0; margin-right: 0; } .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 { margin-bottom: 20px; } .categoryMainGridTile.full > .categoryMainSlider { margin-bottom: 20px; } .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 { margin-bottom: 20px; } .categoryMainGridTile.full > .navigation-overlay > .imageMap { margin-top: -20px; } .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 { margin-top: -20px; } } /***************/ /* inspiration */ /***************/ .inspirationGridTile { position: relative; z-index: 1; } .inspirationGridTile h4 { text-align: center; font-family: 'Futura PT W01 Heavy', arial, sans-serif; font-size: 28px; text-transform: uppercase; margin: 30px auto 10px; } .inspirationGridTile .hr { width: 100%; height: 1px; background: #000; margin: 20px auto; } .inspirationGridTile p.subTitle { text-align: center; margin: 10px auto 30px; text-transform: uppercase; font-family: 'Futura PT W01 Heavy', arial, sans-serif; font-size: 14px; } .inspirationGridTile .carouselTile { width: calc( 100% - 20px ); margin: 0 auto; } /* desktop only */ @media only screen and (min-width: 850px){ .inspirationGridTile .cycle-slideshow .cycle-prev { left: 10px; } .inspirationGridTile .cycle-slideshow .cycle-next { right: 10px; } } /* mobile only */ @media only screen and (max-width: 850px){} /***************/ /* back to top */ /***************/ /* Edited at 17.07.19. Changed fontsize from 18px to 1.25em. */ .backToTopWrapper { margin-top: 50px; } .backToTopWrapper .backToTop { border-top: 1px solid #dfdfdf; } .backToTopWrapper .backToTop p { text-align: center; font-family: 'Futura PT W01 Heavy', arial, sans-serif; font-size: 1.25em; text-transform: uppercase; margin: 0 auto; padding: 40px 0; } /************************************************************************* 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. */ .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: 3; } .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: 20px 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 {} .category_First_Banner { margin: 20px auto 0; } } /**************/ /* top banner */ /**************/ /* Edited at 10.07.19. Updated font sizes and margins to new standard. */ /* Edited at 12.07.19. Added label below title. Example: <p class="label uppercase inverse" style="background-color: #fff;">Nieuwe fits<span class="gt"></span>119<sup>99</sup></p> */ /* Edited at 19.07.19. Removed text-shadow on inverse paragraphs. */ /* Edited at 25.07.19. Adjusted fontsizes. */ .imageMap .areaFlex { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 30px; margin: 0 auto; max-width: 1600px; } .imageMap .areaFlex.left, .imageMap .areaFlex.left h1, .imageMap .areaFlex.left p { text-align: left; } .imageMap .areaFlex.left p.ctas { justify-content: flex-start; } .imageMap .areaFlex.center, .imageMap .areaFlex.center h1, .imageMap .areaFlex.center p { text-align: center; } .imageMap .areaFlex.center p.ctas { justify-content: center; } .imageMap .areaFlex.right, .imageMap .areaFlex.right h1, .imageMap .areaFlex.right p { text-align: right; } .imageMap .areaFlex.right p.ctas { justify-content: flex-end; } .imageMap .areaFlex h1 { font-family: "Futura PT W01 Heavy", arial, sans-serif; font-size: 40px; color: #fff; letter-spacing: 1px; text-shadow: 0 1px 3px rgba(0,0,0,0.2); width: 100%; margin: 0 auto; } .imageMap .areaFlex h1 .subHeader { font-size: 15px; display: block; } .imageMap .areaFlex h1 .subHeader2 { font-size: 28px; display: block; } .imageMap .areaFlex h1 a { color: #fff; text-decoration: none; display: inline; } .imageMap .areaFlex h1.inverse { color: #000; text-shadow: none; } .imageMap .areaFlex p { font-family: "Futura PT W01 Heavy", arial, sans-serif; font-size: 15px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.2); width: 100%; margin: 0 auto; } .imageMap .areaFlex p:nth-child(2) { margin-top: 20px; } .imageMap .areaFlex p.label sup { top: -0.3em; margin-left: 0.2em; } .imageMap .areaFlex p.label { display: inline-block; padding: 5px 20px; width: auto; text-shadow: none; } .imageMap .areaFlex p.uppercase { text-transform: uppercase; } .imageMap .areaFlex p.inverse { color: #000; text-shadow: none; } .imageMap .areaFlex p.ctas { display: flex; text-transform: uppercase; } .imageMap .areaFlex p.ctas .cta { text-decoration: none; color: #fff; margin: 0 0.75em; } .imageMap .areaFlex p.ctas .cta:first-child { margin-left: 0; } .imageMap .areaFlex p.ctas .cta:last-child { margin-right: 0; } .imageMap .areaFlex p.ctas .cta u { text-decoration: none; border-bottom: 0.1em solid #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.2); } .imageMap .areaFlex p.ctas .cta u:after { content: ""; display: block; width: calc(100% - 4px); height: 0.15em; margin: 0 auto; -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.5); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); box-shadow: 0 2px 1px rgba(0,0,0,0.1); } .imageMap .areaFlex p.ctas.inverse .cta { color: #000; text-shadow: none; } .imageMap .areaFlex p.ctas.inverse .cta u { border-bottom: 0.1em solid #000; } .imageMap .areaFlex p.ctas.inverse .cta u:after { display: none; } .imageMap .areaFlex p.ctas.state {} .imageMap .areaFlex p.ctas.state .cta {} .imageMap .areaFlex p.ctas.state .cta u { border-bottom: none; } .imageMap .areaFlex p.ctas.state .cta u:after { display: none; } .imageMap .areaFlex p.ctas.state .cta.active {} .imageMap .areaFlex p.ctas.state .cta.active u { border-bottom: 0.1em solid #fff; } .imageMap .areaFlex p.ctas.state .cta.active u:after { content: ""; display: block; width: calc(100% - 4px); height: 0.15em; margin: 0 auto; -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.5); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); box-shadow: 0 2px 1px rgba(0,0,0,0.1); } .imageMap .areaFlex p .gt { width: 48px; height: 18px; display: inline-block; position: relative; } .imageMap .areaFlex p .gt:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; border: 6px solid transparent; border-top: 6px solid #fff; border-right: 6px solid #fff; -moz-transform: translate(-50%,-50%) rotate(45deg); -webkit-transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%,-50%) rotate(45deg); } .imageMap .areaFlex p.inverse .gt:after { border-top: 6px solid #000; border-right: 6px solid #000; } /* mobile only */ @media only screen and (max-width : 850px){ .imageMap .areaFlex { padding: 0 20px; } .imageMap .areaFlex h1 { font-size: 28px; } .imageMap .areaFlex h1 .subHeader { font-size: 12px; } .imageMap .areaFlex h1 .subHeader2 { font-size: 18px; } .imageMap .areaFlex p { font-size: 12px; } .imageMap .areaFlex p:nth-child(2) { margin-top: 15px; } .imageMap .areaFlex p.label { padding: 3px 16px; } .imageMap .areaFlex p .gt { width: 32px; height: 10px; } .imageMap .areaFlex p .gt:after { border: 4px solid transparent; border-top: 4px solid #fff; border-right: 4px solid #fff; } .imageMap .areaFlex p.inverse .gt:after { border-top: 4px solid #000; border-right: 4px solid #000; } } /***************/ /* 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. */ .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; } .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; } .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; } .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; } .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; } .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; } .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; } /* 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-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-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-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; } [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; } .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; } .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; } .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; } .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; } [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; } .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; } .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; } .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; } .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; } /* 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-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-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-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-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-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-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; } } /***********************/ /* groupfilter buttons */ /***********************/ /* Added at 01.07.20. */ /* Edited at 06.07.20. Added loader overlay. */ /* Edited at 11.03.21. Replaced loader icon. */ .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; } .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 5px 0; } .groupFiltersWrapper .groupFilters .groupFilter:nth-child(2) { width: calc(50% - 3.5px); margin: 0 0 5px 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 { float: right; margin-right: 7px; } .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: 14px; } .groupFiltersWrapper .groupFilters { width: 100%; justify-content: center; flex-wrap: nowrap; } .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. */ .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; } } /******************************************/ /* category section with background image */ /******************************************/ /* Added at 18.07.19. */ /* Edited at 19.07.19. Added background image option to wrapper. */ .categoryPageSection { padding: 0 70px; } .categoryPageSection .content {} .categoryPageSection div.hr { width: 100%; height: 1px; background-color: #000; margin: 50px auto; } .categoryPageSection div.hr.inverse { background-color: #fff; } .categoryPageSectionBg { margin: 0 auto; background-repeat: no-repeat; position: relative; } .categoryPageSectionBg .bgOverlay { position: absolute; top: 0; height: 100%; } .categoryPageSectionBg .wrapper { position: relative; background-repeat: no-repeat; } .categoryPageSectionBg .categoryPageSection {} .categoryPageSectionBg .categoryPageSection .content { background-color: #fff; } @media only screen and (min-width : 850px){ .categoryPageSection { margin: 50px auto; padding: 0; } .categoryPageSectionBg { margin: 50px auto; background-size: contain; } .categoryPageSectionBg .wrapper { background-size: contain; } .categoryPageSectionBg.lft { background-position: left; } .categoryPageSectionBg.lft .wrapper { padding: 70px 0 70px 50%; background-position: left; } .categoryPageSectionBg.lft .bgOverlay { left: 0; width: 50%; } .categoryPageSectionBg.rght { background-position: right; } .categoryPageSectionBg.rght .wrapper { padding: 70px 50% 70px 0; background-position: right; } .categoryPageSectionBg.rght .bgOverlay { left: 50%; width: 50%; } .categoryPageSectionBg .categoryPageSection { margin: 0; } } @media only screen and (max-width : 850px){ .categoryPageSection { margin: 40px auto; padding: 0 15px; } .categoryPageSectionBg { padding: 80px 30px 0; background-size: 100%; background-position: top; } } /**************/ /* pod banner */ /**************/ /* Added at 01.05.18. */ /* Edited at 30.07.18. */ /* Edited at 30.07.18. Removed all responsive styling. */ /* Edited at 01.05.18. Added fitguide variant. */ /* Edited at 17.05.18. Adjusted fitguide variant. */ /* Edited at 17.04.18. Adjusted fitguide variant H2, font-size was too large for translations. */ .categoryPodBanner { position: relative; overflow: hidden; } /* general */ .generalPodBannerWrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .generalPodBannerWrapper .generalPodBanner { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate( -50%,-50% ); -webkit-transform: translate( -50%,-50% ); } .generalPodBannerWrapper .generalPodBanner h2 {} .generalPodBannerWrapper .generalPodBanner .hr { width: 30px; height: 3px; margin: 15px auto; background: #000; } .generalPodBannerWrapper .generalPodBanner p { width: 100%; } /* overwrite fix */ .pt_product-search-result #primary .generalPodBannerWrapper .generalPodBanner h2 { margin: 10px auto; } /* fitguide */ .generalPodBannerWrapper.fitguide {} .generalPodBannerWrapper.fitguide .generalPodBanner {} .generalPodBannerWrapper.fitguide .generalPodBanner h2 { font-size: 62px; text-transform: uppercase; font-family: 'Futura PT W01 Heavy', arial, sans-serif; line-height: 0.8em; color: #fff; } .generalPodBannerWrapper.fitguide .generalPodBanner h2 .subTitle { display: block; font-size: 0.3em; text-transform: uppercase; letter-spacing: 0.2em; line-height: 0.45em; margin: 10px auto; } .generalPodBannerWrapper.fitguide .generalPodBanner .arrow { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #fff; margin: 30px auto; } .generalPodBannerWrapper.fitguide .generalPodBanner p { font-size: 16px; font-family: 'Futura PT W01 Book', arial, sans-serif; line-height: 1em; text-transform: uppercase; max-width: 260px; margin: 15px auto; color: #fff; } /* overwrite fix */ .pt_product-search-result #primary .generalPodBannerWrapper.fitguide .generalPodBanner h2 { margin: 10px auto; } @media only screen and (max-width: 550px){ .generalPodBannerWrapper.fitguide .generalPodBanner h2 { font-size: 29px; line-height: 0.8em; } .generalPodBannerWrapper.fitguide .generalPodBanner h2 .subTitle { margin: 4px auto; } } /********/ /* 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. */ .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: 1px; 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]) { position: relative; width: 24px; height: 17px; display: inline-block; margin-right: 5px; } .plpUspsWrapper .plpUsps ul li > span:not([data-dynamic-delivery-time]) .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]) { position: absolute; left: -34px; height: 20px; } .plpUspsWrapper .plpUsps ul li > span:not([data-dynamic-delivery-time]) .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. */ .heroUspsWrapper {} .heroUspsWrapper .heroUsps {} .heroUspsWrapper .heroUsps ol { margin: 0; padding: 0 0 0 18px; } .heroUspsWrapper .heroUsps ol li { width: 100%; letter-spacing: 1px; 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; } } /******************/ /* listing banner */ /******************/ /* Added at 03.09.20. */ .listingBannerWrapper {} .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; } @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; } } /******************/ /* cluster banner */ /******************/ /* Edited at 22.02.18. */ /* Edited at 26.02.21. Removed old styling. Added fix for uppercase lettering. */ .categoryclustertitle h3 span { text-transform: none; } .categoryClusterBannerWrapper { width: 100%; margin: 0 auto 15px; } .categoryClusterBannerWrapper .categoryClusterBanner { position: relative; width: 100%; margin: 0px auto; overflow: hidden; } /************************/ /* crosssell navigation */ /************************/ /* Last edited at 06.03.19. */ /* Edited at 08.05.19. Removed some whitespace margin. */ /* Edited at 12.08.19. Updated typography. */ /* Edited at 24.04.20. After AB testing, decided to hide for desktop. */ [data-crosssell-nav] { clear: both; width: 100%; height: 40px; margin-bottom: 40px; } [data-crosssell-nav] [data-crosssell-nav-prev] { position: relative; width: 50%; display: block; float: left; } [data-crosssell-nav] [data-crosssell-nav-prev] .labelTopWrapper { width: 100%; } [data-crosssell-nav] [data-crosssell-nav-prev] .labelTopWrapper:before { content: ""; width: 40px; height: 40px; background: #fff url(../icons/sprite-left-right-nav-hover.png?$staticlink$) 0px 0px no-repeat; position: absolute; top: 0; left: 0; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } [data-crosssell-nav] [data-crosssell-nav-prev] .labelTopWrapper .labelTop { margin-left: 50px; height: 20px; text-align: left; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } [data-crosssell-nav] [data-crosssell-nav-prev] .labelTopWrapper .labelTop span { text-transform: uppercase; font-family: 'Futura PT W01 Heavy', arial, sans-serif; color: #9B9B9B; font-size: 15px; } [data-crosssell-nav] [data-crosssell-nav-prev] .labelBottomWrapper { width: 100%; height: 20px; } [data-crosssell-nav] [data-crosssell-nav-prev] .labelBottomWrapper .labelBottom { margin-left: 50px; height: 20px; text-align: left; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } [data-crosssell-nav] [data-crosssell-nav-prev] .labelBottomWrapper .labelBottom span { text-transform: uppercase; font-family: 'Futura PT W01 Heavy', arial, sans-serif; font-size: 15px; } [data-crosssell-nav] [data-crosssell-nav-next] { position: relative; width: 50%; display: block; float: right; } [data-crosssell-nav] [data-crosssell-nav-next] .labelTopWrapper { width: 100%; } [data-crosssell-nav] [data-crosssell-nav-next] .labelTopWrapper:before { content: ""; width: 40px; height: 40px; background: #fff url(../icons/sprite-left-right-nav-hover.png?$staticlink$) -38px 0px no-repeat; position: absolute; top: 0; right: 0; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } [data-crosssell-nav] [data-crosssell-nav-next] .labelTopWrapper .labelTop { margin-right: 50px; height: 20px; text-align: right; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } [data-crosssell-nav] [data-crosssell-nav-next] .labelTopWrapper .labelTop span { text-transform: uppercase; font-family: 'Futura PT W01 Heavy', arial, sans-serif; color: #9B9B9B; font-size: 15px; } [data-crosssell-nav] [data-crosssell-nav-next] .labelBottomWrapper { width: 100%; height: 20px; } [data-crosssell-nav] [data-crosssell-nav-next] .labelBottomWrapper .labelBottom { margin-right: 50px; height: 20px; text-align: right; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } [data-crosssell-nav] [data-crosssell-nav-next] .labelBottomWrapper .labelBottom span { text-transform: uppercase; font-family: 'Futura PT W01 Heavy', arial, sans-serif; font-size: 15px; } @media only screen and (min-width: 850px){ .category-cross-navigation { display: none; } [data-crosssell-nav] [data-crosssell-nav-prev]:hover .labelTopWrapper:before { background: #9B9B9B url(../icons/sprite-left-right-nav.png?$staticlink$) 0px 0px no-repeat; } [data-crosssell-nav] [data-crosssell-nav-prev]:hover .labelTopWrapper .labelTop { margin-left: 55px; } [data-crosssell-nav] [data-crosssell-nav-prev]:hover .labelBottomWrapper .labelBottom { margin-left: 55px; } [data-crosssell-nav] [data-crosssell-nav-next]:hover .labelTopWrapper:before { background: #9B9B9B url(../icons/sprite-left-right-nav.png?$staticlink$) -38px 0px no-repeat; } [data-crosssell-nav] [data-crosssell-nav-next]:hover .labelTopWrapper .labelTop { margin-right: 55px; } [data-crosssell-nav] [data-crosssell-nav-next]:hover .labelBottomWrapper .labelBottom { margin-right: 55px; } } @media only screen and (max-width: 850px){ [data-crosssell-nav] [data-crosssell-nav-prev] .labelTopWrapper .labelTop { margin-left: 40px; } [data-crosssell-nav] [data-crosssell-nav-prev] .labelBottomWrapper .labelBottom { margin-left: 40px; } [data-crosssell-nav] [data-crosssell-nav-next] .labelTopWrapper .labelTop { margin-right: 40px; } [data-crosssell-nav] [data-crosssell-nav-next] .labelBottomWrapper .labelBottom { margin-right: 40px; } } /* hide from main pages */ .page-category-11 [data-crosssell-nav], .page-category-12 [data-crosssell-nav], .page-category-00 [data-crosssell-nav], .page-category-sale [data-crosssell-nav] { display: none; } /*****************/ /* 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'. */ .heroProductWrapper { position: relative; z-index: 1; } .heroProductWrapper .heroProduct {} .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; } } /***********************************************/ /* display available content slots in template */ /***********************************************/ /* Added at ??. Styling to display content slots in template. */ .tmpContentSlotWrapper { width: calc(100% - 10px); margin: 5px; height: 100px; border: 1px solid #073786; background: #4B7ED3; } .tmpContentSlotWrapper .tmpContentSlot { padding: 20px; } .tmpContentSlotWrapper .tmpContentSlot p { text-align: center; color: #fff; font-size: 15px; } /*******************/ /* 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; } /*******************/ /* basics carousel */ /*******************/ /* Added at 30.10.19. */ .basicsCarouselWrapper { background-color: #f2f2f2; padding: 15px 0; } .basicsCarouselWrapper .categoryPageSlider .inverse.cycle-prev, .basicsCarouselWrapper .categoryPageSlider .inverse.cycle-next { background-color: rgba(255,255,255,1.0); } .basicsCarouselWrapper .categoryPageSlider .inverse.cycle-prev { left: 15px; } .basicsCarouselWrapper .categoryPageSlider .inverse.cycle-next { right: 15px; } .basicsCarouselWrapper .categoryPageSlider .slide { padding: 15px; white-space: normal; display: flex; flex-direction: column; } .basicsCarouselWrapper .categoryPageSlider.centeredSlideCarousel .carouselTile { padding: 0 15px; white-space: normal; display: flex; flex-direction: column; } @media only screen and (max-width: 1024px){ .basicsCarouselWrapper .categoryPageSlider .inverse.cycle-prev { left: 0; } .basicsCarouselWrapper .categoryPageSlider .inverse.cycle-next { right: 0; } .basicsCarouselWrapper .cycle-slideshow .cycle-slide.cycle-sentinel { opacity: 0 !important; width: 80% !important; margin: 0 10% !important; } .basicsCarouselWrapper .cycle-slideshow .cycle-carousel-wrap { overflow: visible !important; width: 80%; margin: 0 10% !important; } .basicsCarouselWrapper .cycle-slideshow .cycle-carousel-wrap .cycle-slide { width: 100% !important; } } /*******************/ /* stills carousel */ /*******************/ /* Added at 24.03.21. */ /* Edited at 23.04.21. Increased padding of carousel. */ .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 .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; } @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%; } } /*******************/ /* 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 .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. */ .productCarouselWrapper { position: relative; z-index: 1; } .productCarouselWrapper .productCarousel { padding: 20px 0; overflow: hidden; opacity: 0; transition: all .8s ease-in-out; } .productCarouselWrapper .productCarousel.initialized { opacity: 1; } .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) .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 h3.product-name { color: #030406; margin: 0 0 6px; text-align: center; 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: 96%; margin: 0 auto; overflow: hidden; font-size: 1rem; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; display: block; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-type { font-family: "Futura PT W01 Medium"; color: #7f7f7f; font-size: 14px; line-height: 18px; text-align: center; margin-bottom: 6px; padding: 0 6.8%; display: block; } .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-type span {} .productCarouselWrapper .productCarousel .categoryPageSlider .slide .product-pricing { text-align: center; } .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 .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. */ .brand-recommendations .product-reco-slider { padding: 50px 60px; background-color: #f2f2f2; } .brand-recommendations .product-reco-slider .weAndFriendsLogo.imageMapWrapper { max-width: 300px; margin: 0 auto 40px; } .brand-recommendations .product-reco-slider .weAndFriendsLogo.imageMapWrapper .imageMap {} .brand-recommendations .product-reco-slider .weAndFriendsLogo.imageMapWrapper .imageMap .imgHolder { background-image: url('../icons/2021_HL05/WE_AND_FRIENDS.svg'); padding-top: 8%; } .brand-recommendations .product-reco-slider .swiper-wrapper { height: auto; } @media only screen and (min-width: 850px){ .brand-recommendations { margin-bottom: 28px; } .brand-recommendations .product-reco-slider .pdp-subtitles { display: none; } .brand-recommendations .product-reco-slider .product-reco-nextbtn { margin-right: 10px; } .brand-recommendations .product-reco-slider .product-reco-prevbtn { margin-left: 10px; } .brand-recommendations .product-reco-slider .thumb-link { min-height: auto !important; background-color: #fff; } .brand-recommendations .product-reco-slider .thumb-link:hover { min-height: auto !important; } } @media only screen and (max-width: 850px){ .brand-recommendations .product-reco-slider { padding: 30px 0; } .brand-recommendations .product-reco-slider .weAndFriendsLogo.imageMapWrapper { max-width: 200px; margin: 0 auto 30px; } .brand-recommendations .product-reco-slider .product-reco-slide { width: 46%; } .brand-recommendations .product-reco-slider .swiper-wrapper { padding-bottom: 30px; } } /*********************/ /* view detail image */ /*********************/ /* Added at 29.01.20. */ /* Edited at 30.01.20. Replaced icon. Commentarized backup. */ /* Edited at 09.06.20. Replaced icon. Commentarized backup. */ /* Edited at 18.03.21. Removed element. */ .viewDetailImgWrapper { position: absolute; top: 0; right: 0; width: 100%; display: none; } .viewDetailImgWrapper { display: block; } .viewDetailImgWrapper .viewDetailImg { position: relative; } .viewDetailImgWrapper .viewDetailImg .viewDetailImgButton { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border: 0; background: url('../icons/2020_HL06/we_icon_lense_zoom_in.svg') center center no-repeat; background-size: 70%; cursor: pointer; } /***************************/ /* fitguide color carousel */ /***************************/ /* Added at 04.02.20. */ .page-category-1107-fitguide .categoryPageGridTile.colorWrapper { padding: 56px 20px 0; } @media only screen and (max-width : 850px){ .page-category-1107-fitguide .categoryPageGridTile.colorWrapper { padding: 56px 40px 0; } } /********************/ /* tip van jip ctas */ /********************/ /* Added at 04.02.20. */ /* Edited at 05.02.20. Added fix for carousel wrap. */ p.bodycopy.ctas.tip_van_jip { width: 100%; } p.bodycopy.ctas.tip_van_jip .cta { display: block; width: 100%; padding: 1.0em; margin: 0 !important; } .flex p.bodycopy.ctas.tip_van_jip .cta { margin: 0; } p.bodycopy.ctas.tip_van_jip .cta.active { background-color: #B71213; } #CP_HL03_TVK_TIPVANJIP_FASE1_2 .cycle-carousel-wrap { display: flex; } /***********/ /* touzani */ /***********/ /* Added at 31.03.20. */ /* Edited at 03.04.20. Added mobile styling. */ /* Edited at 23.04.20. Added styling for duplicate category. */ @media only screen and (min-width : 850px){ .page-category-140224-1 [data-parallax__group], .page-category-140224 [data-parallax__group] { padding-top: 75%; height: 0; } .page-category-140224-1 #stack-01, .page-category-140224 #stack-01 { z-index: 6; padding-top: 67.2%; } .page-category-140224-1 #stack-02, .page-category-140224 #stack-02 { z-index: 4; padding-top: 57.2%; } .page-category-140224-1 #stack-03, .page-category-140224 #stack-03 { z-index: 5; padding-top: 65%; } .page-category-140224-1 #stack-04, .page-category-140224 #stack-04 { z-index: 3; padding-top: 161.5%; } .page-category-140224-1 #stack-05, .page-category-140224 #stack-05 { z-index: 4; padding-top: 64%; } .page-category-140224-1 #stack-06, .page-category-140224 #stack-06 { z-index: 3; padding-top: 32%; } .page-category-140224-1 #stack-07, .page-category-140224 #stack-07 { z-index: 2; padding-top: 70%; } .page-category-140224-1 #stack-08, .page-category-140224 #stack-08 { z-index: 1; } .page-category-140224-1 #stack-09, .page-category-140224 #stack-09 { z-index: 2; padding-top: 70%; } } @media only screen and (max-width : 850px){ .page-category-140224-1 [data-parallax__group], .page-category-140224 [data-parallax__group] { padding-top: 89%; height: 0; } .page-category-140224-1 #stack-01, .page-category-140224 #stack-01 { z-index: 6; padding-top: 70.2%; } .page-category-140224-1 #stack-02, .page-category-140224 #stack-02 { z-index: 4; padding-top: 100%; } .page-category-140224-1 #stack-03, .page-category-140224 #stack-03 { z-index: 5; padding-top: 70.35%; } .page-category-140224-1 #stack-04, .page-category-140224 #stack-04 { z-index: 4; height: 120.2%; background-color: #000; } .page-category-140224-1 #stack-05, .page-category-140224 #stack-05 { z-index: 4; padding-top: 80%; background-color: #000; } .page-category-140224-1 #stack-06, .page-category-140224 #stack-06 { z-index: 3; padding-top: 75%; } .page-category-140224-1 #stack-07, .page-category-140224 #stack-07 { z-index: 2; padding-top: 105%; } .page-category-140224-1 #stack-08, .page-category-140224 #stack-08 { z-index: 1; } .page-category-140224-1 #stack-09, .page-category-140224 #stack-09 { z-index: 2; padding-top: 105%; } } /********************/ /* teens collection */ /********************/ /* Added at 27.01.21. */ .teensCollectionWrapper { background-color: #3C3C3C; margin-bottom: 50px; } .teensCollectionWrapper .teensCollection {} .teensCollectionWrapper .teensCollection .variationC[data-spawn-messages] > .spawnMessageWrapper { background-color: #EEEDF4; } .teensCollectionWrapper .teensCollection .variationC[data-spawn-messages] > .spawnMessageWrapper .spawnMessage .content p.bodycopy, .teensCollectionWrapper .teensCollection .variationC[data-spawn-messages] > .spawnMessageWrapper .spawnMessage .info p.bodycopy { color: #000; } .teensCollectionWrapper .teensCollection .variationC[data-spawn-messages] > .spawnMessageWrapper .spawnMessage .info p.bodycopy .globalIcon.tick.active:after { border: 1px solid #a79cd2; border-width: 0 2px 2px 0; } .teensCollectionWrapper .teensCollection .variationC[data-spawn-messages] > .spawnMessageWrapper:nth-child(1), .teensCollectionWrapper .teensCollection .variationC[data-spawn-messages] > .spawnMessageWrapper:nth-child(3) { background-color: #dad6ed; } .teensCollectionWrapper .teensCollection .variationC[data-spawn-messages] > .spawnMessageWrapper:nth-child(1) .spawnMessage .info .globalIcon.tick, .teensCollectionWrapper .teensCollection .variationC[data-spawn-messages] > .spawnMessageWrapper:nth-child(3) .spawnMessage .info .globalIcon.tick { display: none; } .teensCollectionWrapper .teensCollection .categoryPageGridTilesWrapper.ellipse .categoryPageGridTile > .imageMap { border: 3px solid #fff; width: calc(100% - 6px); } @media only screen and (max-width : 850px){ .teensCollectionWrapper { margin-bottom: 20px; } } /***************/ /* influencers */ /***************/ /* Added at 05.02.21. */ .page-category-2021_HL03_W_INFLUENCERS .product-reco-slider h3.pdp-subtitles { display: none; } /*******************/ /* krijg de kleren */ /*******************/ /* Added at 19.04.21. */ .page-category-2021WK16_WEXKDK .product-reco-slider h3.pdp-subtitles { display: none; } /************************************************************************* 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. */ .html-asset-container .pdpUspsWrapper { margin-top: 20px; } .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: 1px; margin: 10px 0 10px 0; text-align: left; position: relative; z-index: 1; } .pdpUspsWrapper .pdpUsps ul li > span:not([data-dynamic-delivery-time]) { position: relative; width: 24px; height: 17px; display: inline-block; margin-right: 5px; } .pdpUspsWrapper .pdpUsps ul li > span:not([data-dynamic-delivery-time]) .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]) { position: absolute; left: -34px; height: 20px; } .pdpUspsWrapper .pdpUsps ul li > span:not([data-dynamic-delivery-time]) .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; } /*****************/ /* shop the look */ /*****************/ /* Added at 14.03.18. */ /* Edited at 14.03.18. */ .promoset-page-title {} .promoset-page-title h1 { float: left; font-size: 42px; letter-spacing: 0.05em; } .promoset-page-title p { margin-left: 370px; transform: translatey(44px); -webkit-transform: translatey(44px); } .promoset-page-title p b {} @media only screen and (max-width : 850px){ .promoset-page-title h1 { float: none; font-size: 42px; letter-spacing: 0.05em; text-align: center; margin-bottom: 15px; } .promoset-page-title p { margin-left: 0; transform: translatey(0); -webkit-transform: translatey(0); text-align: center; margin-bottom: 25px; } } /***************/ /* product set */ /***************/ /* Added at 17.09.20. */ .product-set-total-price .product-price .price-standard { margin-right: .75em; color: #7a7a7a; text-decoration: line-through; } .product-set-total-price .product-price .price-sales { color: #ff690c; } /********************/ /* bannerrow margin */ /********************/ /* Added at 22.07.19. */ .page-pdp .pdp-main > .html-asset-container { margin: 0 auto 20px; max-width: 1540px; display: block; } /************************/ /* stockcheck link icon */ /************************/ /* Added at 23.07.20. */ .pdp-info-wrapper .stock-check { position: relative; z-index: 1; } .pdp-info-wrapper .stock-check:before { display: none; } .pdp-info-wrapper .stock-check > span { display: none; } .pdp-info-wrapper .stock-check > span .globalIcon { position: absolute; top: 0; left: 0; } @media only screen and (max-width : 850px){ .pdp-info-wrapper .stock-check:before { display: none; } .pdp-info-wrapper .stock-check > span { display: inline-block; width: 29px; height: 17px; position: relative; } } /***********************/ /* sizechart link icon */ /***********************/ /* Added at 26.07.19. Turned off because it need to be reviewed. */ /* Edited at 29.07.19. Enabled. */ /* Edited at 18.09.19. Removed background image. Fixed mobile variant. */ /* Edited at 23.07.20. Replaced current icon with new icon. Added javascript to insert icon. */ .pdp-size-link { position: relative; z-index: 1; } .pdp-size-link:before { display: none; } .pdp-size-link > span { display: inline-block; width: 29px; height: 17px; position: relative; } .pdp-size-link > span .globalIcon { position: absolute; top: 0; left: 0; } /*************************/ /* generated product set */ /*************************/ /* Added at 18.09.19. */ .dynamicpdp-wrapper .appLandingPage #product-set-list .product-set-list__wrapper { margin-bottom: 0; } .dynamicpdp-wrapper .appLandingPage > .swiper-container, .dynamicpdp-wrapper .appLandingPage .pdp-size-links, .dynamicpdp-wrapper .appLandingPage .pdp-addToCart-wrapper { display: none; } .dynamicpdp-wrapper .appLandingPage .product-detail .product-content { max-width: 100%; padding-bottom: 20px; } .dynamicpdp-wrapper .appLandingPage #add-all-to-cart { background-color: #00BF48; cursor: pointer; } .dynamicpdp-wrapper .appLandingPage #add-all-to-cart:hover { background-image: linear-gradient(#00D852,#00BF48); } .dynamicpdp-wrapper .appLandingPage .totals { padding: 0 0 30px; } .dynamicpdp-wrapper .appLandingPage .totals .product-set-total-price { display: flex; align-items: center; justify-content: space-between; } .dynamicpdp-wrapper .appLandingPage .totals .product-set-total-price .total, .dynamicpdp-wrapper .appLandingPage .totals .product-set-total-price .value { font-family: futura pt w01 medium; font-size: 1.25rem; } .dynamicpdp-wrapper .appLandingPage .totals .product-set-total-price .product-price span { width: auto; } /************************/ /* storecheck link icon */ /************************/ /* Added at 12.12.19. */ /* Disabled at 12.12.19. Not final yet. */ /* .stock-check:before { content: ''; display: inline-block; width: 34px; height: 34px; margin-right: 5px; background-image: url('../icons/2019_HL10/we_icon_favourite_store.svg'); background-repeat: no-repeat; } .stock-check:hover:before {} @media only screen and (max-width : 850px){ .stock-check:before {} } */ /****************/ /* 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; } } /****************/ /* 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. */ .products[data-products-wrapper] { display: none; } .variantSelectorButtonsWrapper {} .variantSelectorButtonsWrapper .variantSelectors {} .variantSelectorButtonsWrapper .variantSelectors a.variantSelectorButton { display: inline-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 { margin-top: 1.0em; } .variantSelectorImagesWrapper .variantSelectors a.variantSelectorImage { display: inline-block; width: 64px; height: 96px; position: relative; padding-bottom: .25em; border-bottom: 2px solid transparent; margin-bottom: 1px; } .variantSelectorImagesWrapper .variantSelectors a.variantSelectorImage.active { border-bottom: 2px solid #000; } .variantSelectorImagesWrapper .variantSelectors a.variantSelectorImage img { position: absolute; top: calc(50% - .25em); left: 0; width: 100%; -webkit-transform: translatey(-50%); transform: translatey(-50%); } @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; } } /***************/ /* brand logos */ /***************/ /* Added at 26.02.21. */ .brandLogo {} /* Fix. This should be fixed by Emakina */ .pdp-data .form-row { align-items: center; } /************************************************************************* 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; } } /************************************************************************* 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. */ .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 {} .page-cart .cartUspsWrapper[data-desktop-visible] .cartUsps .cartUsp p > span:not([data-dynamic-delivery-time]) { 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]) .globalIcon { position: absolute; top: 0; margin-right: 0; } .page-cart .cartUspsWrapper[data-desktop-visible] .cartUsps .cartUsp p > span:not([data-dynamic-delivery-time]) .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; } .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; } .page-cart .cartUspsWrapper[data-mobile-visible] .cartUsps .cartUsp p > span:not([data-dynamic-delivery-time]) { 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]) .globalIcon { position: absolute; top: 0; margin-right: 0; } .page-cart .cartUspsWrapper[data-mobile-visible] .cartUsps .cartUsp p > span:not([data-dynamic-delivery-time]) .globalIcon:before { background-color: #00BF48; } .page-cart .cartUspsWrapper[data-mobile-visible] .cartUsps .cartUsp .thuiswinkelWaarborgWrapper { max-width: 73px; } /************************/ /* probability reminder */ /************************/ /* Added at 22.01.20. Functionality in content.js. */ /* Edited at 04.08.20. Renamed from 'chanceOfPromo' to 'probabilityReminder'. */ .probabilityReminderWrapper {} .probabilityReminderWrapper .probabilityReminder {} .probabilityReminderWrapper .probabilityReminder p { margin: 0; line-height: 1.4em; } .probabilityReminderWrapper .probabilityReminder p a { color: #000; display: inline-block; padding: 10px; background-color: #fff; border: 1px solid #999; position: relative; border-radius: 2px; } .probabilityReminderWrapper .probabilityReminder p a:before, .probabilityReminderWrapper .probabilityReminder p a:after { content: ""; position: absolute; border: 10px solid transparent; width: 0; height: 0; } .probabilityReminderWrapper .probabilityReminder p a:before { left: 10px; top: -20px; border-left-color: transparent; border-bottom-color: #999; } .probabilityReminderWrapper .probabilityReminder p a:after { left: 10px; top: -19px; border-left-color: transparent; border-bottom-color: #fff; } .probabilityReminderWrapper .probabilityReminder p a span.bold { font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .probabilityReminderWrapper .probabilityReminder p a span.priceTag, .probabilityReminderWrapper .probabilityReminder p a span.discountTag { font-family: 'Futura PT W01 Heavy', arial, sans-serif; color: #FF6000; } @media only screen and (max-width: 850px) { .probabilityReminderWrapper { margin-top: 10px; } } /************************************************************************* 08.3 Checkout */ /***********/ /* general */ /***********/ /* site specific */ .lang-nl_be .checkout-progress, .lang-nl_fr .checkout-progress { background: url(../Navigation/header/34x32_be_commerce.png) 95% center no-repeat; } /* responsiveness */ @media only screen and (max-width : 850px){ .lang-nl_be .checkout-progress, .lang-nl_fr .checkout-progress { background: none; } } /***********************************/ /* log in / enter your information */ /***********************************/ .page-checkout-step1 {} /*******************/ /* delivery method */ /*******************/ /* Added at 25.02.21. */ .page-checkout-step2 {} .page-checkout-step2 .checkout-shipping-container {} .page-checkout-step2 .checkout-shipping-container .store-photo {} .page-checkout-step2 .checkout-shipping-container .store-hrs { width: 100%; } .page-checkout-step2 .checkout-shipping-container .store-hrs div.table {} .page-checkout-step2 .checkout-shipping-container .store-hrs div.table .tableBody {} .page-checkout-step2 .checkout-shipping-container .store-hrs div.table .tableBody .tableRow { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: stretch; } .page-checkout-step2 .checkout-shipping-container .store-hrs div.table .tableBody .tableRow .tableCell { margin-bottom: 6px; color: #7a7a7a; } .page-checkout-step2 .checkout-shipping-container .store-hrs div.table .tableBody .tableRow .tableCell:nth-child(1) { flex: 1; } .page-checkout-step2 .checkout-shipping-container .store-hrs div.table .tableBody .tableRow .tableCell:nth-child(2) { text-align: right; color: #000; } .page-checkout-step2 .checkout-shipping-container .pickuppoint.active .pickuppoint-details p.bodycopy { color: #7a7a7a; } @media only screen and (max-width: 850px) { .page-checkout-step2 .checkout-shipping-container .store-photo { padding: 20px 0 0 30px; } .page-checkout-step2 .checkout-shipping-container .store-hrs { padding-left: 30px; } } /***********/ /* payment */ /***********/ .page-checkout-step3 {} /************************************************************************* 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){} /* fixes */ .pt_order-confirmation .primary-content { float: none; margin: 0 auto; } .page-orderconfirmation .pt_order-confirmation .content-asset { margin: 0 auto; } .checkout-progress:before { display: none; } .checkout-progress ul { position: relative; justify-content: space-between; margin-left: auto; width: 50%; } .checkout-progress ul:before { content: ''; display: block; height: 2px; position: absolute; top: 15px; left: 50%; width: 100%; transform: translatex(-50%); background-color: rgba(0, 0, 0, 0.04); border-radius: 40px; z-index: 0; } .checkout-progress ul li { display: block; } .checkout-progress ul li:first-child { background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); } .checkout-progress ul li:last-child { margin-right: 0; background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 49%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 49%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); } @media only screen and (max-width : 850px){ .checkout-progress ul { justify-content: space-between; margin: auto; width: 100%; max-width: 100%; } .checkout-progress ul:before { width: 90%; } .checkout-progress ul li:first-child { margin-left: 0; } .checkout-progress ul li:last-child { margin-right: 0; } } /************/ /* 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. */ .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; } @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; } } /************/ /* slideout */ /************/ /* Added at 10.05.19. */ .replacement-info-slideout { background-color: #fff; } .replacement-info-slideout .handle { cursor: pointer; } .replacement-info-slideout .handle .container { margin: 15px auto; } .replacement-info-slideout #jsReplacementInfoPanelContent { } .replacement-info-slideout #jsReplacementInfoPanelContent .container { padding: 20px 20px 0; } .replacement-info-slideout #jsReplacementInfoPanelContent .container .sectionHeaderWrapper { background-color: #f2f2f2; border-bottom: 1px solid #dedede; } .replacement-info-slideout #jsReplacementInfoPanelContent .container .sectionHeaderWrapper .sectionHeader { padding: 20px 0; } .replacement-info-slideout #jsReplacementInfoPanelContent .container .sectionHeaderWrapper .sectionHeader .imageMapWrapper { max-width: 50px; margin: 0 auto; } .replacement-info-slideout #jsReplacementInfoPanelContent .container .sectionHeaderWrapper .sectionHeader h2 { text-align: center; max-width: 600px; margin: 10px auto 0; font-size: 16px; text-transform: uppercase; font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .replacement-info-slideout #jsReplacementInfoPanelContent .container p { text-align: center; max-width: 600px; margin: 20px auto; line-height: 1.6em; } @media only screen and (max-width : 850px){ .replacement-info-slideout .handle .container { margin: 10px auto; } .replacement-info-slideout #jsReplacementInfoPanelContent .container { padding: 20px 20px 0; } .replacement-info-slideout #jsReplacementInfoPanelContent .container p { margin: 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 */ /***********/ /* general */ /***********/ /* Added at 23.02.21. */ /* Edited at 17.03.21. Fixed width of table. */ #storeOptionsData .store-details { padding: 15px 0 0; } .store-locator-details .store-details-div { width: 100%; } .store-details-opening-hours { display: flex; flex-direction: row; flex-wrap: wrap; } .store-locator-details .store-details-div .store-details-opening-hours h3 { display: block; width: 100%; font-size: 18px; margin: 15px 0; text-transform: uppercase; font-family: 'Futura PT W01 Heavy', arial, sans-serif; } .store-locator-details .store-details-div .store-details-opening-hours h3.adjusted { margin-bottom: 0; } .store-locator-details .store-details-div .store-details-opening-hours div.floatLeft { float: none; display: block; width: calc(50% - 3px); margin-bottom: 3px; } .store-locator-details .store-details-div .store-details-opening-hours div.floatRight { float: none; display: block; width: calc(50% - 3px); margin-bottom: 3px; } .store-locator-details .store-details-div .store-details-opening-hours div.clearer { display: none; } .store-locator-details .store-details-div .store-details-opening-hours div.table { width: 100%; } .store-locator-details .store-details-div .store-details-opening-hours div.table .tableBody { width: 100%; } .store-locator-details .store-details-div .store-details-opening-hours div.table .tableBody .tableRow { width: 100%; } .store-locator-details .store-details-div .store-details-opening-hours div.table .tableBody .tableRow .tableCell { width: calc(50% - 3px); margin-bottom: 3px; } #storeResultsList ul li.store-detail-line, .store-details-attributes ul li.store-detail-line, .store-locator-details .store-details-events, .store-locator-details .store-details-div .store-details-opening-hours div { font-size: 15px; } .store-locator-details .store-details-events { margin-bottom: 15px; } /**********************/ /* 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. */ .folderid-corporate-indentity {} .folderid-corporate-indentity .ciMenuWrapper { position: fixed; top: 0; right: 0; z-index: 99; height: 100%; } .folderid-corporate-indentity .ciMenuWrapper .ciMenu { position: absolute; height: 100%; } .folderid-corporate-indentity .ciMenuWrapper .ciMenu .ciMenuTrigger { position: absolute; top: 120px; left: -85px; cursor: pointer; z-index: 1; } .folderid-corporate-indentity .ciMenuWrapper .ciMenu .ciMenuTrigger { position: absolute; top: 57px; right: 6px; cursor: pointer; z-index: 1; padding: 12px; } .folderid-corporate-indentity .ciMenuWrapper .ciMenu .ciMenuTrigger .ciMenuTriggerIcon { width: 16px; height: 14px; display: flex; flex-direction: column; justify-content: space-between; } .folderid-corporate-indentity .ciMenuWrapper .ciMenu .ciMenuTrigger .ciMenuTriggerIcon > div { width: 100%; height: 2px; background-color: #000; } .folderid-corporate-indentity .ciMenuWrapper .ciMenu:hover .ciMenuTrigger .ciMenuTriggerIcon > div { background-color: #fff; } .folderid-corporate-indentity .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; } .folderid-corporate-indentity .ciMenuWrapper .ciMenu:hover .ciMenuContent { right: 0; } .folderid-corporate-indentity .ciMenuWrapper .ciMenu .ciMenuContent ul { list-style: none; margin: 0; padding: 0; } .folderid-corporate-indentity .ciMenuWrapper .ciMenu .ciMenuContent ul li { text-align: left; font-size: 15px; line-height: 22px; } .folderid-corporate-indentity .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; } .folderid-corporate-indentity .ciMenuWrapper .ciMenu .ciMenuContent ul li a.active, .folderid-corporate-indentity .ciMenuWrapper .ciMenu .ciMenuContent ul li a:hover { opacity: 1.0; } .folderid-corporate-indentity .ciWrapper { width: 100%; } .folderid-corporate-indentity .ciWrapper .ciSection { max-width: 1600px; padding: 0 30px; margin: 0 auto; z-index: 1; position: relative; } .folderid-corporate-indentity .ciWrapper .ciSeparator { width: 100%; height: 10px; position: relative; } .folderid-corporate-indentity .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; } .folderid-corporate-indentity .ciWrapper [data-tab-trigger] { cursor: pointer; } .folderid-corporate-indentity .ciWrapper .icons, .folderid-corporate-indentity .ciWrapper .animations { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; } .folderid-corporate-indentity .ciWrapper .icons .icon, .folderid-corporate-indentity .ciWrapper .animations .animation { display: flex; flex-direction: column; width: 12.5%; justify-content: center; align-items: center; height: 150px; } .folderid-corporate-indentity .ciWrapper .animations .animation { overflow: hidden; width: calc(12.5% - 10px); margin: 0 5px 10px; } .folderid-corporate-indentity .ciWrapper .animations .animation .areas, .folderid-corporate-indentity .ciWrapper .animations .animation .areas p.bodycopy { cursor: pointer; } @media only screen and (max-width : 850px) { .folderid-corporate-indentity .ciWrapper { padding: 0 15px; } .folderid-corporate-indentity .ciWrapper .icons .icon, .folderid-corporate-indentity .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%} } /**************************/ /* 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. */ .folderid-student-discount {} .folderid-student-discount #primary h1.heading { margin: 40px 0; text-align: center; } .folderid-student-discount #primary h1.heading span { display: block; color: #FCC42F; } .folderid-student-discount #primary p.bodycopy { text-align: center; margin: 30px auto; } .folderid-student-discount #primary .hr { width: 100%; max-width: 50px; margin: 0 auto; height: 8px; background: #000; } .folderid-student-discount #primary .studentAlwaysGetMoreLogo { margin: 0 auto; max-width: 530px; } .folderid-student-discount .details-wrapper { margin: 40px 0; } .folderid-student-discount .details-wrapper .details { display: flex; flex-wrap: nowrap; background-color: #f2f2f2; } .folderid-student-discount .details-wrapper .details .col-50 { width: 50%; } .folderid-student-discount .details-wrapper .details .col-50:first-child { display: flex; flex-direction: column; align-self: center; padding: 20px; } .folderid-student-discount .details-wrapper .details .col-50 h4.heading { margin: 20px; } .folderid-student-discount #primary .details-wrapper .details .col-50 p.bodycopy { text-align: left; margin: 1.0em 20px; } .folderid-student-discount .details-wrapper .details .col-50 ul {} .folderid-student-discount .details-wrapper .details .col-50 ul li { line-height: 30px; } @media only screen and (max-width: 1024px) { .folderid-student-discount .details-wrapper .details { flex-direction: column; } .folderid-student-discount .details-wrapper .details .col-50 { width: 100%; } .folderid-student-discount .details-wrapper .details .col-50:first-child { padding: 20px 10px; } } /************/ /* giftcard */ /************/ /* Added at 14.06.18. */ /* Edited at 02.08.18. */ /* Edited at 29.07.20. Removed some styling. */ .folderid-gift-card {} .folderid-gift-card h1 { margin: 40px 0; text-align: center; font-family: 'Futura PT W01 Heavy', arial, sans-serif; font-size: 28px; text-transform: uppercase; line-height: 28px; } .folderid-gift-card #primary p { text-align: center; } .folderid-gift-card #primary p a.cta { color: #000; text-decoration: none; border-bottom: 1px solid #000; text-transform: uppercase; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } /* giftcard benefits */ .folderid-gift-card .giftcardBenefits { background: #f2f2f2; padding: 30px 150px; } .folderid-gift-card .giftcardBenefits ul { padding-left: 28px; } .folderid-gift-card .giftcardBenefits ul li { list-style: none; padding-left: 30px; font-family: 'Futura PT W01 Heavy', arial, sans-serif; text-transform: uppercase; font-style: italic; padding-bottom: 10px; } .folderid-gift-card .giftcardBenefits ul li:last-child { padding-bottom: 0; } /* member benefits */ .folderid-gift-card .membersGetMore {} .folderid-gift-card .membersGetMore p { max-width: 500px; margin: 15px auto; } .folderid-gift-card .memberBenefitsWrapper { max-width: 500px; margin: 0 auto; padding: 0 0 20px; } .folderid-gift-card .memberBenefitsWrapper .memberBenefits { display: flex; flex-direction: row; align-items: flex-start; } .folderid-gift-card .memberBenefitsWrapper .memberBenefits .benefitWrapper { width: 33.33%; } .folderid-gift-card .memberBenefitsWrapper .memberBenefits .benefitWrapper .benefit {} .folderid-gift-card .memberBenefitsWrapper .memberBenefits .benefitWrapper .benefit p.bodycopy { text-align: center; margin: 10px 20px; } .folderid-gift-card .memberBenefitsWrapper .memberBenefits .benefitWrapper .benefit p.bodycopy:first-child { margin-top: 0; } @media only screen and (max-width: 850px) { .folderid-gift-card .giftcardBenefits { padding: 30px 40px; } .folderid-gift-card .memberBenefitsWrapper .memberBenefits .benefitWrapper .benefit .benefitContentWrapper .benefitContent .benefitIconWrapper { padding: 0 30px; } .folderid-gift-card .memberBenefitsWrapper .memberBenefits .benefitWrapper .benefit .benefitContentWrapper .benefitContent p { font-size: 12px; } } /*******/ /* 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. */ /* 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; } .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; } /* 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 .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: 150; } .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; } } /* fixes */ /* Added at 22.05.19. This need to be fixed by Emakina! */ .pt_customer-service-nonav #main > .top-container { border-bottom: 1px solid #dedede; } .pt_customer-service-nonav #main > .container { width: 100%; max-width: 100%; padding: 0; } .pt_customer-service-nonav #main .content-nonav { max-width: 100% !important; } @media only screen and (max-width: 850px) { .pt_customer-service-nonav #primary { padding: 0; } } /* overlay settings */ .overlay__wrapper .faqPageWrapper .faqPage .tabsWrapper .tabs .tabWrapper .content { padding-top: 0; } .overlay__wrapper .faqPageWrapper .faqPage .tabsWrapper .tabs .tabWrapper .content > .content-asset { display: none; } .overlay__wrapper .faqContactWrapper .faqContact .contactDetails .column { display: none; } .overlay__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; } /*************/ /* 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. */ /* tweaks */ .folderid-brandbook .pt_customer-service-nonav #main > .top-container { display: none; } /* layout */ .folderid-brandbook .brandbookWrapper { background-color: #eae9e6;} .folderid-brandbook .brandbookWrapper .dark { background-color: #cdccc8; } .folderid-brandbook .brandbookWrapper #stack-03 { background-color: #d8c9b7; padding: 70px 0; } .folderid-brandbook .brandbookWrapper #stack-04 .textContainerWrapper .textContainer { padding: 21% 3% 3% 64%; } @media only screen and (min-width : 1600px){ .folderid-brandbook .brandbookWrapper #stack-04 .textContainerWrapper { min-height: 940px; } } @media only screen and (min-width : 1024px) and (max-width : 1600px){ .folderid-brandbook .brandbookWrapper #stack-04 .textContainerWrapper { min-height: 58vw; } } .folderid-brandbook .brandbookWrapper .light { background-color: #f5f4f3; } .folderid-brandbook .brandbookWrapper .brandbookContent { max-width: 1600px; margin: 0 auto; position: relative; } .folderid-brandbook .brandbookWrapper .brandbookContent .imageMap.brandbookParentLayer .imgHolder.light{ background-color: #fff; } .folderid-brandbook .brandbookWrapper .brandbookContent .imageMap.brandbookParentLayer .imgHolder.dark{ background-color: #eae9e6; } .folderid-brandbook .brandbookWrapper .brandbookContent .imageMap.brandbookChildLayer { padding: 2rem 2rem 0 2rem; } .folderid-brandbook .brandbookWrapper .brandbookContent .imageMap.brandbookChildLayer .imgHolder.light { background-color: #fff; } .folderid-brandbook .brandbookWrapper .brandbookContent .imageMap.brandbookChildLayer .imgHolder.dark { background-color: #eae9e6; } .folderid-brandbook .brandbookWrapper .brandbookContent .categoryMainGridTile.full.middle { margin: 0 auto; } .folderid-brandbook .brandbookWrapper .brandbookContent .categoryMainGridTile.full.wrapped { padding: 15px 30px; } .folderid-brandbook .brandbookWrapper .brandbookContent .categoryMainGridTile.half.wrapped { padding: 0 30px; } .folderid-brandbook .brandbookWrapper .brandbookContent .categoryMainGridTile.full > .categoryMainSlider {margin: 0;} /* typography */ .folderid-brandbook .brandbookWrapper .brandbookContent h1 { font-size: 80px; } .folderid-brandbook .brandbookWrapper .brandbookContent h2 { font-size: 40px; } .folderid-brandbook .brandbookWrapper .brandbookContent h1, .folderid-brandbook .brandbookWrapper .brandbookContent h2, .folderid-brandbook .brandbookWrapper .brandbookContent h3, .folderid-brandbook .brandbookWrapper .brandbookContent h4, .folderid-brandbook .brandbookWrapper .brandbookContent h5, .folderid-brandbook .brandbookWrapper .brandbookContent h6, .folderid-brandbook .brandbookWrapper .brandbookContent p { margin: 0; } .folderid-brandbook .brandbookWrapper .brandbookContent .flex .h1, .folderid-brandbook .brandbookWrapper .brandbookContent .flex h2, .folderid-brandbook .brandbookWrapper .brandbookContent .flex h3, .folderid-brandbook .brandbookWrapper .brandbookContent .flex h4, .folderid-brandbook .brandbookWrapper .brandbookContent .flex h5, .folderid-brandbook .brandbookWrapper .brandbookContent .flex h6, .folderid-brandbook .brandbookWrapper .brandbookContent .flex p { padding: 0; } .folderid-brandbook .brandbookWrapper .brandbookContent h1, .folderid-brandbook .brandbookWrapper .brandbookContent h2, .folderid-brandbook .brandbookWrapper .brandbookContent h3, .folderid-brandbook .brandbookWrapper .brandbookContent h4, .folderid-brandbook .brandbookWrapper .brandbookContent h5, .folderid-brandbook .brandbookWrapper .brandbookContent h6 { padding: 0; } .folderid-brandbook .brandbookWrapper .brandbookContent p { padding: 1rem 0 0 0; } .folderid-brandbook .brandbookWrapper .brandbookContent p.bodycopy.none { padding: 0 !important; margin: 0 !important; } .folderid-brandbook .brandbookWrapper .brandbookContent h1.heading.lowercase, .folderid-brandbook .brandbookWrapper .brandbookContent h2.heading.lowercase, .folderid-brandbook .brandbookWrapper .brandbookContent h3.heading.lowercase, .folderid-brandbook .brandbookWrapper .brandbookContent h4.heading.lowercase, .folderid-brandbook .brandbookWrapper .brandbookContent h5.heading.lowercase, .folderid-brandbook .brandbookWrapper .brandbookContent h6.heading.lowercase { text-transform: none !important; } .folderid-brandbook .brandbookWrapper .brandbookContent span.subtitle { font-size: 15px; } .folderid-brandbook .brandbookWrapper .brandbookContent span.subtitle.uppercase { text-transform: uppercase; } .folderid-brandbook .brandbookWrapper .brandbookContent ul.narrow { padding: 0 1rem; } /* colors */ .folderid-brandbook .brandbookWrapper .brandbookContent .lichtGroen { color: #05AE42; } .folderid-brandbook .brandbookWrapper .brandbookContent .groen { color: #788a73; } .folderid-brandbook .brandbookWrapper .brandbookContent .paars { color: #673472; } .folderid-brandbook .brandbookWrapper .brandbookContent .violet { color: #b6a1b8; } .folderid-brandbook .brandbookWrapper .brandbookContent .oranje { color: #d19138; } .folderid-brandbook .brandbookWrapper .brandbookContent .donkeroranje { color: #cf765c; } .folderid-brandbook .brandbookWrapper .brandbookContent .lichtblauw { color: #719dc6; } .folderid-brandbook .brandbookWrapper .brandbookContent .blauw { color: #0750a4; } .folderid-brandbook .brandbookWrapper .brandbookContent .goud { color: #B0885A; } /* images */ .folderid-brandbook .brandbookWrapper .brandbookContent .categoryMainGridTile.full > .imageMap { margin: 0; } .folderid-brandbook .brandbookWrapper .brandbookContent img.imageRight { float: right; margin: 15px 0 0 30px; } /* mobile only */ @media only screen and (max-width : 850px){ /* layout */ .folderid-brandbook .brandbookWrapper #stack-03 { padding: 30px ​0; } .folderid-brandbook .brandbookWrapper .brandbookContent div.hSpace.brandbook {margin-top: 1rem;} /* typography */ .folderid-brandbook .brandbookWrapper .brandbookContent h1 { font-size: 50px; } .folderid-brandbook .brandbookWrapper .brandbookContent h2 { font-size: 32px; } /* images */ .folderid-brandbook .brandbookWrapper .brandbookContent img.imageRight { margin: 20px 0 20px 20px; width: 50%; } } /* timeline carousel */ .folderid-brandbook .brandbookWrapper .cycle-custom-pager { bottom: 7%; width: calc(100% - 60px); } .folderid-brandbook .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%); } .folderid-brandbook .brandbookWrapper .cycle-custom-pager .dot-container { margin: 0 10px; } .folderid-brandbook .brandbookWrapper .cycle-custom-pager .dot-container .dot { position: relative; background-color: #fff; } .folderid-brandbook .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; } .folderid-brandbook .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(1) .dot:after { content: '1962'; } .folderid-brandbook .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(2) .dot:after { content: '1986'; } .folderid-brandbook .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(3) .dot:after { content: '1994'; } .folderid-brandbook .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(4) .dot:after { content: '1999'; } .folderid-brandbook .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(5) .dot:after { content: '2009'; } .folderid-brandbook .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(6) .dot:after { content: '2010'; } .folderid-brandbook .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(7) .dot:after { content: '2014'; } .folderid-brandbook .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(8) .dot:after { content: '2017'; } .folderid-brandbook .brandbookWrapper .cycle-custom-pager .dot-container:nth-child(9) .dot:after { content: '2020'; } .folderid-brandbook .brandbookWrapper .cycle-custom-pager .dot-container.cycle-pager-active .dot { background-color: #B0885A; } .folderid-brandbook .brandbookWrapper .cycle-custom-pager .dot-container.cycle-pager-active .dot:after { opacity: 1; top: 135%; } @media only screen and (min-width: 850px) { /* tweak carousel */ .folderid-brandbook .brandbookWrapper #stack-03 .categoryMainSlider.cycle-slideshow .cycle-carousel-wrap { margin-left: 33.33% !important; } .folderid-brandbook .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; } .folderid-brandbook .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) { .folderid-brandbook .brandbookWrapper .cycle-custom-pager:before { width: 236px; } .folderid-brandbook .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. */ .folderid-ocapi-categories .ocapiMenuWrapper { position: fixed; top: 0; right: 0; z-index: 99; height: 100%; } .folderid-ocapi-categories .ocapiMenuWrapper .ocapiMenu { position: absolute; width: 100%; height: 100%; } .folderid-ocapi-categories .ocapiMenuWrapper .ocapiMenu .ocapiMenuTrigger { position: absolute; top: 57px; right: 6px; cursor: pointer; z-index: 1; padding: 12px; } .folderid-ocapi-categories .ocapiMenuWrapper .ocapiMenu .ocapiMenuTrigger .ocapiMenuTriggerIcon { width: 16px; height: 14px; display: flex; flex-direction: column; justify-content: space-between; } .folderid-ocapi-categories .ocapiMenuWrapper .ocapiMenu .ocapiMenuTrigger .ocapiMenuTriggerIcon > div { width: 100%; height: 2px; background-color: #000; } .folderid-ocapi-categories .ocapiMenuWrapper .ocapiMenu .ocapiMenuTrigger p { color: #000; font-weight: bold; text-transform: uppercase; font-size: 14px; } .folderid-ocapi-categories .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; } .folderid-ocapi-categories .ocapiMenuWrapper .ocapiMenu:hover .ocapiMenuContent { transform: translatex(0); } .folderid-ocapi-categories .ocapiMenuWrapper .ocapiMenu:hover .ocapiMenuContent .formElementsWrappers { display: flex; flex-direction: row; align-items: flex-start; } /* categories */ .folderid-ocapi-categories {} .folderid-ocapi-categories .formElementsWrapper { width: calc(33.33% - 20px); padding: 0 10px; } .folderid-ocapi-categories .formElementsWrapper:nth-child(2) { margin-top: 91px; } .folderid-ocapi-categories .formElementsWrapper .formElements {} .folderid-ocapi-categories .formElementsWrapper .formElements .col-1-1, .folderid-ocapi-categories .formElementsWrapper .formElements .col-1-1-1 { display: flex; flex-direction: row; } .folderid-ocapi-categories .formElementsWrapper .formElements .col-1-1 .formElement { width: 50%; } .folderid-ocapi-categories .formElementsWrapper .formElements .col-1-1-1 .formElement { width: 33.33%; } .folderid-ocapi-categories .formElementsWrapper .formElements .col-1-1-1 .formElement:nth-child(2) { width: calc(33.3% - 10px); margin-left: 5px; margin-right: 5px; } .folderid-ocapi-categories .formElementsWrapper .formElements .formElement { margin: 10px 0 0 0; } .folderid-ocapi-categories .formElementsWrapper .formElements .formElement .sbHolder { height: 40px; } .folderid-ocapi-categories .formElementsWrapper .formElements .formElement a.sbSelector { height: 40px; line-height: 40px; } .folderid-ocapi-categories .formElementsWrapper .formElements .formElement input[type='text'] { width: 100%; } .folderid-ocapi-categories .formElementsWrapper .formElements .formElement select { padding: 3px 5px; height: 40px; border-radius: 3px; } .folderid-ocapi-categories .formElementsWrapper .formElements .formElement textarea { display: block; width: 100%; white-space: nowrap; overflow: auto; } .folderid-ocapi-categories .formElementsWrapper .formElements .formElement textarea[name="result"] { height: 800px; } .folderid-ocapi-categories .ocapiResponseWrapper {} .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse {} .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table { width: auto; margin: 0; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr { width: 100%; margin: 0; cursor: pointer; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr.selected { background: #6EC1FF; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr.active { background: #409EE3; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr.selected.active { background: #8ACDFF; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr:hover td { background: rgba(138, 205, 255, 0.5); } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr th, .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr td { text-align: left; background: none; padding: 5px 0 2px; font-family: 'Lucida Console', Monaco, monospace; font-size: 12px; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr th { font-weight: bold; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr th:nth-child(1), .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(1) { display: none; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(2) { width: 30%; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(3), .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(4), .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(5), .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(6) {} .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(7) { width: 100%; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr.level_2 td { padding-left: 15px; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr.level_2 td:first-child { padding-left: 0; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr.level_3 td { padding-left: 30px; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr.level_3 td:first-child { padding-left: 0; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr.level_4 td { padding-left: 45px; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr.level_4 td:first-child { padding-left: 0; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr.level_5 td { padding-left: 60px; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr.level_5 td:first-child { padding-left: 0; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr.level_6 td { padding-left: 75px; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr.level_6 td:first-child { padding-left: 0; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr td.id { z-index: 2; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr td.name { z-index: 1; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr td span.name_holder { white-space: nowrap; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr td span.name_holder.undefined { color: #ff0000; } .folderid-ocapi-categories .ocapiResponseWrapper .ocapiResponse table.sum tr td:nth-child(3) span.name_holder { font-weight: bold; } /* strip page */ .folderid-ocapi-categories .pt_customer-service .container { max-width: 100%; } .folderid-ocapi-categories .pt_customer-service #secondary { display: none; } .folderid-ocapi-categories .wrapper-primary { width: 100%; float: none; } .folderid-ocapi-categories .primary-content { width: 100%; float: none; } /* products */ .folderid-ocapi-products {} .folderid-ocapi-products .formElementsWrapper { background: #f2f2f2; margin-bottom: 20px; } .folderid-ocapi-products .formElementsWrapper .formElements { padding: 30px; } .folderid-ocapi-products .formElementsWrapper .formElements .formElement { margin: 10px 0 0 10px; } .folderid-ocapi-products .formElementsWrapper .formElements .formElement input[type='text'] { width: 100%; } .folderid-ocapi-products .ocapiResponseWrapper {} .folderid-ocapi-products .ocapiResponseWrapper .ocapiResponse {} .folderid-ocapi-products .ocapiResponseWrapper .ocapiResponse .productTile { padding: 20px 0; border-bottom: 1px solid #dedede; } .folderid-ocapi-products .ocapiResponseWrapper .ocapiResponse .productTile:nth-child(odd) {} .folderid-ocapi-products .ocapiResponseWrapper .ocapiResponse .productTile:nth-child(even) {} .folderid-ocapi-products .ocapiResponseWrapper .ocapiResponse .productTile h4.heading { margin: 0 auto 10px; } .folderid-ocapi-products .ocapiResponseWrapper .ocapiResponse .productTile .images { display: flex; flex-wrap: nowrap; flex-direction: row; } .folderid-ocapi-products .ocapiResponseWrapper .ocapiResponse .productTile .images img { width: calc(10% - 10px); margin: 0 5px; } .folderid-ocapi-products .ocapiResponseWrapper .ocapiResponse .productTile .images img:first-child { margin-left: 0; } .folderid-ocapi-products .ocapiResponseWrapper .ocapiResponse .productTile .images img:last-child { margin-right: 0; } .folderid-ocapi-products .ocapiResponseWrapper .ocapiResponse .productTile .hotspotsCodeWrapper { display: flex; flex-wrap: nowrap; flex-direction: row; } .folderid-ocapi-products .ocapiResponseWrapper .ocapiResponse .productTile .hotspotsCodeWrapper > div { width: 50%; } .folderid-ocapi-products .ocapiResponseWrapper .ocapiResponse .productTile .hotspotsCodeWrapper > div textarea[readonly] { padding: 5px; height: 33px; font-family: 'Lucida Console', Monaco, monospace; font-size: 10px; } /* strip page */ .folderid-ocapi-products .pt_customer-service .container { max-width: 100%; } .folderid-ocapi-products .pt_customer-service #secondary { display: none; } .folderid-ocapi-products .wrapper-primary { width: 100%; float: none; } .folderid-ocapi-products .primary-content { width: 100%; float: none; } /************/ /* 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 .ctas.bttns { justify-content: center; margin: 15px auto; } .weBoxQuestionsContactWrapper .weBoxQuestionsContact .ctas.bttns .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 .ctas.bttns { 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) .ctas.bttns { 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. */ .weCareAboutPageWrapper {} .weCareAboutPageWrapper .weCareAboutPage {} .weCareAboutPageWrapper .weCareAboutPage [data-magazine] { margin-bottom: 50px; max-width: 67.5%; margin: 0 auto; } .weCareAboutPageWrapper .weCareAboutPage .csr-report[data-magazine] { max-width: 100%; margin: 50px auto; } .weCareAboutPageWrapper .weCareAboutPage .csr-report[data-magazine] .magazine .page { height: 80%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper.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%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper.grn { background-color: #05AE42; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper.drk { background-color: #1d1d1d; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper .weCareAboutHead { 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; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper .weCareAboutHead .globalIcon { display: block; margin: 0 auto; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper .weCareAboutHead .headTextWrapper { width: 70%; margin: 0 auto; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper.gry .weCareAboutHead .headTextWrapper {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper .weCareAboutHead .headTextWrapper .headText {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper .weCareAboutHead .headTextWrapper .headText h3.heading, .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper .weCareAboutHead .headTextWrapper .headText p.bodycopy { text-align: center; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper.gry .weCareAboutHead .headTextWrapper .headText h3.heading, .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper.gry .weCareAboutHead .headTextWrapper .headText p.bodycopy { color: #05AE42; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper.grn .weCareAboutHead .headTextWrapper .headText h3.heading, .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper.grn .weCareAboutHead .headTextWrapper .headText p.bodycopy, .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper.drk .weCareAboutHead .headTextWrapper .headText h3.heading, .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper.drk .weCareAboutHead .headTextWrapper .headText p.bodycopy { color: #fff; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper.drk .weCareAboutHead .headTextWrapper .headText h3.heading { text-align: center; } /* desktop only */ @media only screen and (min-width : 850px){ .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper .weCareAboutHead .headLogoWrapper { max-width: 150px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper .weCareAboutHead .headLogoWrapper .headLogo .imgHolder { background-position: center center; background-size: 175%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper .weCareAboutHead .headTextWrapper .headText h3.heading { margin-top: 0; } } /* mobile only */ @media only screen and (max-width : 850px){ .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper .weCareAboutHead { padding: 40px 20px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper .weCareAboutHead .headLogoWrapper { max-width: 150px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutHeadWrapper .weCareAboutHead .headTextWrapper { width: 100%; } } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody { width: 100%; max-width: 1600px; margin: 0 auto; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section { max-width: 1310px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section h3.heading { color: #05AE42; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.gry { background-color: #f2f2f2; padding: 0 30px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.drk article h4.heading { text-align: center; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.drk article h4.heading, .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.drk article p.bodycopy { color: #fff; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.drk { background-color: #1d1d1d; padding: 0 30px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.white { background-color: #fff; padding: 0; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.tableOfContents {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.tableOfContents .tabWrapper { border: 1px solid #05AE42; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.tableOfContents .tabWrapper .tab { cursor: pointer; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.tableOfContents .tabWrapper .tab p { text-align: center; font-family: 'Futura PT W01 Heavy', arial, sans-serif; font-size: 22px; text-transform: uppercase; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.tableOfContents .tabWrapper .tab p .icon { display: inline-block; width: 22px; margin-right: 8px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.tableOfContents .tabWrapper .tab p .icon span { display: block; width: 100%; height: 3px; margin-bottom: 3px; border-radius: 2px; background-color: #000; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.tableOfContents .tabWrapper .tab p .icon span:last-child { margin-bottom: 0; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.tableOfContents .tabWrapper .content {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.tableOfContents .tabWrapper .content ul { margin: 10px 0 20px; padding: 0 30px; list-style-type: none; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.tableOfContents .tabWrapper .content ul li { border-top: 1px solid #dedede; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody 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; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article h3 {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article p.ctas.bttns 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; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article p.ctas.bttns a.cta u { text-decoration: none; border-bottom: 0; padding-bottom: 0; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody 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%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article p.ctas.dwnlds a.cta u { text-decoration: none; border-bottom: 0; padding-bottom: 0; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article #LP_LB_HL06_WECAREABOUT_VISION_MISSION { z-index: 1; position: relative; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article #LP_LB_HL06_WECAREABOUT_VISION_MISSION .slideWrapper { background-color: #fff; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article #LP_LB_HL06_WECAREABOUT_VISION_MISSION .slideWrapper .slide {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody 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%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody 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%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody 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%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody 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%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody 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%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody 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%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody 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%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody 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%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .bgImg { max-width: 1310px; margin: 0 auto; background-repeat: no-repeat; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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'); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .bgImg#LP_LB_HL11_WECAREABOUT_DSFW { background-image: url('../../Landing pages/_static/we-care-about/2020_HL11/LP_LB_HL11_WECAREABOUT_DSFW_EN.jpg'); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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'); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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'); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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'); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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'); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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'); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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'); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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'); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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'); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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'); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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'); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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'); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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'); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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'); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chaptersWrapper .chapters { display: flex; flex-wrap: wrap; width: 100%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chapterWrapper {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chapterWrapper .chapter { position: relative; z-index: 1; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chapterWrapper .chapter .globalIcon { display: block; margin: 0 auto; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chapterWrapper .chapter h4.heading { color: #000; margin-top: 0; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper { max-width: 1310px; margin: 0 auto; z-index: 1; position: relative; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper.gry { background-color: #f2f2f2; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper.drk { background-color: #1d1d1d; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide .bgImg {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide .slideHeadWrapper {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide .slideHeadWrapper .slideHead { padding: 50px 0; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide .slideHeadWrapper .slideHead h3.heading { margin: 0; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper.gry .carousel .slideWrapper .slide .slideHeadWrapper .slideHead h3.heading { color: #05AE42; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper.drk .carousel .slideWrapper .slide .slideHeadWrapper .slideHead h3.heading { color: #fff; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide .slideBodyWrapper .slideBody { display: flex; align-items: center; width: 100%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide .slideBodyWrapper .slideBody h3.heading { width: 100%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper.grn .carousel .slideWrapper .slide .slideBodyWrapper .slideBody h3.heading { color: #05AE42; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper.grn .carousel .slideWrapper .slide .slideBodyWrapper .slideBody h3.heading span { color: #05AE42; } /* desktop only */ @media only screen and (min-width : 850px){ .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .quote { width: 100%; max-width: 66.66%; margin: 0 auto; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section { margin: 60px auto; padding: 0 60px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.gry, .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.drk { padding: 60px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody 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; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article[data-columns="2"] > p.bodycopy:nth-child(2) { margin-top: 0; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article[data-static-columns="2"] { display: flex; flex-wrap: wrap; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article[data-static-columns="2"] .column { width: calc(50% - 2.0em); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article[data-static-columns="2"] .column:nth-child(1) { margin-right: 2.0em; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article[data-static-columns="2"] .column:nth-child(2) { margin-left: 2.0em; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article h4.heading { -webkit-column-span: all; -moz-column-span: all; column-span: all; color: #05AE42; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article h4.heading.noColumnSpan { -webkit-column-span: none; -moz-column-span: none; column-span: none; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article h5.heading { color: #05AE42; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article p.ctas.bttns a.cta:hover { background-color: #05AE42; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article #LP_LB_HL06_WECAREABOUT_VISION_MISSION .slideWrapper .slide { padding: 0 60px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article #LP_LB_HL06_WECAREABOUT_VISION_MISSION .slideWrapper .slide p { padding: 0 60px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .bgImg { margin: 60px auto; background-size: contain; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .bgImg.lft { padding: 80px 0 80px 33.33%; background-position: left; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .bgImg.rght { padding: 80px 33.33% 80px 0; background-position: right; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .bgImg section { margin: 0; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chaptersWrapper { margin-top: 60px; margin-bottom: 60px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chaptersWrapper .chapters { max-width: 1310px; margin: 0 auto; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chaptersWrapper .chapters .chapterWrapper { width: 50%; padding: 5px; position: relative; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chaptersWrapper .chapters .chapterWrapper:nth-child(1) { padding: 0 5px 5px 0; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chaptersWrapper .chapters .chapterWrapper:nth-child(2) { padding: 0 0 5px 5px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chaptersWrapper .chapters .chapterWrapper:nth-child(3) { padding: 5px 5px 0 0; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chaptersWrapper .chapters .chapterWrapper:nth-child(4) { padding: 5px 0 0 5px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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;} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chapterWrapper .chapter { background-color: #f2f2f2; padding: 40px 60px; height: 100%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chapterWrapper .chapter p.ctas.bttns a.cta:hover { background-color: #111; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .cycle-slideshow .cycle-custom-pager.general, .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .cycle-slideshow .cycle-custom-pager.inverse { -moz-transform: translate(-50%, -3.0em); -webkit-transform: translate(-50%, -3.0em); transform: translate(-50%, -3.0em); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .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%; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper.drk { background-color: #1d1d1d; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide { padding: 0 10% 8.0em; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide .bgImg { margin: 0 auto; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide .bgImg.lft { padding: 80px 0 80px 50%; background-position: left; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide .bgImg.rght { padding: 80px 50% 80px 0; background-position: right; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide .slideHeadWrapper .slideHead p { line-height: 1em; padding: 2em 0; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide .slideBodyWrapper .slideBody { padding: 60px; min-height: 400px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper.grn .carousel .slideWrapper .slide .slideBodyWrapper .slideBody p { max-width: 66.66%; margin: 1.0em auto; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide .chapterWrapper .chapter { background-color: transparent; } } /* mobile only */ @media only screen and (max-width : 850px){ .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section { margin: 40px auto; padding: 0 40px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.gry, .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.drk { padding: 40px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.gry.center h4.heading, .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.gry.center p.bodycopy, .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.drk.center h4.heading, .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section.drk.center p.bodycopy { text-align: left; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody section article #LP_LB_HL06_WECAREABOUT_VISION_MISSION .slideWrapper .slide {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .bgImg { padding: 80px 30px 0; background-size: 100%; background-position: top; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .bgImg#LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_CODEOFCONDUCT {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .bgImg#LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_FACTORIES {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .bgImg#LP_LB_HL06_WECAREABOUT_SUPPLYCHAIN_PURCHASING {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .bgImg#LP_LB_HL06_WECAREABOUT_BETTERPRODUCTS_CIRCULARTEXTILES {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .bgImg#LP_LB_HL06_WECAREABOUT_BETTERPRODUCTS_ORGANICCOTTON {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .bgImg#LP_LB_HL06_WECAREABOUT_BUSINESSSUSTAINABILITY_CODEOFETHICS {} .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chaptersWrapper { margin-bottom: 40px; background-color: #f2f2f2; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chaptersWrapper .chapters { flex-direction: column; padding: 10px 0 40px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chaptersWrapper .chapters .chapterWrapper:after { content: ""; display: block; width: calc(100% - 100px); height: 5px; margin: 0 auto; background-color: #05AE42; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chapterWrapper { width: calc(100% - 40px); margin: 0 auto; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .chapterWrapper .chapter { padding: 40px 20px 30px; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .cycle-slideshow .cycle-custom-pager.general, .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .cycle-slideshow .cycle-custom-pager.inverse { -moz-transform: translate(-50%, -2.5em); -webkit-transform: translate(-50%, -2.5em); transform: translate(-50%, -2.5em); } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide { padding: 0 30px 7.0em; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide .bgImg { padding: 200px 30px 0; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide .bgImg section { margin: 0; } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutBodyWrapper .weCareAboutBody .carouselWrapper .carousel .slideWrapper .slide .slideBodyWrapper .slideBody { padding: 40px; min-height: 400px; } } .weCareAboutPageWrapper .weCareAboutPage .weCareAboutFooterWrapper {} .weCareAboutPageWrapper .weCareAboutPage .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); } } /**********************/ /* 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. */ .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%; } @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%; } } /*******************/ /* styling session */ /*******************/ /* Added at 14.01.21. */ /* Edited at 03.02.21. Added comingSoon sticker. */ .stylingSessionPageWrapper {} .stylingSessionPageWrapper .stylingSessionPage {} .stylingSessionPageWrapper .stylingSessionPage > .categoryMainGridTile .ctas.bttns .cta { min-width: 195px; } .stylingSessionPageWrapper .stylingSessionPage .ctas.bttns .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; } } /************************************************************************* 10.0 Landing pages *************************************************************************/ /*****************************************/ /* 2020 / HL11 / 'Kalverstraat' winactie */ /*****************************************/ /* Added at 13.07.20. */ /* Edited at 14.07.20. */ /* Edited at 11.03.21. Replaced loader icon. */ .folderid-kalverstraat {} .folderid-kalverstraat .account-maincont { padding: 20px 0; } .folderid-kalverstraat .account-maincont .col-container { display: flex; flex-direction: row; margin: 0 auto; } .folderid-kalverstraat .account-maincont .col-container .col-1, .folderid-kalverstraat .account-maincont .col-container .col-2 { width: calc(50% - 30px); } .folderid-kalverstraat .account-maincont .col-container .col-1 { margin: 0 10px 0 20px; position: relative; } .folderid-kalverstraat .account-maincont .col-container .col-2 { margin: 0 20px 0 10px; } .folderid-kalverstraat .kalverstraatFormWrapper { position: relative; } .folderid-kalverstraat .kalverstraatFormWrapper .kalverstraatFormWrapperLoader { 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; } .folderid-kalverstraat .grid-row { float: none; } .folderid-kalverstraat .resultImgWrapper { padding: 0 20px; } .folderid-kalverstraat .resultImgWrapper .resultImg { max-width: 100%; margin: 0 auto; display: block; } .folderid-kalverstraat #primary .content { max-width: 1200px; padding: 0 40px; margin: 0 auto; } .folderid-kalverstraat .content h4.heading.highlighted { color: #60AD99; } .folderid-kalverstraat .content p.bodycopy span.label { background-color: #D8E6E7; color: #000; } .folderid-kalverstraat #acc-login-page .col-1, .folderid-kalverstraat #acc-login-page .col-2 { border: 0; padding: 0; width: 50%; } .folderid-kalverstraat #acc-login-page .col-1 p.heading, .folderid-kalverstraat #acc-login-page .col-2 p.heading { text-align: center; } .folderid-kalverstraat #acc-login-page .col-1 .col-1-content, .folderid-kalverstraat #acc-login-page .col-2 .col-2-content { border: 1px solid #ddd; padding: 26px 20px; height: 100%; } .folderid-kalverstraat .formWrapper { max-width: 1200px; padding: 0 40px; margin: 0 auto; display: flex; flex-direction: row; } .folderid-kalverstraat .formWrapper .col { width: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; } .folderid-kalverstraat .formWrapper .col .formElements { display: flex; flex-direction: column; justify-content: center; align-items: center; } .folderid-kalverstraat .formWrapper .col .formElements .formElement { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; } .folderid-kalverstraat .formWrapper .col .formElements .formElement .formItem { width: 100%; margin: 0 15px 20px 15px; } .folderid-kalverstraat .formWrapper .col .formElements .formElement .formItem:first-child { margin-left: 0; } .folderid-kalverstraat .formWrapper .col .formElements .formElement .formItem:last-child { margin-right: 0; } .folderid-kalverstraat .formWrapper .col .formElements .formElement .formItem label { text-align: initial; margin-bottom: 3px; float: none; } .folderid-kalverstraat .formWrapper .col .formElements .formElement .formItem .sbHolder { height: 40px; } .folderid-kalverstraat .formWrapper .col .formElements .formElement .formItem .sbHolder .sbSelector { height: 40px; line-height: 40px; } .folderid-kalverstraat .formWrapper .col .formElements .formElement span.error[generated="true"] { display: inline-block; margin: 5px 0 0; position: relative; padding: 10px; } .folderid-kalverstraat .formWrapper .col .formElements .formElement span.error[generated="true"]:after { content: ""; position: absolute; border: 10px solid transparent; width: 0; height: 0; } .folderid-kalverstraat .formWrapper .col .formElements .formElement span.error[generated="true"]:after { left: 10px; top: -19px; border-left-color: transparent; border-bottom-color: #c9455d; } .folderid-kalverstraat .formWrapper .col .formElements .formElement .textAreaWrapper { width: 100%; height: 125px; position: relative; clear: both; } .folderid-kalverstraat .formWrapper .col .formElements .formElement textarea { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #dedede; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .folderid-kalverstraat .formWrapper .col .formElements .formElement .checkBox { display: flex; flex-direction: column; align-items: flex-start; } .folderid-kalverstraat .formWrapper .col .formElements .formElement .checkBox label, .folderid-kalverstraat .formWrapper .col .formElements .formElement .checkBox .label { display: inline-block; font-weight: normal; cursor: pointer; position: relative; text-align: left; padding: 0; margin-bottom: 0; } .folderid-kalverstraat .formWrapper .col .formElements .formElement .checkBox label .labelHolder.chckBx { display: inline-block; margin-left: 40px; } .folderid-kalverstraat .formWrapper .col .formElements .formElement .checkBox .checkBoxHolder { width: 25px; height: 25px; cursor: pointer; display: inline-block; background-color: #f2f2f2; position: absolute; top: 9px; left: 0; margin-right: 10px; -ms-transform: translatey(5px); -webkit-transform: translatey(5px); -moz-transform: translatey(5px); -o-transform: translatey(5px); transform: translatey(5px); } .folderid-kalverstraat .formWrapper .col .formElements .formElement .checkBox .checkBoxHolder:after { content: ""; position: absolute; display: none; } .folderid-kalverstraat .formWrapper .col .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); } .folderid-kalverstraat .formWrapper .col .formElements .formElement .checkBox input[type="checkbox"] { display: none; } .folderid-kalverstraat .formWrapper .col .formElements .formElement .checkBox input:checked ~ .checkBoxHolder { background-color: #000; } .folderid-kalverstraat .formWrapper .col .formElements .formElement .checkBox input:checked ~ .checkBoxHolder:after { display: block; } .folderid-kalverstraat .formWrapper .col .formElements button.cta { border: 0; padding: 15px 26px; margin-top: 10px; background-color: #C3A1A0; color: #fff; text-transform: uppercase; font-size: 14px; line-height: 1.2em; font-friends: 'Futura PT W01 Heavy', arial, sans-serif; text-decoration: none; transition: all ease .3s; -moz-transition: all ease .3s; -webkit-transition: all ease .3s; display: inline-block; text-align: center; cursor: pointer; } .folderid-kalverstraat .socialChannels { margin: 0 auto; max-width: 860px; display: flex; flex-direction: row; align-items: center; justify-content: center; } .folderid-kalverstraat .socialChannels .socialChannel { width: 100%; margin: 0 10px; } .folderid-kalverstraat .socialChannels .socialChannel:nth-child(1) { margin-left: 0; } .folderid-kalverstraat .socialChannels .socialChannel:nth-child(3) { margin-right: 0; } .folderid-kalverstraat .content .crossSellCategories { margin: 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: center; } .folderid-kalverstraat .content .crossSellCategories .crossSellCategory { width: 100%; margin: 0 10px; } .folderid-kalverstraat .content .crossSellCategories .crossSellCategory:nth-child(1) { margin-left: 0; } .folderid-kalverstraat .content .crossSellCategories .crossSellCategory:nth-child(4) { margin-right: 0; } .folderid-kalverstraat .content .crossSellCategories .crossSellCategory .imageMap {} .folderid-kalverstraat .content .crossSellCategories .crossSellCategory .imageMap .imgHolder { padding-top: 100%; } .folderid-kalverstraat .content .crossSellCategories .crossSellCategory:nth-child(1) .imageMap .imgHolder { background-image: url('../Landing pages/_promotions/2020_HL11/LP_HL11_KALVERSTRAAT_WINACTIE_CROSS_MEN.jpg'); } .folderid-kalverstraat .content .crossSellCategories .crossSellCategory:nth-child(2) .imageMap .imgHolder { background-image: url('../Landing pages/_promotions/2020_HL11/LP_HL11_KALVERSTRAAT_WINACTIE_CROSS_WOMEN.jpg'); } .folderid-kalverstraat .content .crossSellCategories .crossSellCategory:nth-child(3) .imageMap .imgHolder { background-image: url('../Landing pages/_promotions/2020_HL11/LP_HL11_KALVERSTRAAT_WINACTIE_CROSS_BOYS.jpg'); } .folderid-kalverstraat .content .crossSellCategories .crossSellCategory:nth-child(4) .imageMap .imgHolder { background-image: url('../Landing pages/_promotions/2020_HL11/LP_HL11_KALVERSTRAAT_WINACTIE_CROSS_GIRLS.jpg'); } @media only screen and (max-width: 850px){ .folderid-kalverstraat .account-maincont .col-container { flex-direction: column; } .folderid-kalverstraat .account-maincont .col-container .col-1, .folderid-kalverstraat .account-maincont .col-container .col-2 { width: 100%; } .folderid-kalverstraat .account-maincont .col-container .col-1 { margin: 0 0 30px 0; } .folderid-kalverstraat .account-maincont .col-container .col-2 { margin: 0 0 30px 0; } .folderid-kalverstraat #acc-login-page .col-1, .folderid-kalverstraat #acc-login-page .col-2 { border: 0; padding: 0; width: calc(100% - 40px); margin: 0 auto; } .folderid-kalverstraat #acc-login-page .col-2 { margin-top: 20px; } .folderid-kalverstraat #acc-login-page .col-1 p.heading, .folderid-kalverstraat #acc-login-page .col-2 p.heading { padding: 0 40px; position: relative; } .folderid-kalverstraat #acc-login-page .col-1 p.bodycopy, .folderid-kalverstraat #acc-login-page .col-2 p.bodycopy { text-align: center; } .folderid-kalverstraat .formWrapper { flex-direction: column; } .folderid-kalverstraat .formWrapper .col { width: 100%; } .folderid-kalverstraat .formWrapper .col .formElements .formElement { flex-direction: column; } .folderid-kalverstraat .formWrapper .col .formElements .formElement .formItem { margin: 0 5px 20px 5px; } .folderid-kalverstraat .formWrapper .col .formElements .formElement .checkBox { align-items: flex-start; } .folderid-kalverstraat .socialChannels { flex-direction: row; flex-wrap: wrap; } .folderid-kalverstraat .socialChannels .socialChannel:nth-child(1) { width: calc(33.33% - 6.5px); max-width: 248px; margin: 0 6.5px 0 0; } .folderid-kalverstraat .socialChannels .socialChannel:nth-child(2) { width: calc(33.33% - 6.5px); max-width: 248px; margin: 0 3.25px 0 3.25px; } .folderid-kalverstraat .socialChannels .socialChannel:nth-child(3) { width: calc(33.33% - 6.5px); max-width: 248px; margin: 0 0 0 6.5px; } .folderid-kalverstraat .content .crossSellCategories { flex-direction: row; flex-wrap: wrap; } .folderid-kalverstraat .content .crossSellCategories .crossSellCategory { width: calc(50% - 20px); max-width: 248px; } .folderid-kalverstraat .content .crossSellCategories .crossSellCategory:nth-child(1) { margin: 0 10px 10px 0;} .folderid-kalverstraat .content .crossSellCategories .crossSellCategory:nth-child(2) { margin: 0 0 10px 10px; } .folderid-kalverstraat .content .crossSellCategories .crossSellCategory:nth-child(3) { margin: 10px 10px 0 0; } .folderid-kalverstraat .content .crossSellCategories .crossSellCategory:nth-child(4) { margin: 10px 0 0 10px; } } /*******************************************/ /* 2020 / HL08 / 'Summer outfits' winactie */ /*******************************************/ /* Added at 13.07.20. */ /* Edited at 14.07.20. */ /* Edited at 11.03.21. Replaced loader icon. */ .folderid-summer-outfits {} .folderid-summer-outfits .account-maincont { padding: 20px 0; } .folderid-summer-outfits .account-maincont .col-container { display: flex; flex-direction: row; margin: 0 auto; } .folderid-summer-outfits .account-maincont .col-container .col-1, .folderid-summer-outfits .account-maincont .col-container .col-2 { width: calc(50% - 30px); } .folderid-summer-outfits .account-maincont .col-container .col-1 { margin: 0 10px 0 20px; position: relative; } .folderid-summer-outfits .account-maincont .col-container .col-2 { margin: 0 20px 0 10px; } .folderid-summer-outfits .summerOutfitsFormWrapper { position: relative; } .folderid-summer-outfits .summerOutfitsFormWrapper .summerOutfitsFormWrapperLoader { 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; } .folderid-summer-outfits .grid-row { float: none; } .folderid-summer-outfits .resultImgWrapper { padding: 0 20px; } .folderid-summer-outfits .resultImgWrapper .resultImg { max-width: 100%; margin: 0 auto; display: block; } .folderid-summer-outfits #primary .content { max-width: 1200px; padding: 0 40px; margin: 0 auto; } .folderid-summer-outfits .content h4.heading.highlighted { color: #60AD99; } .folderid-summer-outfits .content p.bodycopy span.label { background-color: #D8E6E7; color: #000; } .folderid-summer-outfits #acc-login-page .col-1, .folderid-summer-outfits #acc-login-page .col-2 { border: 0; padding: 0; width: 50%; } .folderid-summer-outfits #acc-login-page .col-1 p.heading, .folderid-summer-outfits #acc-login-page .col-2 p.heading { text-align: center; } .folderid-summer-outfits #acc-login-page .col-1 .col-1-content, .folderid-summer-outfits #acc-login-page .col-2 .col-2-content { border: 1px solid #ddd; padding: 26px 20px; height: 100%; } .folderid-summer-outfits .formWrapper { max-width: 1200px; padding: 0 40px; margin: 0 auto; display: flex; flex-direction: row; } .folderid-summer-outfits .formWrapper .col { width: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; } .folderid-summer-outfits .formWrapper .col .formElements { display: flex; flex-direction: column; justify-content: center; align-items: center; } .folderid-summer-outfits .formWrapper .col .formElements .formElement { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; } .folderid-summer-outfits .formWrapper .col .formElements .formElement .formItem { width: 100%; margin: 0 15px 20px 15px; } .folderid-summer-outfits .formWrapper .col .formElements .formElement .formItem:first-child { margin-left: 0; } .folderid-summer-outfits .formWrapper .col .formElements .formElement .formItem:last-child { margin-right: 0; } .folderid-summer-outfits .formWrapper .col .formElements .formElement .formItem label { text-align: initial; margin-bottom: 3px; float: none; } .folderid-summer-outfits .formWrapper .col .formElements .formElement .formItem .sbHolder { height: 40px; } .folderid-summer-outfits .formWrapper .col .formElements .formElement .formItem .sbHolder .sbSelector { height: 40px; line-height: 40px; } .folderid-summer-outfits .formWrapper .col .formElements .formElement span.error[generated="true"] { display: inline-block; margin: 5px 0 0; position: relative; padding: 10px; } .folderid-summer-outfits .formWrapper .col .formElements .formElement span.error[generated="true"]:after { content: ""; position: absolute; border: 10px solid transparent; width: 0; height: 0; } .folderid-summer-outfits .formWrapper .col .formElements .formElement span.error[generated="true"]:after { left: 10px; top: -19px; border-left-color: transparent; border-bottom-color: #c9455d; } .folderid-summer-outfits .formWrapper .col .formElements .formElement .textAreaWrapper { width: 100%; height: 125px; position: relative; clear: both; } .folderid-summer-outfits .formWrapper .col .formElements .formElement textarea { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #dedede; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .folderid-summer-outfits .formWrapper .col .formElements .formElement .checkBox { display: flex; flex-direction: column; align-items: flex-start; } .folderid-summer-outfits .formWrapper .col .formElements .formElement .checkBox label, .folderid-summer-outfits .formWrapper .col .formElements .formElement .checkBox .label { display: inline-block; font-weight: normal; cursor: pointer; position: relative; text-align: left; padding: 0; margin-bottom: 0; } .folderid-summer-outfits .formWrapper .col .formElements .formElement .checkBox label .labelHolder.chckBx { display: inline-block; margin-left: 40px; } .folderid-summer-outfits .formWrapper .col .formElements .formElement .checkBox .checkBoxHolder { width: 25px; height: 25px; cursor: pointer; display: inline-block; background-color: #f2f2f2; position: absolute; top: 9px; left: 0; margin-right: 10px; -ms-transform: translatey(5px); -webkit-transform: translatey(5px); -moz-transform: translatey(5px); -o-transform: translatey(5px); transform: translatey(5px); } .folderid-summer-outfits .formWrapper .col .formElements .formElement .checkBox .checkBoxHolder:after { content: ""; position: absolute; display: none; } .folderid-summer-outfits .formWrapper .col .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); } .folderid-summer-outfits .formWrapper .col .formElements .formElement .checkBox input[type="checkbox"] { display: none; } .folderid-summer-outfits .formWrapper .col .formElements .formElement .checkBox input:checked ~ .checkBoxHolder { background-color: #000; } .folderid-summer-outfits .formWrapper .col .formElements .formElement .checkBox input:checked ~ .checkBoxHolder:after { display: block; } .folderid-summer-outfits .formWrapper .col .formElements button.cta { border: 0; padding: 15px 26px; margin-top: 10px; background-color: #60AD99; color: #fff; text-transform: uppercase; font-size: 14px; line-height: 1.2em; font-friends: 'Futura PT W01 Heavy', arial, sans-serif; text-decoration: none; transition: all ease .3s; -moz-transition: all ease .3s; -webkit-transition: all ease .3s; display: inline-block; text-align: center; cursor: pointer; } .folderid-summer-outfits .socialChannels { margin: 0 auto; max-width: 860px; display: flex; flex-direction: row; align-items: center; justify-content: center; } .folderid-summer-outfits .socialChannels .socialChannel { width: 100%; margin: 0 10px; } .folderid-summer-outfits .socialChannels .socialChannel:nth-child(1) { margin-left: 0; } .folderid-summer-outfits .socialChannels .socialChannel:nth-child(3) { margin-right: 0; } .folderid-summer-outfits .content .crossSellCategories { margin: 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: center; } .folderid-summer-outfits .content .crossSellCategories .crossSellCategory { width: 100%; margin: 0 10px; } .folderid-summer-outfits .content .crossSellCategories .crossSellCategory:nth-child(1) { margin-left: 0; } .folderid-summer-outfits .content .crossSellCategories .crossSellCategory:nth-child(4) { margin-right: 0; } .folderid-summer-outfits .content .crossSellCategories .crossSellCategory .imageMap {} .folderid-summer-outfits .content .crossSellCategories .crossSellCategory .imageMap .imgHolder { padding-top: 100%; } .folderid-summer-outfits .content .crossSellCategories .crossSellCategory:nth-child(1) .imageMap .imgHolder { background-image: url('../Landing pages/_promotions/2020_HL06/LP_HL06_BLOOMON_WINACTIE_CROSS_MEN.jpg'); } .folderid-summer-outfits .content .crossSellCategories .crossSellCategory:nth-child(2) .imageMap .imgHolder { background-image: url('../Landing pages/_promotions/2020_HL06/LP_HL06_BLOOMON_WINACTIE_CROSS_WOMEN.jpg'); } .folderid-summer-outfits .content .crossSellCategories .crossSellCategory:nth-child(3) .imageMap .imgHolder { background-image: url('../Landing pages/_promotions/2020_HL06/LP_HL06_BLOOMON_WINACTIE_CROSS_BOYS.jpg'); } .folderid-summer-outfits .content .crossSellCategories .crossSellCategory:nth-child(4) .imageMap .imgHolder { background-image: url('../Landing pages/_promotions/2020_HL06/LP_HL06_BLOOMON_WINACTIE_CROSS_GIRLS.jpg'); } @media only screen and (max-width: 850px){ .folderid-summer-outfits .account-maincont .col-container { flex-direction: column; } .folderid-summer-outfits .account-maincont .col-container .col-1, .folderid-summer-outfits .account-maincont .col-container .col-2 { width: 100%; } .folderid-summer-outfits .account-maincont .col-container .col-1 { margin: 0 0 30px 0; } .folderid-summer-outfits .account-maincont .col-container .col-2 { margin: 0 0 30px 0; } .folderid-summer-outfits #acc-login-page .col-1, .folderid-summer-outfits #acc-login-page .col-2 { border: 0; padding: 0; width: calc(100% - 40px); margin: 0 auto; } .folderid-summer-outfits #acc-login-page .col-2 { margin-top: 20px; } .folderid-summer-outfits #acc-login-page .col-1 p.heading, .folderid-summer-outfits #acc-login-page .col-2 p.heading { padding: 0 40px; position: relative; } .folderid-summer-outfits #acc-login-page .col-1 p.bodycopy, .folderid-summer-outfits #acc-login-page .col-2 p.bodycopy { text-align: center; } .folderid-summer-outfits .formWrapper { flex-direction: column; } .folderid-summer-outfits .formWrapper .col { width: 100%; } .folderid-summer-outfits .formWrapper .col .formElements .formElement { flex-direction: column; } .folderid-summer-outfits .formWrapper .col .formElements .formElement .formItem { margin: 0 5px 20px 5px; } .folderid-summer-outfits .formWrapper .col .formElements .formElement .checkBox { align-items: flex-start; } .folderid-summer-outfits .socialChannels { flex-direction: row; flex-wrap: wrap; } .folderid-summer-outfits .socialChannels .socialChannel:nth-child(1) { width: calc(33.33% - 6.5px); max-width: 248px; margin: 0 6.5px 0 0; } .folderid-summer-outfits .socialChannels .socialChannel:nth-child(2) { width: calc(33.33% - 6.5px); max-width: 248px; margin: 0 3.25px 0 3.25px; } .folderid-summer-outfits .socialChannels .socialChannel:nth-child(3) { width: calc(33.33% - 6.5px); max-width: 248px; margin: 0 0 0 6.5px; } .folderid-summer-outfits .content .crossSellCategories { flex-direction: row; flex-wrap: wrap; } .folderid-summer-outfits .content .crossSellCategories .crossSellCategory { width: calc(50% - 20px); max-width: 248px; } .folderid-summer-outfits .content .crossSellCategories .crossSellCategory:nth-child(1) { margin: 0 10px 10px 0;} .folderid-summer-outfits .content .crossSellCategories .crossSellCategory:nth-child(2) { margin: 0 0 10px 10px; } .folderid-summer-outfits .content .crossSellCategories .crossSellCategory:nth-child(3) { margin: 10px 10px 0 0; } .folderid-summer-outfits .content .crossSellCategories .crossSellCategory:nth-child(4) { margin: 10px 0 0 10px; } } /******************************/ /* 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. */ .folderid-we-friends {} .folderid-we-friends .account-maincont { padding: 20px 0; } .folderid-we-friends .account-maincont .col-container { display: flex; flex-direction: row; margin: 0 auto; } .folderid-we-friends .account-maincont .col-container .col-1, .folderid-we-friends .account-maincont .col-container .col-2 { width: calc(50% - 30px); } .folderid-we-friends .account-maincont .col-container .col-1 { margin: 0 10px 0 20px; position: relative; } .folderid-we-friends .account-maincont .col-container .col-2 { margin: 0 20px 0 10px; } .folderid-we-friends .weAndFriendsFormWrapper { position: relative; } .folderid-we-friends .weAndFriendsFormWrapper .weAndFriendsFormWrapperLoader { 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; } .folderid-we-friends .grid-row { float: none; } .folderid-we-friends .resultImgWrapper { padding: 0 20px; } .folderid-we-friends .resultImgWrapper .resultImg { max-width: 100%; margin: 0 auto; display: block; } .folderid-we-friends #primary .content { max-width: 1200px; padding: 0 40px; margin: 0 auto; } .folderid-we-friends .content h4.heading.brown { color: #D99353; } .folderid-we-friends .content p.bodycopy span.label { background-color: #D8E6E7; color: #000; } .folderid-we-friends .weAndFriendsDetails { background-color: #FAEFDA; padding: 60px 0; margin-top: 20px; } .folderid-we-friends .weAndFriendsDetails .content h4.heading { margin-top: 0; } .folderid-we-friends .weAndFriendsDetails .content .listItem { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; background-color: #000; border-radius: 50%; color: #fff; margin: 0 auto; font-size: 16px; font-friends: "Futura PT W01 Heavy", arial, sans-serif; } .folderid-we-friends #acc-login-page .col-1, .folderid-we-friends #acc-login-page .col-2 { border: 0; padding: 0; width: 50%; } .folderid-we-friends #acc-login-page .col-1 p.heading, .folderid-we-friends #acc-login-page .col-2 p.heading { text-align: center; } .folderid-we-friends #acc-login-page .col-1 .col-1-content, .folderid-we-friends #acc-login-page .col-2 .col-2-content { border: 1px solid #ddd; padding: 26px 20px; height: 100%; } .folderid-we-friends .formWrapper { max-width: 1200px; padding: 0 40px; margin: 0 auto; display: flex; flex-direction: row; } .folderid-we-friends .formWrapper .col { width: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; } .folderid-we-friends .formWrapper .col .formElements { display: flex; flex-direction: column; justify-content: center; align-items: center; } .folderid-we-friends .formWrapper .col .formElements .formElement { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; } .folderid-we-friends .formWrapper .col .formElements .formElement .formItem { width: 100%; margin: 0 15px 20px 15px; } .folderid-we-friends .formWrapper .col .formElements .formElement .formItem:first-child { margin-left: 0; } .folderid-we-friends .formWrapper .col .formElements .formElement .formItem:last-child { margin-right: 0; } .folderid-we-friends .formWrapper .col .formElements .formElement .formItem label { text-align: initial; margin-bottom: 3px; } .folderid-we-friends .formWrapper .col .formElements .formElement span.error[generated="true"] { display: inline-block; margin: 5px 0 0; position: relative; padding: 10px; } .folderid-we-friends .formWrapper .col .formElements .formElement span.error[generated="true"]:after { content: ""; position: absolute; border: 10px solid transparent; width: 0; height: 0; } .folderid-we-friends .formWrapper .col .formElements .formElement span.error[generated="true"]:after { left: 10px; top: -19px; border-left-color: transparent; border-bottom-color: #c9455d; } .folderid-we-friends .formWrapper .col .formElements .formElement .textAreaWrapper { width: 100%; height: 125px; position: relative; clear: both; } .folderid-we-friends .formWrapper .col .formElements .formElement textarea { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #dedede; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .folderid-we-friends .formWrapper .col .formElements .formElement .checkBox { display: flex; flex-direction: column; align-items: flex-start; } .folderid-we-friends .formWrapper .col .formElements .formElement .checkBox label, .folderid-we-friends .formWrapper .col .formElements .formElement .checkBox .label { display: inline-block; font-weight: normal; cursor: pointer; position: relative; text-align: left; padding: 0; margin-bottom: 0; } .folderid-we-friends .formWrapper .col .formElements .formElement .checkBox label .labelHolder.chckBx { display: inline-block; margin-left: 40px; } .folderid-we-friends .formWrapper .col .formElements .formElement .checkBox .checkBoxHolder { width: 25px; height: 25px; cursor: pointer; display: inline-block; background-color: #f2f2f2; position: absolute; top: 9px; left: 0; margin-right: 10px; -ms-transform: translatey(5px); -webkit-transform: translatey(5px); -moz-transform: translatey(5px); -o-transform: translatey(5px); transform: translatey(5px); } .folderid-we-friends .formWrapper .col .formElements .formElement .checkBox .checkBoxHolder:after { content: ""; position: absolute; display: none; } .folderid-we-friends .formWrapper .col .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); } .folderid-we-friends .formWrapper .col .formElements .formElement .checkBox input[type="checkbox"] { display: none; } .folderid-we-friends .formWrapper .col .formElements .formElement .checkBox input:checked ~ .checkBoxHolder { background-color: #000; } .folderid-we-friends .formWrapper .col .formElements .formElement .checkBox input:checked ~ .checkBoxHolder:after { display: block; } .folderid-we-friends .formWrapper .col .formElements button.cta { border: 0; padding: 15px 26px; margin-top: 10px; background-color: #D99353; color: #fff; text-transform: uppercase; font-size: 14px; line-height: 1.2em; font-friends: 'Futura PT W01 Heavy', arial, sans-serif; text-decoration: none; transition: all ease .3s; -moz-transition: all ease .3s; -webkit-transition: all ease .3s; display: inline-block; text-align: center; cursor: pointer; } .folderid-we-friends .socialChannels { margin: 0 auto; max-width: 860px; display: flex; flex-direction: row; align-items: center; justify-content: center; } .folderid-we-friends .socialChannels .socialChannel { width: 100%; margin: 0 10px; } .folderid-we-friends .socialChannels .socialChannel:nth-child(1) { margin-left: 0; } .folderid-we-friends .socialChannels .socialChannel:nth-child(3) { margin-right: 0; } .folderid-we-friends .influencersWrapper {} .folderid-we-friends .influencersWrapper .influencers { display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; background-color: #f2f2f2; } .folderid-we-friends .influencersWrapper .influencers .influencer { width: 100%; max-width: 25%; } .folderid-we-friends .influencersWrapper .influencers .influencer .imgHolder { padding-top: 100%; } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(1) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/1.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(2) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/2.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(3) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/3.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(4) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/4.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(5) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/5.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(6) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/6.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(7) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/7.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(8) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/8.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(9) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/9.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(10) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/10.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(11) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/11.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(12) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/12.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(13) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/13.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(14) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/14.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(15) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/15.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(16) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/16.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(17) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/17.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(18) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/18.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(19) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/19.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(20) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/20.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(21) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/21.jpg'); } .folderid-we-friends .influencersWrapper .influencers .influencer:nth-child(22) .imgHolder { background-image: url('../Landing pages/_static/we-friends/2020_HL12/22.jpg'); } .folderid-we-friends .imageMap.wefashionman .areas .globalIcon, .folderid-we-friends .imageMap.wefashionstories .areas .globalIcon, .folderid-we-friends .imageMap.wefashionkids .areas .globalIcon { position: absolute; bottom: 0; right: 0; } .folderid-we-friends .imageMap.wefashionman .imgHolder { background-image: url('../Landing pages/_static/we-friends/2021_HL03/LP_WEFAMILY_02_A_BACKGROUND_EN.jpg'); padding-top: 100%; } .folderid-we-friends .imageMap.wefashionstories .imgHolder { background-image: url('../Landing pages/_static/we-friends/2021_HL03/LP_WEFAMILY_02_B_BACKGROUND_EN.jpg'); padding-top: 100%; } .folderid-we-friends .imageMap.wefashionkids .imgHolder { background-image: url('../Landing pages/_static/we-friends/2021_HL03/LP_WEFAMILY_02_C_BACKGROUND_EN.jpg'); padding-top: 100%; } .folderid-we-friends .content .crossSellCategories { margin: 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: center; } .folderid-we-friends .content .crossSellCategories .crossSellCategory { width: 100%; margin: 0 10px; } .folderid-we-friends .content .crossSellCategories .crossSellCategory:nth-child(1) { margin-left: 0; } .folderid-we-friends .content .crossSellCategories .crossSellCategory:nth-child(4) { margin-right: 0; } .folderid-we-friends .content .crossSellCategories .crossSellCategory .imageMap {} .folderid-we-friends .content .crossSellCategories .crossSellCategory .imageMap .imgHolder { padding-top: 100%; } .folderid-we-friends .content .crossSellCategories .crossSellCategory:nth-child(1) .imageMap .imgHolder { background-image: url('../Landing pages/_promotions/2020_HL06/LP_HL06_BLOOMON_WINACTIE_CROSS_MEN.jpg'); } .folderid-we-friends .content .crossSellCategories .crossSellCategory:nth-child(2) .imageMap .imgHolder { background-image: url('../Landing pages/_promotions/2020_HL06/LP_HL06_BLOOMON_WINACTIE_CROSS_WOMEN.jpg'); } .folderid-we-friends .content .crossSellCategories .crossSellCategory:nth-child(3) .imageMap .imgHolder { background-image: url('../Landing pages/_promotions/2020_HL06/LP_HL06_BLOOMON_WINACTIE_CROSS_BOYS.jpg'); } .folderid-we-friends .content .crossSellCategories .crossSellCategory:nth-child(4) .imageMap .imgHolder { background-image: url('../Landing pages/_promotions/2020_HL06/LP_HL06_BLOOMON_WINACTIE_CROSS_GIRLS.jpg'); } @media only screen and (max-width: 850px){ .folderid-we-friends .account-maincont .col-container { flex-direction: column; } .folderid-we-friends .account-maincont .col-container .col-1, .folderid-we-friends .account-maincont .col-container .col-2 { width: 100%; } .folderid-we-friends .account-maincont .col-container .col-1 { margin: 0 0 30px 0; } .folderid-we-friends .account-maincont .col-container .col-2 { margin: 0 0 30px 0; } .folderid-we-friends #acc-login-page .col-1, .folderid-we-friends #acc-login-page .col-2 { border: 0; padding: 0; width: calc(100% - 40px); margin: 0 auto; } .folderid-we-friends #acc-login-page .col-2 { margin-top: 20px; } .folderid-we-friends #acc-login-page .col-1 p.heading, .folderid-we-friends #acc-login-page .col-2 p.heading { padding: 0 40px; position: relative; } .folderid-we-friends #acc-login-page .col-1 p.bodycopy, .folderid-we-friends #acc-login-page .col-2 p.bodycopy { text-align: center; } .folderid-we-friends .formWrapper { flex-direction: column; } .folderid-we-friends .formWrapper .col { width: 100%; } .folderid-we-friends .formWrapper .col .formElements .formElement .formItem { margin: 0 5px 20px 5px; } .folderid-we-friends .formWrapper .col .formElements .formElement .checkBox { align-items: flex-start; } .folderid-we-friends .socialChannels { flex-direction: row; flex-wrap: wrap; } .folderid-we-friends .socialChannels .socialChannel:nth-child(1) { width: calc(33.33% - 6.5px); max-width: 248px; margin: 0 6.5px 0 0; } .folderid-we-friends .socialChannels .socialChannel:nth-child(2) { width: calc(33.33% - 6.5px); max-width: 248px; margin: 0 3.25px 0 3.25px; } .folderid-we-friends .socialChannels .socialChannel:nth-child(3) { width: calc(33.33% - 6.5px); max-width: 248px; margin: 0 0 0 6.5px; } .folderid-we-friends .influencersWrapper .influencers .influencer { max-width: 50%; } .folderid-we-friends .content .crossSellCategories { flex-direction: row; flex-wrap: wrap; } .folderid-we-friends .content .crossSellCategories .crossSellCategory { width: calc(50% - 20px); max-width: 248px; } .folderid-we-friends .content .crossSellCategories .crossSellCategory:nth-child(1) { margin: 0 10px 10px 0;} .folderid-we-friends .content .crossSellCategories .crossSellCategory:nth-child(2) { margin: 0 0 10px 10px; } .folderid-we-friends .content .crossSellCategories .crossSellCategory:nth-child(3) { margin: 10px 10px 0 0; } .folderid-we-friends .content .crossSellCategories .crossSellCategory:nth-child(4) { margin: 10px 0 0 10px; } } /************************************************************************* 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; } /*****************************************/ /* display registered/recognized content */ /*****************************************/ [data-display-registered="false"] { display: none; } [data-display-registered="true"] { display: block; } [data-display-recognized="false"] { display: none; } [data-display-recognized="true"] { display: block; } [data-display-unregistered="false"] { display: none; } [data-display-unregistered="true"] { display: block; } /************/ /* username */ /************/ /* Added at 24.09.19. */ [data-username] { display: none; } /**********************/ /* hide from category */ /**********************/ /* Added at 26.11.19. Created to hide clickable sticker which is shown on multiple categories. */ .page-category-minime_girls [data-hide-from-category="minime_girls"] { display: none; } /************************************************************************* 12.0 Hotfixes *************************************************************************/ /*********************************************************/ /* koppelverkoop pricing on recommendation product tiles */ /*********************************************************/ /* Added at 01.12.20. */ .lang-nl_be .product-reco-container .product-tile[data-ecommerce*='"dimension9":"sale"'] .product-pricing .price-standard, .lang-fr_be .product-reco-container .product-tile[data-ecommerce*='"dimension9":"sale"'] .product-pricing .price-standard { color: #000; margin-right: 5px; text-decoration: none; } .lang-nl_be .product-reco-container .product-tile[data-ecommerce*='"dimension9":"sale"'] .product-pricing .price-standard::after, .lang-fr_be .product-reco-container .product-tile[data-ecommerce*='"dimension9":"sale"'] .product-pricing .price-standard::after { content: '/'; margin-left: 5px; } .lang-nl_be .product-reco-container .product-tile[data-ecommerce*='"dimension9":"sale"'] .product-pricing .price-sales.red, .lang-fr_be .product-reco-container .product-tile[data-ecommerce*='"dimension9":"sale"'] .product-pricing .price-sales.red { color: #ff0000; } .lang-fr_fr .product-reco-container .product-tile[data-ecommerce*='"dimension9":"sale"'] .product-pricing .price-standard { color: #000; margin-right: 5px; text-decoration: none; } .lang-fr_fr .product-reco-container .product-tile[data-ecommerce*='"dimension9":"sale"'] .product-pricing .price-standard::after { content: '/'; margin-left: 5px; } .lang-fr_fr .product-reco-container .product-tile[data-ecommerce*='"dimension9":"sale"'] .product-pricing .price-sales.red { color: #ff0000; } /*********************************/ /* force secondary banner margin */ /*********************************/ /* Added at 03.10.16. Added margin to the left on desktop to adjust it to the content above. */ /* Edited at 28.05.21. Updated margin. */ @media only screen and (min-width: 850px) { .secondary-banner-bottom { margin: 0 0 50px 230px; } } /***********************/ /* certona adjustments */ /***********************/ /* Added at 24.05.17. */ /* Edited at 02.03.18. */ /* Edited at 13.09.19. Remove workaround to hide swatches. This was removed after a redesign. Added margin to H3. */ /* Edited at 16.09.19. Hide H3, display old H2, but restyled. Removed padding of container on homepage. */ /* Edited at 30.09.19. Fixed some float bugs. */ /* Edited at 25.02.21. Updated floats. */ .page-home h2#crosssell-section-header, .page-category-11 .pt_product-search-result #primary h2#crosssell-section-header, .page-category-12 .pt_product-search-result #primary h2#crosssell-section-header, .page-category-00 .pt_product-search-result #primary h2#crosssell-section-header { text-align: center; text-transform: uppercase; font-family: 'Futura PT W01 Heavy', arial, sans-serif; font-size: 24px; margin: 1em 0; } .page-category-11 .pt_product-search-result #primary h2#crosssell-section-header, .page-category-12 .pt_product-search-result #primary h2#crosssell-section-header, .page-category-00 .pt_product-search-result #primary h2#crosssell-section-header, .page-category-11 #recommendations, .page-category-12 #recommendations, .page-category-00 #recommendations { float: left; width: 100%; } .page-category-11 #recommendations .product-reco-slider, .page-category-12 #recommendations .product-reco-slider, .page-category-00 #recommendations .product-reco-slider { margin: 0px; } #recommendations h3.pdp-subtitles { display: none; } @media only screen and (max-width: 850px) { .page-home h2#crosssell-section-header, .page-category-11 .pt_product-search-result #primary h2#crosssell-section-header, .page-category-12 .pt_product-search-result #primary h2#crosssell-section-header, .page-category-00 .pt_product-search-result #primary h2#crosssell-section-header { font-size: 22px; } } /*******************************/ /* cookie wall pros/cons icons */ /*******************************/ /* Added at 18.06.18. */ #s2m_cookies_optin_settings_dialog_content .s2m_cookies_optin_settings_dialog_more_details .col ul.s2m_cookies_optin_settings_dialog_more_details_list_only li:before { content: url("../icons/s2m/unblock.png") !important; } #s2m_cookies_optin_settings_dialog_content .s2m_cookies_optin_settings_dialog_more_details .col ul.s2m_cookies_optin_settings_dialog_more_details_list_no li:before { content: url("../icons/s2m/block.gif") !important; } /****************************/ /* hide search icon from LU */ /****************************/ /* Added at 08.08.18. */ .lang-fr_lu #searchPanel { display: none; } /*****************************/ /* fixes on product set page */ /*****************************/ /* Added at 14.02.19. */ /* Edited at 29.07.19. Added styling for promo set page. */ /* Edited at 30.07.19. Added specific product set styles. */ /* Edited at 15.02.21. Removed some styling. */ /* Edited at 25.05.21. Fixed thumb img link for pdp only. */ @media only screen and (min-width: 1024px) { .lang-de_ch .product-col-2.product-set .product-add-to-cart:not(.block-add-to-cart) .product-set-total-price .subtotal, .lang-de_ch .product-col-2.product-set .product-add-to-cart:not(.block-add-to-cart) .product-set-total-price .subtotal-value, .lang-de_de .product-col-2.product-set .product-add-to-cart:not(.block-add-to-cart) .product-set-total-price .subtotal, .lang-de_de .product-col-2.product-set .product-add-to-cart:not(.block-add-to-cart) .product-set-total-price .subtotal-value, .lang-de_at .product-col-2.product-set .product-add-to-cart:not(.block-add-to-cart) .product-set-total-price .subtotal, .lang-de_at .product-col-2.product-set .product-add-to-cart:not(.block-add-to-cart) .product-set-total-price .subtotal-value { font-size: 15px; } .lang-de_ch .product-col-2.product-set .product-add-to-cart:not(.block-add-to-cart) .product-set-total-price em, .lang-de_de .product-col-2.product-set .product-add-to-cart:not(.block-add-to-cart) .product-set-total-price em, .lang-de_at .product-col-2.product-set .product-add-to-cart:not(.block-add-to-cart) .product-set-total-price em { display: none; } } .page-pdp .thumb-link { width: 100%; padding-top: calc((3/2) * 100%); } .page-pdp .thumb-link img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } /* promo set page */ .product-set-total-price .product-price { display: flex; align-items: flex-start; flex-wrap: wrap; width: 100%; } .product-set-total-price .product-price span { display: none; width: 50%; } .product-set-total-price .product-price span:nth-child(odd) { text-align: left; } .product-set-total-price .product-price span:nth-child(even) { text-align: right; } .product-set-total-price .product-price span.subtotal, .product-set-total-price .product-price span.subtotal-value, .product-set-total-price .product-price span.korting-msg, .product-set-total-price .product-price span.korting-value { font-size: 15px; } .product-set-total-price .product-price span.korting-msg, .product-set-total-price .product-price span.korting-value { color: #ff690c; } .product-set-total-price .product-price span.subtotal, .product-set-total-price .product-price span.subtotal-value, .product-set-total-price .product-price span.korting-msg, .product-set-total-price .product-price span.korting-value, .product-set-total-price .product-price span.total, .product-set-total-price .product-price span.value { padding: 5px 0; } /***********************************************/ /* fix sticker on two columned products on plp */ /***********************************************/ /* Added at 25.04.19. */ .grid-tile:not(.product-reco-slide).--half .image-holder img.promotion { width: auto; height: auto; } /**************************************/ /* fix positioning back to top button */ /**************************************/ /* Added at 08.05.19. */ a.totop.lister { z-index: 1; } /*********************************************/ /* remove unneccessary whitespacing on pages */ /*********************************************/ /* Note: Added at 08.05.19. */ .bottom-search-slot { margin-bottom: 0; } /***************************************/ /* add margin to fb button in checkout */ /***************************************/ /* Note: Added at 02.08.15. Last edited at 02.08.15. */ @media only screen and (max-width : 850px) { .start-account-form .fb-btns-login .facebook-holder { clear: both; } } /****************************************/ /* coloured shipping method pricelabels */ /****************************************/ /* Added at 30.03.18. Related to 'vwo.colouredShippingMethodPrices.setup();'. */ .page-cart .cart-footer .transportation-options label .shipmethodprice.free_of_charge, .page-cart .cart-footer .cart-order .order-totals-table td.price-font.free_of_charge, .page-cart .cart-footer .cart-order .order-top-table td.price-font.free_of_charge { color: #30C91F !important; font-weight: bold; } /************************************/ /* change colour add-to-cart button */ /************************************/ /* Added at 24.06.19. */ /* Edited at 17.09.20. Added productset. */ .page-pdp #add-to-cart.pdp-btn, .page-pdp #add-all-to-cart.pdp-btn { background-color: #00BF48; } .page-pdp #add-to-cart.pdp-btn:hover, .page-pdp #add-all-to-cart.pdp-btn:hover { background-image: linear-gradient(#00D852,#00BF48); } /*************************************/ /* change favorites icon in top menu */ /*************************************/ /* Added at 29.07.19. Disabled at 03.08.19. */ /*.header .m-icon a.icon.favourites:before { background-image: url('../icons/2019_HL08/pride_heart.svg'); background-position: 0 0; } */ /****************************/ /* mobile menu improvements */ /***************************/ /* Added at 10.09.19. */ /* Edited at 31.12.19. Added fixes for resolutions till 320px. */ /* Edited at 11.06.20. Added fix to fit menu items. */ @media only screen and (max-width: 850px){ .navigation { background: transparent; padding-right: 50px; } .navigation .navigation-container { background: #fff; -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.6); -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.6); box-shadow: 0 0 5px 0 rgba(0,0,0,0.6); } } @media only screen and (max-width: 420px){ ul#mobileMenuMainCategories li a { padding: 15px 3px; } } @media only screen and (max-width: 320px){ .navigation { padding-right: 20px; } } /*******************/ /* sidepanel width */ /*******************/ /* Added at 12.09.19. */ /* Edited at 09.02.21. Fixed overlay for shop the look. */ .overlay.expanded { -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.6); -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.6); box-shadow: 0 0 5px 0 rgba(0,0,0,0.6); } @media only screen and (max-width: 850px){ .overlay.expanded { width: calc(100% - 50px); } } /*******************************/ /* hide sentinel from carousel */ /*******************************/ /* Added at 27.09.19. */ [data-cycle-fx="carousel"] .cycle-sentinel { opacity: 0 !important; } [data-cycle-fx="carousel"] .cycle-sentinel:not(:first-child) { display: none !important; } /*******************************/ /* more info adjustments */ /*******************************/ /* Added at 02.10.19. */ .product-set-details-col .more-info { position: relative; margin: 20px 12px 0 0; text-align: right; } .product-set-details-col .more-info:after { content: ""; position: absolute; top: 4px; right: -10px; border: 4px solid transparent; border-top: 4px solid #000; border-right: 4px solid #000; transform: rotate(45deg); } @media only screen and (max-width: 850px){ .product-set-details-col .more-info { text-align: center; } .product-set-details-col .more-info:after { position: static; top: 0; right: 0; display: inline-block; margin-left: 3px; } } /*******************************************/ /* adjust load more products button on plp */ /*******************************************/ /* Added at 10.10.19. */ /* Edited at 06.11.19. Updated colour as a result of an AB test. */ /* Edited at 04.08.20. Added more margin below button on desktop. */ .load-wrapper { width: 100%; max-width: 423px; } .load-wrapper a.load-more-button.black { color: #fff; background-color: #008000; border: 0; width: 100%; height: auto; padding: 20px; font-size: 15px; } .load-wrapper a.load-more-button.black:hover { color: #fff; background-color: #009D00; } @media only screen and (min-width: 850px){ .load-wrapper { margin-bottom: 120px; } } /*******************************************************/ /* fix margin sizechart link on customized sweater pdp */ /*******************************************************/ /* Added at 17.10.19. */ @media only screen and (max-width: 850px){ .page-pdp .pdp-personalized-block { margin-top: 25px; } } /***********************************/ /* remove storelocator from header */ /***********************************/ /* Added at 04.11.19. */ .lang-fr_fr .header .top-nav.menu-utility li.stores.icon, .lang-de_at .header .top-nav.menu-utility li.stores.icon { display: none; } /************************************/ /* remove store check link from pdp */ /************************************/ /* Added at 04.11.19. */ .lang-fr_fr.page-pdp .pdp-info-wrapper .pdp-addToCart-fixed .stock-check, .lang-de_at.page-pdp .pdp-info-wrapper .pdp-addToCart-fixed .stock-check { display: none; } /*******************************************/ /* remove grey background on register page */ /*******************************************/ /* Added at 27.11.19. */ @media only screen and (min-width: 851px) { .account-form-slot-content { background: none; } } /******************************/ /* make minicart button green */ /******************************/ /* Added at 09.12.19. */ .mini-cart-totals a.mini-cart-link-cart { background-color: #00BF48; } .mini-cart-totals a.mini-cart-link-cart:hover { background-image: linear-gradient(#00D852,#00BF48); } /************************/ /* fix meganav dropdown */ /************************/ /* Added at 09.12.19. */ .mega-nav-dropdown { position: absolute; } /*****************************************/ /* remove sticky usp content slot on pdp */ /*****************************************/ /* Added at 10.12.19. */ .pdp-usp-sticky.no-desktop { display: none; } /**************************************/ /* adjust z-index of sidepanel on PDP */ /**************************************/ /* Added at 10.12.19. Adjusted z-index of sidepanel on PDP to overrule sticky add to cart module. */ .page-pdp .overlay { z-index: 1002; } /*******************************************/ /* make hero products full width on tablet */ /*******************************************/ /* Added at 13.12.19. */ @media only screen and (max-width: 1024px) { body[class*="page-category-"] .hero-tile { width: 99.2% !important; } } /****************************************/ /* display icon on active filter button */ /****************************************/ /* Added at 14.01.20. */ @media only screen and (max-width: 850px) { .btn-filter.js-filters-button.btn-filter-open:after { background-position: -416px -297px; } } /********************************************/ /* fix sticker position on product set page */ /********************************************/ /* Added at 16.01.20. */ .page-pdp .product-set-item .ps-price-promotion { flex-wrap: wrap; } @media only screen and (min-width: 850px) { .page-pdp .product-set-item .ps-price-promotion .promotion { margin-top: 20px; } } /************************************************/ /* hide content slot content from PDP sidepanel */ /************************************************/ /* Added at 24.03.20. */ .overlay .grid-row { display: none; } /*********************************************/ /* add margin to online stock message on PDP */ /*********************************************/ /* Added at 01.04.20. */ .pdp-info-wrapper .availability-msg .in-stock-msg { margin-top: .75em; } /**********************************/ /* fix slot tile alignment on PLP */ /**********************************/ /* Added at 02.04.20. */ .pt_product-search-result .search-result-items li.slot-tile { overflow: visible; margin-left: 0; } .pt_product-search-result .search-result-items li.slot-tile > .grid-row.grid-3 { float: none; } /********************************/ /* country selector positioning */ /********************************/ /* Added at 20.07.20. */ #countryDisplay { position: fixed; margin: 0; width: 90%; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid #000; border-radius: 10px; } /************************************************/ /* make certona carousel two columned on mobile */ /************************************************/ /* Added at 28.07.20. */ @media only screen and (max-width : 850px){ #recommendations .product-reco-slider { padding-left: 0; padding-right: 0; } #recommendations .product-reco-slider .product-reco-slide { width: 44.25% !important; } #recommendations .product-reco-slider .product-reco-slide .product-price { font-family: "Futura PT W01 Medium"; } #recommendations .product-reco-slider .product-reco-slide .product-price { font-size: 12px; } } /********************************************************************/ /* remove header from highlighted products from home and main pages */ /********************************************************************/ /* Added at 18.08.20. */ /* Edited at 17.06.21. Added main sale. */ .page-home #category-recommendations .product-reco-slider, .page-category-11 #category-recommendations .product-reco-slider, .page-category-12 #category-recommendations .product-reco-slider, .page-category-00 #category-recommendations .product-reco-slider { margin-top: 0; } .page-home #category-recommendations .product-reco-slider .pdp-subtitles, .page-category-11 #category-recommendations .product-reco-slider .pdp-subtitles, .page-category-12 #category-recommendations .product-reco-slider .pdp-subtitles, .page-category-00 #category-recommendations .product-reco-slider .pdp-subtitles, .page-category-sale #category-recommendations .product-reco-slider .pdp-subtitles { display: none; } /********************/ /* cart pages fixes */ /********************/ /* Added at 03.09.20. */ @media only screen and (max-width : 850px){ .page-cart h1.cart-title { width: 100%; text-align: center; margin: 20px auto 0; } .page-cart .pt_cart .top-basket-container { margin: 0 20px 0 20px; } .page-cart .pt_cart .item-list { margin-bottom: 0; } } /***********************************/ /* fix position of stickers on PDP */ /***********************************/ /* Added at 15.09.20. */ @media only screen and (max-width: 850px) { .pdp-addToCart__mobile .pdp-main-subtitle .promotion { width: 100%; } .pdp-addToCart .promotion .content-asset { position: absolute; bottom: -20px; right: 0; width: 100%; max-width: 167px; } } /******************************************************/ /* remove margin on delivery option text on cart page */ /******************************************************/ /* Added at 07.12.20. */ .cart-footer .transportation-options p { margin: 0; } /********************************************************/ /* fix layout of sidepanel in favour of variantSelector */ /********************************************************/ /* Added at 15.01.21. */ @media only screen and (max-width: 850px) { .pdp-quick-overlay .product-variations { flex-wrap: wrap; } .pdp-quick-overlay .variant-attribute:first-child { width: calc(50% - 5px); } .pdp-quick-overlay .variant-attribute:last-child { width: calc(50% - 5px); } .pdp-quick-overlay .variant-attribute:last-child { width: calc(50% - 5px); } .pdp-quick-overlay .variant-attribute.variantSelectorImagesWrapper ~ .variant-attribute:last-child { width: 100%; margin-left: 0; } } /*************************************/ /* hide countries from store locator */ /*************************************/ /* Added at 09.03.21. */ .select-country .sbOptions li a[rel="LU"], .select-country .sbOptions li a[rel="FR"], .select-country .sbOptions li a[rel="AT"] { display: none; } /********************************************/ /* remove uppercase styling from navigation */ /********************************************/ /* Added at 09.03.21. Need to be AB tested first. */ /* meganav, lhn, mobile */ /* .mega-nav-dropdown .jsMegaNav tr td ul li:not(.jsMegaNavSubtitle) > a, .mega-nav-dropdown .jsMegaNav tr td ul li:not(.jsMegaNavSubtitle) > a:hover { text-transform: none; font-size: 14px; letter-spacing: 0.08em; } .refinement * { text-transform: none; font-size: 14px; letter-spacing: normal; } .refinement a { font-size: 14px; } @media only screen and (max-width: 850px){ .menu-category li a { text-transform: none; letter-spacing: 0.08em; height: 45px; font-size: 16px; } } */ /*****************************************************/ /* display product images in return portal on mobile */ /*****************************************************/ /* Added at 08.06.21. Need to be fixed by Emakina. Not final yet! */ @media only screen and (max-width: 850px) { .return-portal ul.order-details-items > li { position: relative; } .return-portal ul.order-details-items > li .details { padding-right: 70px; } .return-portal ul.order-details-items > li table tr td.mobile-hidden { display: block !important; } .return-portal ul.order-details-items > li table tr td.mobile-hidden .product-image { position: absolute; top: 0; right: 20px; width: 12%; max-width: 54px; height: auto; margin: 0; padding-right: 0; } .return-portal ul.order-details-items > li table tr td.mobile-hidden .product-image img { width: 100%; height: auto; } }