/** 2015 (c) WE Fashion These styles are written for the WE Fashion website **/ /** INDEX 01. GLOBAL STYLES - 02. NAVIGATION 03. SLIDE OUT 04. ACCOUNT PAGES - 05. HOME PAGE 06. CATEGORY MAIN PAGES 07. PRODUCT LIST PAGES (PLP) 08. PRODUCT DETAIL PAGES (PDP) - 09. CHECKOUT 10. INSPIRATION PAGES 11. STATIC CONTENT - 12. GLOBAL PERSISTANT 13. GLOBAL HOTFIXES - 14. VWO CHANGES - 15. PAGE SPECIFIC HOTFIXES **/ /* ----------------------------------------------------------------*********************---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 01. GLOBAL STYLES *---------------------------------------------------------------- */ /* ----------------------------------------------------------------*********************---------------------------------------------------------------- */ /**********/ /* global */ /**********/ .hidden { display: none; } .shown { display: initial; } .invisible { visibility: hidden; } .visible { visibility: visible; } /****************************/ /* schedule elements script */ /****************************/ [data-start-date]{ display: none; } /*****************/ /* maximum width */ /*****************/ .viewPort { max-width: 1600px; margin: 0 auto; } .viewPortStatic { max-width: 1400px; margin: 0 auto; } /*******************/ /* cycle slideshow */ /*******************/ /* global */ .cycle-slideshow { width: 100%; margin: 0 auto; transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0,0,0); } /* navigation */ .cycle-slideshow .cycle-nav { position: absolute; top: 50%; margin-top: -19px; 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; } .cycle-slideshow:hover .cycle-nav { opacity: 1; filter:alpha(opacity=100); } .cycle-slideshow .cycle-prev { left: 0px; background: transparent url(../icons/sprite-left-right-nav.png?$staticlink$) 0px 0px no-repeat; } .cycle-slideshow .cycle-prev:hover { background: #fff url(../icons/sprite-left-right-nav-hover.png?$staticlink$) 0px 0px no-repeat; } .cycle-slideshow .cycle-next { right: 0px; background: transparent url(../icons/sprite-left-right-nav.png?$staticlink$) -38px 0px no-repeat; } .cycle-slideshow .cycle-next:hover { background: #fff url(../icons/sprite-left-right-nav-hover.png?$staticlink$) -38px 0px no-repeat; } /* pager */ .cycle-slideshow .cycle-custom-pager { position: absolute; bottom: 1.5%; left: 0px; width: 100%; z-index: 150; text-align: center; } .cycle-slideshow .cycle-custom-pager .dot-container { padding: 9px 0px 5px 0px; width: 25px; display: inline-block; cursor: pointer; } .cycle-slideshow .cycle-custom-pager .dot-container .dot { background: none; border: 1px solid #fff; opacity: 1; filter: alpha(opacity=100); 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 .dot-container:hover .dot { background: #fff; opacity: 1.0; filter: alpha(opacity=100); } .cycle-slideshow .cycle-custom-pager .cycle-pager-active .dot { background: #fff; opacity: 1.0; filter: alpha(opacity=100); } /* overlay */ .cycle-slideshow-overlay { position: absolute; width: 100%; top: 0; left: 0; z-index: 120; } .cycle-slideshow-overlay img { width: 100%; max-width: 100%; } /******************/ /* Sidebar-iframe */ /******************/ .sidebar-iframe-loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: url(../icons/fitguide-loader.gif) center center no-repeat rgba(255, 255, 255, 0.9); transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0,0,0); } .sidebar-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 2; background: #fff; } /*********/ /* Popup */ /*********/ .popupNotificationContent { position: absolute; top: 0; left: -999999; display: none; } .popupNotificationWrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 999; cursor: pointer; overflow: hidden; } .popupNotificationWrapper .popupNotificationContainer { position: absolute; max-width: 100%; cursor: initial; } .popupNotificationWrapper .popupNotificationContainer .popupNotification { background: #fff; } .popupNotificationWrapper .popupNotificationContainer .popupNotificationClose { position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; background: url('../icons/close.png?$staticlink$') no-repeat 8px 7px; cursor: pointer; } @media only screen and (max-width : 850px){ .popupNotificationWrapper .popupNotificationContainer .popupNotification { margin: 0 30px; } .popupNotificationWrapper .popupNotificationContainer .popupNotificationClose { top: 0; right: 0; background: url('../icons/close_invert.png?$staticlink$') no-repeat 8px 7px; } } /***********************/ /* Bannerrow slideshow */ /***********************/ .bannerrow { position: relative; width: 100%; margin: 0 auto; } /* 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: 'Gotham SSm A','Gotham SSm B',arial,sans-serif; margin: 0; padding: 0.7em; font-size: 1.2em; letter-spacing: 0; } /* black */ .bannerrow-slideshow.default { background: #222; } .bannerrow-slideshow.default .cycle-slide {} .bannerrow-slideshow.default .cycle-slide p { color: #fff; } /* orange */ .bannerrow-slideshow.orange { background: #FF690C; } .bannerrow-slideshow.orange .cycle-slide {} .bannerrow-slideshow.orange .cycle-slide p { color: #fff; } .bannerrow-slideshow.orange .cycle-slide p a { color: #fff; } /* blue */ .bannerrow-slideshow.jeans-blue { background: #15224C; } .bannerrow-slideshow.jeans-blue .cycle-slide {} .bannerrow-slideshow.jeans-blue .cycle-slide p { color: #fff; } .bannerrow-slideshow.jeans-blue .cycle-slide p span:nth-child(1) { margin-right: 1.0em; } .bannerrow-slideshow.jeans-blue .cycle-slide p span:nth-child(2) { margin-left: 1.0em; margin-right: 1.0em; } .bannerrow-slideshow.jeans-blue .cycle-slide p span:nth-child(3) { margin-left: 1.0em; } .bannerrow-slideshow.jeans-blue .cycle-slide p a { color: #fff; } /* sale */ .bannerrow-slideshow.sale { background: #E01F35; } .bannerrow-slideshow.sale .cycle-slide {} .bannerrow-slideshow.sale .cycle-slide p { color: #fff; } /* responsiveness */ @media only screen and (min-device-width : 320px) and (max-width : 480px), screen and (min-width : 321px) and (max-device-width : 480px){ .bannerrow-slideshow .cycle-slide p { font-size: 0.9em; line-height: 1.5em; } .bannerrow-slideshow.jeans-blue .cycle-slide p span { display: block;} .bannerrow-slideshow.jeans-blue .cycle-slide p span:nth-child(1) { margin: 0; } .bannerrow-slideshow.jeans-blue .cycle-slide p span:nth-child(2) { margin: 0; } .bannerrow-slideshow.jeans-blue .cycle-slide p span:nth-child(3) { margin: 0; } .bannerrow-slideshow.sale .cycle-slide p { font-size: 1.0em; } } /* 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 (min-device-width : 320px) and (max-width : 480px), screen and (min-width : 321px) and (max-device-width : 480px){ .bannerrow-slideshow .cycle-custom-pager { display: none; } } /********************/ /* Lookbook stacked */ /********************/ .lookbookStacked { position: relative; margin: 0px auto; } /**************/ /* image maps */ /**************/ .imageMapWrapper { position: relative; transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0,0,0); } .imageMap { width: 100%; max-width: 100%; position: relative; margin: 0px auto; transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0,0,0); } .imageMap img { width: 100%; max-width: 100%; margin: 0px auto; display: block; z-index: 1; position: relative; } .imageMap .areas { max-width: 100%; position: absolute; top: 0; left: 0; right: 0px; bottom: 0; z-index: 2; } .imageMap .areas a { display: block; z-index: 3; } .imageMap .areas a div { display: block; position: absolute; z-index: 2; } /* hotspots */ .imageMap .areas .lookbook-hotspot-container { position: absolute; } /* colored hotspots */ .imageMap .areas .spotBlue .hotspot-link { background-color: rgba(59,182,241,0.6); } .imageMap .areas .spotBlue .hotspot-link:hover { background-color: rgba(59,182,241,1); } .imageMap .areas .spotRed .hotspot-link { background-color: rgba(224,0,48,0.6); } .imageMap .areas .spotRed .hotspot-link:hover { background-color: rgba(224,0,48,1); } .imageMap .areas .spotGreen .hotspot-link { background-color: rgba(0,255,0,0.6); } .imageMap .areas .spotGreen .hotspot-link:hover { background-color: rgba(0,255,0,1); } /**************/ /* banner row */ /**************/ #PROMO { margin: 5px auto; background: #000; text-align: center; } #PROMO p { max-width: 950px; margin: 0px auto; font-family: 'ITCFranklinGothicW01-Bk 812650',arial,sans-serif; letter-spacing: .07em; font-size: 15px; color: #fff; padding: 7px 7px 5px 7px; margin-bottom: 11px; text-transform: uppercase; } /********/ /* usps */ /********/ .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; } .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; } /*******************/ /* responsive text */ /*******************/ .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; } /********/ /* Tabs */ /********/ [data-tab] {} [data-tab-content] { height: 0; overflow: hidden; } /**********/ /* Videos */ /**********/ .videoSlot { overflow: hidden; } .videoSlot .videoWrapper { width: 100%; height: 100%; } .videoSlot .videoWrapper .videoContainer { position: relative; padding-top: 54.3%; height: 0; overflow: hidden; } .videoSlot .videoWrapper .videoContainer iframe, .video-container object, .video-container embed { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; max-height: 100%; } .videoSlot .videoOverlay { position: absolute; top: 0; left: 0; } .videoSlot .slotWrapper { width: 100%; display: block; padding-top: 54.3%; } /* fix to remove play controls */ .videoSlot .videoWrapper .videoContainer iframe { height: 136%; max-height: 136%; margin-top: -9.5%; } /* ----------------------------------------------------------------******************---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 02. NAVIGATION *---------------------------------------------------------------- */ /* ----------------------------------------------------------------******************---------------------------------------------------------------- */ /**********************************/ /* Content Asset / footer-content */ /**********************************/ @media only screen and (max-width: 850px){ .footer__content__row.mobile-menu .hr { width: 100%; height: 1px; background: #3F3D3A; margin: 20px auto; } .footer__content__row.mobile-menu h3 { text-transform: uppercase; letter-spacing: .1em; font-weight: bold; padding: 10px 0; margin-bottom: 10px; } .footer__content__row.mobile-menu h3 a { color: #989898; text-decoration: none; } .footer__content__row.mobile-menu ul li .subTitle { color: #fff; } .footer__content__row.mobile-menu ul li .orangeline { color: #ff762e; } .footer__content__row.mobile-menu.grid-3 ul li { width: 100%; padding: 10px 10px 0 0; display: block; } .footer__content__row.mobile-menu.grid-3 ul li a.lowercase { text-transform: none; font-weight: normal; letter-spacing: 0; padding: 0 10px 0px 0; } } /* ----------------------------------------------------------------*****************---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 03. SLIDE OUT *---------------------------------------------------------------- */ /* ----------------------------------------------------------------*****************---------------------------------------------------------------- */ /*************************/ /* override allinone.css */ /*************************/ .slide-content { right: -400px; } #slidingSlotContainer { height: 100%; background: #000; } .slide-content #switchingLink { height: 120px; background-repeat: no-repeat; } /**********/ /* global */ /**********/ .promo-content {} .promo-content .login-wrapper { width: 360px;} .promo-content .reg-account #password-reset { color: #000; } .slide-out-content { width: 100%; max-width: 380px; } .slide-out-content a { color: #fff; } #slide-out-content-intro {} .slide-out-content-intro-logo { float: left; margin-right: 30px; } .slide-out-content-intro-text { display: inline-block; width: 196px; } .slide-out-content-intro-text .title { display: block; box-sizing: content-box; color: #fff; font-family: arial, sans-serif; font-size: 18px; margin: 14px 0 14px 0; line-height: 25px; text-transform: none; text-align: center; transform: matrix(1, 0, 0, 1, 0, 0); letter-spacing: .1em; } .slide-out-content-intro-text p { color: #fff; } #slide-out-content-menu { width: 100%; margin-top: 20px; clear: both; } #slide-out-content-menu a.item { display: block; text-decoration: none; color: #fff; line-height: 36px; font-weight: bold; font-size: 14px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } #slide-out-content-menu a.item:hover { display: block; color: #f2640f; background: #242424; } #slide-out-content-menu a.item span.icon { float: left; margin: -2px 15px 0 122px; } /* override styles */ #slide-out-content-top-registered {} #slide-out-content-top-registered .slide-out-content-intro-text .title { margin: 14px 0 2px 0; text-align: left; } #slide-out-content-top-registered .slide-out-content-intro-text h1 { margin: 14px 0 2px 0; } /* deprecated @ 24.04.15 */ #slide-out-content-top-unregistered {} #slide-out-content-top-unregistered .slide-out-content-intro-text .title { text-align: center; } #slide-out-content-top-unregistered .slide-out-content-intro-text h1 { text-align: center; } /* deprecated @ 24.04.15 */ #slide-out-content-bottom-registered {} #slide-out-content-bottom-unregistered {} /* ----------------------------------------------------------------*********************---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 04. ACCOUNT PAGES *---------------------------------------------------------------- */ /* ----------------------------------------------------------------*********************---------------------------------------------------------------- */ /*************/ /* dashboard */ /*************/ #my-account-dashboard { position: relative; } #my-account-dashboard .grid-table-wrapper { display: inline-block; max-width: 500px; float: left; } #my-account-dashboard .my-account-welcome-message {} #my-account-dashboard .my-account-welcome-message p { text-transform: uppercase; font-weight: bold; font-size: 15px; line-height: 20px; margin: 13px 0 12px; } /***********/ /* buttons */ /***********/ #my-account-dashboard .grid-table { display: table; width: 100%; position: relative; } #my-account-dashboard .grid-table .grid-table-row { display: table-row; } #my-account-dashboard .grid-table .grid-table-row .grid-table-cell { display: table-cell; width: 50%; } #my-account-dashboard .grid-table .grid-table-row .grid-table-cell.empty { border: none; } #my-account-dashboard .grid-table .grid-table-row .grid-table-cell.rowspanned { position: absolute; top: 0; bottom: 0; } #my-account-dashboard .grid-table .grid-table-row .grid-table-cell .imageMap { overflow: hidden; } #my-account-dashboard .WEB_MYACCOUNT_PAGE_BUTTON { width: 100%; padding-top: 56%; } #my-account-dashboard .my-account-dashboard-button > div { border: 1px solid #E3E3E3; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #my-account-dashboard .my-account-dashboard-button:hover > div { border: 1px solid #FF5F01; } /**********/ /* banner */ /**********/ #my-account-dashboard .banner-wrapper { display: inline-block; margin-left: 34px; } /******************/ /* responsiveness */ /******************/ @media only screen and (min-device-width : 320px) and (max-width : 480px){ #my-account-dashboard .grid-table-wrapper { display: block; margin: 0 0.25%; float: none; } #my-account-dashboard .banner-wrapper { display: block; width: 100%; margin: 65px 0.25% 0 0.25%; } } /* ----------------------------------------------------------------*****************---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 05. HOME PAGE *---------------------------------------------------------------- */ /* ----------------------------------------------------------------*****************---------------------------------------------------------------- */ /**********/ /* global */ /**********/ .page-home {} .page-home #homeslides.homepage { max-width: 1600px; margin: 0 auto; } /**************/ /* image maps */ /**************/ .homePageBanner { position: relative; transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0,0,0); z-index: 1; } .homePageBanner.slot04, .homePageBanner.slot05, .homePageBanner.slot06 { padding: 5% 0 5% 0; margin: 0; } .homePageBanner.slot08, .homePageBanner.slot09, .homePageBanner.slot10 { padding: 0 0 10% 0; margin: 0; } .homePageBanner.slot04, .homePageBanner.slot08 { padding-left: 15%; } .homePageBanner.slot05 { padding: 5% 0 0; width: 85.25%; margin: 0 7.375%; } .homePageBanner.slot09 { padding: 0 0 0; width: 85.25%; margin: 0 7.375%; } .homePageBanner.slot06, .homePageBanner.slot10 { padding-right: 15%; } @media only screen and (min-width : 320px) and (max-width : 850px), screen and (min-device-width : 320px) and (max-device-width : 850px){ .homePageBanner.slot04, .homePageBanner.slot06, .homePageBanner.slot09 { padding: 5% 2.5% 0 5%; margin: 0; } .homePageBanner.slot05, .homePageBanner.slot08, .homePageBanner.slot10 { padding: 5% 5% 0 2.5%; margin: 0; } .homePageBanner.slot05, .homePageBanner.slot09 { width: auto; } .homePageBanner.slot09, .homePageBanner.slot10 { padding-bottom: 10%; } } @media only screen and (min-width : 320px) and (max-width : 450px), screen and (min-device-width : 320px) and (max-device-width : 450px){ .page-home .grid-row.grid-1 { width: 100%; } .homePageBanner.slot04, .homePageBanner.slot05, .homePageBanner.slot06, .homePageBanner.slot08, .homePageBanner.slot09, .homePageBanner.slot10 { padding: 5% 30px 0 30px; margin: 0; } .homePageBanner.slot10 { padding-bottom: 10%; } } /****************/ /* cycle slider */ /****************/ .homePageSlider { position: relative; width: 100%; margin: 0px; overflow: hidden; } /**************************/ /* column table - renewed */ /**************************/ .main-grid { position: relative; margin: 0 auto; max-width: 100%; } .main-grid .grid-table { display: table; width: 100%; position: relative; } .main-grid .grid-table .grid-table-row { display: table-row; } .main-grid .grid-table .grid-table-row .grid-table-cell { display: table-cell; width: 50%; } .main-grid .grid-table .grid-table-row .grid-table-cell_50 { display: table-cell; width: 50%; } .main-grid .grid-table .grid-table-row .grid-table-cell_25 { display: table-cell; width: 25%; } .main-grid .grid-table .grid-table-row .grid-table-cell_20 { display: table-cell; width: 20%; } .main-grid .grid-table .grid-table-row .grid-table-padded-cell_20 { display: table-cell; width: 18%; padding: 1%; } .main-grid .grid-table .grid-table-row .grid-table-cell.empty, .main-grid .grid-table .grid-table-row .grid-table-cell_50.empty, .main-grid .grid-table .grid-table-row .grid-table-cell_25.empty, .main-grid .grid-table .grid-table-row .grid-table-cell_20.empty, .main-grid .grid-table .grid-table-row .grid-table-padded-cell_20.empty { border: none; } .main-grid .grid-table .grid-table-row .grid-table-cell.rowspanned, .main-grid .grid-table .grid-table-row .grid-table-cell_50.rowspanned, .main-grid .grid-table .grid-table-row .grid-table-cell_25.rowspanned, .main-grid .grid-table .grid-table-row .grid-table-cell_20.rowspanned, .main-grid .grid-table .grid-table-row .grid-table-padded-cell_20.rowspanned { position: absolute; top: 0; bottom: 0; } .main-grid .grid-table .grid-table-row .grid-table-cell .imageMap, .main-grid .grid-table .grid-table-row .grid-table-cell_50 .imageMap, .main-grid .grid-table .grid-table-row .grid-table-cell_25 .imageMap, .main-grid .grid-table .grid-table-row .grid-table-cell_20 .imageMap, .main-grid .grid-table .grid-table-row .grid-table-padded-cell_20 .imageMap { overflow: hidden; } /**************/ /* Navigation */ /**************/ .page-home .navigation-bar { position: relative; } .page-home .navigation-bar > .imageMap { z-index: 120; position: absolute; top: 0; left: 0; width: 100%; margin-top: -4%; } .page-home .navigation-bar.mob > .imageMap { z-index: 120; position: absolute; top: 0; left: 0; width: 100%; margin-top: -6.9%; } /**********/ /* Videos */ /**********/ .page-Home #videoSlot { overflow: hidden; } .page-home #slotWrapper { width: 100%; display: block; padding-top: 54.3%; } /* Video */ .page-home .lookbookStacked .imageMap .areas .videoWrapper { width: 100%; height: 100%; } .page-home .lookbookStacked .imageMap .areas .videoWrapper .videoContainer { position: relative; padding-top: 54.3%; height: 0; overflow: hidden; } .page-home .lookbookStacked .imageMap .areas .videoWrapper .videoContainer iframe, .video-container object, .video-container embed { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; max-height: 100%; } /* fix to remove play controls */ .page-home .lookbookStacked .imageMap .areas .videoWrapper .videoContainer iframe { height: 136%; max-height: 136%; margin-top: -9.5%; } /****************************/ /* HL05/HL06 (2015) STYLING */ /****************************/ /* column table - HL05/HL06 (2015) */ .page-home .hl05-grid { position: relative; margin: 0 auto; max-width: 100%; } .page-home .hl05-grid .grid-table { display: table; width: 100%; position: relative; } .page-home .hl05-grid .grid-table .grid-table-row { display: table-row; } .page-home .hl05-grid .grid-table .grid-table-row .grid-table-cell_60 { display: table-cell; width: 59.375%; } .page-home .hl05-grid .grid-table .grid-table-row .grid-table-cell_30 { display: table-cell; width: 28.125%; } .page-home .hl05-grid .grid-table .grid-table-row .grid-table-cell_padding { display: table-cell; width: 3.125%; } .page-home .hl05-grid .grid-table .grid-table-row .grid-table-cell_60.empty, .page-home .hl05-grid .grid-table .grid-table-row .grid-table-cell_30.empty, .page-home .hl05-grid .grid-table .grid-table-row .grid-table-cell_padding.empty { border: none; } .page-home .hl05-grid .grid-table .grid-table-row .grid-table-cell_60.rowspanned, .page-home .hl05-grid .grid-table .grid-table-row .grid-table-cell_30.rowspanned, .page-home .hl05-grid .grid-table .grid-table-row .grid-table-cell_padding.rowspanned { position: absolute; top: 0; bottom: 0; } .page-home .hl05-grid .grid-table .grid-table-row .grid-table-cell_60 .imageMap, .page-home .hl05-grid .grid-table .grid-table-row .grid-table-cell_30 .imageMap, .page-home .hl05-grid .grid-table .grid-table-row .grid-table-cell_padding .imageMap { overflow: hidden; } /* LU specific styles */ .page-home.lang-fr_lu .hl05-grid .grid-table .grid-table-row .grid-table-cell_60 .imageMap, .page-home.lang-fr_lu .hl05-grid .grid-table .grid-table-row .grid-table-cell_30 .imageMap, .page-home.lang-fr_lu .hl05-grid .grid-table .grid-table-row .grid-table-cell_padding .imageMap { overflow: visible; } /* hide default bannerrows */ .page-home #EXTRA { display: none; } .page-home #PROMO { display: none; } /* additional styles for carousel */ .page-home .cycle-custom-pager { left: 45%; width: 10%; } /*******************/ /* HL10-MEMBERDAYS */ /*******************/ /* countdown */ #HP-HL10-MEMBERDAYS.countDown { position: absolute; top: 73%; left: 1%; color: #222; width: 50%; } #HP-HL10-MEMBERDAYS.countDown p { text-align: center; text-transform: uppercase; font-size: 1.8em; line-height: 1.0em; margin: 0 auto; } #HP-HL10-MEMBERDAYS.countDown p.notation { font-size: 0.8em; line-height: 2.0em; } #HP-HL10-MEMBERDAYS.countDown p.notation span { width: 3.5%; margin: 0 1.4%; display: inline-block; text-align: center; } #HP-HL10-MOB-MEMBERDAYS.countDown { position: absolute; top: 76%; left: 6%; color: #222; width: 50%; } #HP-HL10-MOB-MEMBERDAYS.countDown p { text-align: center; text-transform: uppercase; font-size: 1.2em; line-height: 1.0em; margin: 0 auto; } #HP-HL10-MOB-MEMBERDAYS.countDown p.notation { font-size: 0.4em; line-height: 2.0em; display: none; } #HP-HL10-MOB-MEMBERDAYS.countDown p.notation span { width: 10%; margin: 0 1.4%; display: inline-block; text-align: center; } /***************************/ /* HL13-10%-THE-VOICE-KIDS */ /***************************/ /* homepage */ #HP_LB_HL13_TVK.countDown { top: 73%; left: 42.5%; width: 47.5%; height: 7%; } .lang-fr_be #HP_LB_HL13_TVK.countDown { top: 72%; left: 40.5%; width: 47.5%; height: 5%; } #HP_LB_HL13_TVK.countDown p { color: #fff; text-align: left; } #HP_LB_MOB_HL13_TVK.countDown { top: 66%; left: 6%; width: 87%; height: 5.5%; } .lang-fr_be #HP_LB_MOB_HL13_TVK.countDown { top: 64%; left: 3.5%; width: 87%; height: 4%; } #HP_LB_MOB_HL13_TVK.countDown p { color: #fff; text-align: left; } /* main page */ #CM_LB_HL13_TVK.countDown { top: 73%; left: 35.5%; width: 47.5%; height: 7%; } .lang-fr_be #CM_LB_HL13_TVK.countDown { top: 73.5%; left: 35%; width: 59%; height: 5%; } #CM_LB_HL13_TVK.countDown p { color: #fff; text-align: left; } #CM_LB_MOB_HL13_TVK.countDown { top: 66%; left: 6%; width: 87%; height: 5.5%; } .lang-fr_be #CM_LB_MOB_HL13_TVK.countDown { top: 64%; left: 3.5%; width: 87%; height: 4%; } #CM_LB_MOB_HL13_TVK.countDown p { color: #fff; text-align: left; } /*****************/ /* HL13-PRE-SALE */ /*****************/ /* homepage */ #HP_LB_HL13_PRESALE.countDown { top: 69%; left: 20%; width: 60%; height: 10%; } #HP_LB_HL13_PRESALE.countDown p { color: #fff; text-align: center; } #HP_LB_MOB_HL13_PRESALE.countDown { top: 67%; left: 10%; width: 80%; height: 8%; } #HP_LB_MOB_HL13_PRESALE.countDown p { color: #fff; text-align: center; } /* main page */ #CM_LB_HL13_PRESALE.countDown { top: 69%; left: 20%; width: 60%; height: 10%; } #CM_LB_HL13_PRESALE.countDown p { color: #fff; text-align: center; } #CM_LB_MOB_HL13_PRESALE.countDown { top: 67%; left: 10%; width: 80%; height: 8%; } #CM_LB_MOB_HL13_PRESALE.countDown p { color: #fff; text-align: center; } /*************/ /* HL13-4IS3 */ /*************/ /* homepage */ #HP_LB_HL13_4IS3.countDown { top: 72.5%; left: 20%; width: 60%; height: 10%; } #HP_LB_HL13_4IS3.countDown p { color: #fff; text-align: center; text-transform: uppercase; } #HP_LB_MOB_HL13_4IS3.countDown { top: 67%; left: 10%; width: 80%; height: 8%; } #HP_LB_MOB_HL13_4IS3.countDown p { color: #fff; text-align: center; text-transform: uppercase; } /* main page */ #CM_LB_HL13_4IS3.countDown { top: 71%; left: 20%; width: 60%; height: 10%; } #CM_LB_HL13_4IS3.countDown p { color: #fff; text-align: center; text-transform: uppercase; } #CM_LB_MOB_HL13_4IS3.countDown { top: 67%; left: 10%; width: 80%; height: 8%; } #CM_LB_MOB_HL13_4IS3.countDown p { color: #fff; text-align: center; text-transform: uppercase; } /*****************/ /* HL14-DENIMDAYS */ /*****************/ /* homepage */ #HP_LB_HL14_DENIMDAYS.countDown { top: 69%; left: 20%; width: 60%; height: 10%; } #HP_LB_HL14_DENIMDAYS.countDown p { color: #fff; text-align: center; } #HP_LB_MOB_HL14_DENIMDAYS.countDown { top: 64%; left: 10%; width: 80%; height: 8%; } #HP_LB_MOB_HL14_DENIMDAYS.countDown p { color: #fff; text-align: center; } /* main page */ #CM_LB_HL14_DENIMDAYS.countDown { top: 69%; left: 20%; width: 60%; height: 10%; } #CM_LB_HL14_DENIMDAYS.countDown p { color: #fff; text-align: center; } #CM_LB_MOB_HL14_DENIMDAYS.countDown { top: 64%; left: 10%; width: 80%; height: 8%; } #CM_LB_MOB_HL14_DENIMDAYS.countDown p { color: #fff; text-align: center; } /* ----------------------------------------------------------------***************************---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 06. CATEGORY MAIN PAGES *---------------------------------------------------------------- */ /* ----------------------------------------------------------------***************************---------------------------------------------------------------- */ /**********/ /* global */ /**********/ .lft { margin-right: 8px; } .rght { margin-left: 8px; } @media only screen and (min-width : 0px) and (max-width : 850px){ .lft { margin-right: 0px; } .rght { margin-left: 0px; } } /**************/ /* image maps */ /**************/ .mainPageBanner { position: relative; transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0,0,0); z-index: 1; } .categoryMainBanner { position: relative; transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0,0,0); } /********/ /* grid */ /********/ /* turned off @ 24.06.15 by M. Hildering */ /* Note: This is old styling, for a three column stacked layout */ /* .category-main-grid { position: relative; margin: 0 auto; max-width: 100%; } .category-main-grid .grid-table { display: table; width: 100%; position: relative; } .category-main-grid .grid-table .grid-table-row { display: table-row; } .category-main-grid .grid-table .grid-table-row .grid-table-cell { display: table-cell; width: 33.33%; } .category-main-grid .grid-table .grid-table-row .grid-table-cell .imageMap { overflow: hidden; } .category-main-grid .grid-table .grid-table-row .grid-table-cell.cellspanned { width: 66.66%; } .category-main-grid .grid-table .grid-table-row .grid-table-cell.empty { border: none; } .category-main-grid .grid-table .grid-table-row .grid-table-cell.rowspanned { position: absolute; top: 0; bottom: 0; } */ /**********/ /* videos */ /**********/ .categoryMainBanner .imageMap .areas .videoWrapper { width: 100%; height: 100%; } .categoryMainBanner .imageMap .areas .videoWrapper .videoContainer { position: relative; padding-top: 56.5%; height: 0; overflow: hidden; } .categoryMainBanner .imageMap .areas .videoWrapper .videoContainer iframe, .video-container object, .video-container embed { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; max-height: 100%; } /****************/ /* cycle slider */ /****************/ .categoryMainSlider { position: relative; width: 100%; margin: 0px; overflow: hidden; } /************************/ /* page specific styles */ /************************/ .page-category-11 #EXTRA, .page-category-12 #EXTRA, .page-category-00 #EXTRA, .page-category-sale #EXTRA, .page-category-boys-main #EXTRA, .page-category-girls-main #EXTRA { display: none; } /*******************/ /* HL10-MEMBERDAYS */ /*******************/ /* countdown */ #CM-HL10-MEMBERDAYS.countDown { position: absolute; top: 80%; left: 7.5%; color: #222; width: 50%; } #CM-HL10-MEMBERDAYS.countDown p { text-align: center; text-transform: uppercase; font-size: 1.8em; line-height: 1.0em; margin: 0 auto; } #CM-HL10-MEMBERDAYS.countDown p.notation { font-size: 0.8em; line-height: 2.0em; } #CM-HL10-MEMBERDAYS.countDown p.notation span { width: 5.5%; margin: 0 1.4%; display: inline-block; text-align: center; } #CM-HL10-MOB-MEMBERDAYS.countDown { position: absolute; top: 76%; left: 6%; color: #222; width: 50%; } #CM-HL10-MOB-MEMBERDAYS.countDown p { text-align: center; text-transform: uppercase; font-size: 1.2em; line-height: 1.0em; margin: 0 auto; } #CM-HL10-MOB-MEMBERDAYS.countDown p.notation { font-size: 0.4em; line-height: 2.0em; display: none; } #CM-HL10-MOB-MEMBERDAYS.countDown p.notation span { width: 10%; margin: 0 1.4%; display: inline-block; text-align: center; } /**************************/ /* HL12-4IS3-&-4THFORFREE */ /**************************/ .page-category-11 #CM_LB_HL12_4IS3.countDown, .page-category-12 #CM_LB_HL12_4IS3.countDown, .page-category-00 #CM_LB_HL12_4IS3.countDown { position: absolute; left: 0; bottom: 0; width: 100%; height: 8%; background: rgba(255, 255, 255, 0.8); text-align: center; } .page-category-11 #CM_LB_MOB_HL12_4IS3.countDown, .page-category-12 #CM_LB_MOB_HL12_4IS3.countDown, .page-category-00 #CM_LB_MOB_HL12_4IS3.countDown { position: absolute; left: 0; bottom: 10.5%; width: 100%; height: 11%; background: rgba(255, 255, 255, 0.8); text-align: center; } .page-category-11 #CM_LB_HL12_4F.countDown, .page-category-12 #CM_LB_HL12_4F.countDown, .page-category-00 #CM_LB_HL12_4F.countDown { position: absolute; left: 0; bottom: 0; width: 100%; height: 8%; background: rgba(255, 255, 255, 0.8); text-align: center; } .page-category-11 #CM_LB_MOB_HL12_4F.countDown, .page-category-12 #CM_LB_MOB_HL12_4F.countDown, .page-category-00 #CM_LB_MOB_HL12_4F.countDown { position: absolute; left: 0; bottom: 10.5%; width: 100%; height: 11%; background: rgba(255, 255, 255, 0.8); text-align: center; } /************************/ /* 2015_HL13-MEMBERDAYS */ /************************/ /* countdown */ .page-category-11 #CM_HL13_MEMBERDAYS.countDown, .page-category-12 #CM_HL13_MEMBERDAYS.countDown { position: absolute; left: 0; bottom: 17.5%; width: 54%; height: 5%; color: #BABF08; text-align: center; } .page-category-00 #CM_HL13_MEMBERDAYS.countDown { position: absolute; left: 0; bottom: 24.5%; width: 54%; height: 5%; color: #BABF08; text-align: center; } .page-category-11 #CM_MOB_HL13_MEMBERDAYS.countDown, .page-category-12 #CM_MOB_HL13_MEMBERDAYS.countDown, .page-category-00 #CM_MOB_HL13_MEMBERDAYS.countDown { position: absolute; left: 0; bottom: 19%; width: 100%; height: 7%; color: #BABF08; text-align: center; } /**********************/ /* 2015_HL13-PRE-SALE */ /**********************/ /* sliding doors */ .sliding-door-container { position: fixed; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: 99; visibility: hidden; } .sliding-door-left, .sliding-door-right { position: absolute; height: 100%; width: 50%; top: 0%; transition: all ease 0.3s; -moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3; } .sliding-door-left { left: 0%; background-color: rgba(0,0,0,0.8); } .sliding-door-right { left: 50%; background-color: rgba(0,0,0,0.8); } /* Animation slideLeft */ .slideLeft { animation-name: slideLeft; animation-duration: 2.5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; -webkit-animation-name: slideLeft; -webkit-animation-duration: 2.5s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-fill-mode: forwards; visibility: visible !important; } @keyframes slideLeft { { left: 0%; transform-origin: 50% 50% 0px; transform: perspective(350px) rotateY(0deg); } 100% { left: -50%; transform-origin: 50% 50% 0px; transform: perspective(350px) rotateY(90deg); } } @-webkit-keyframes slideLeft { 0% { left: 0%; transform-origin: 50% 50% 0px; transform: perspective(350px) rotateY(0deg); } 100% { left: -50%; transform-origin: 50% 50% 0px; transform: perspective(350px) rotateY(90deg); } } /* Animation slideRight */ .slideRight { animation-name: slideRight; animation-duration: 2.5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; -webkit-animation-name: slideRight; -webkit-animation-duration: 2.5s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-fill-mode: forwards; visibility: visible !important; } @keyframes slideRight { 0% { left: 50%; transform-origin: 50% 50% 0px; transform: perspective(350px) rotateY(0deg); } 100% { left: 100%; transform-origin: 50% 50% 0px; transform: perspective(350px) rotateY(-90deg); } } @-webkit-keyframes slideRight { 0% { left: 50%; transform-origin: 50% 50% 0px; transform: perspective(350px) rotateY(0deg); } 100% { left: 100%; transform-origin: 50% 50% 0px; transform: perspective(350px) rotateY(-90deg); } } /* global message */ #globalMessageWrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } #globalMessageWrapper #globalMessageContainer { position: absolute; top: 50%; left: 50%; margin: -187px 0 0 -270px; width: 90%; max-width: 540px; height: auto; background: none; } #globalMessageWrapper #globalMessageContainer #globalMessage { position: relative; width: 100%; height: auto; margin-top: 0; text-align: center; } #globalMessageWrapper #globalMessageContainer #globalMessage > img { width: 100%; } #globalMessageWrapper #globalMessageContainer #globalMessage .areas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } #globalMessageWrapper #globalMessageContainer #globalMessage #preSaleCode { margin: 50% 29% 0; width: 40%; text-align: center; border: none; line-height: 23px; font-size: 20px; /* hidden @ HL13 */ display: none; } #globalMessageWrapper #globalMessageContainer #globalMessage .globalErrorMessage { color: red; display: none; position: absolute; width: 100%; left: 0; bottom: -14%; font-style: italic; } #globalMessageWrapper #globalMessageContainer #globalMessage #submitPreSaleCodeWrapper { clear: both; padding: 2%; /* hidden @ HL13 */ display: none; } #globalMessageWrapper #globalMessageContainer #globalMessage #preSalePopupWrapper { position: absolute; top: 0: left: 0; width: 100%; height: 100%; cursor: pointer; } #globalMessageWrapper #globalMessageContainer #globalMessage #submitPreSaleCode { font-family: sans-serif; letter-spacing: 0; font-size: 11px; text-transform: uppercase; margin: 0 auto; text-align: center; display: block; font-weight: bold; border: 1px solid #fff; padding: 1px 0; margin: 0 auto; width: 16%; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; cursor: pointer; color: #fff; clear: both;} #globalMessageWrapper #globalMessageContainer #globalMessage #submitPreSaleCode:hover { background: #222; border: 1px solid #222; color: #fff; } /* responsiveness */ @media only screen and (min-width : 320px) and (max-width : 350px){ #globalMessageWrapper #globalMessageContainer #globalMessage .globalErrorMessage { bottom: -30%; } } @media only screen and (min-width : 350px) and (max-width : 450px){ #globalMessageWrapper #globalMessageContainer #globalMessage .globalErrorMessage { bottom: -20%; } } @media only screen and (min-width : 450px) and (max-width : 540px){ #globalMessageWrapper #globalMessageContainer #globalMessage .globalErrorMessage { bottom: -10%; } } @media only screen and (max-width : 850px){ #globalMessageWrapper #globalMessageContainer { position: absolute; top: 50%; left: 5%; margin: -25% 0; width: 90%; max-width: 100%; } } /* ----------------------------------------------------------------********************************---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 07. PRODUCT LIST PAGES (PLP) *---------------------------------------------------------------- */ /* ----------------------------------------------------------------********************************---------------------------------------------------------------- */ /**********/ /* global */ /**********/ .categoryBottomBanner, .category_Search_Hero_Banner { position: relative; max-width: 1600px; margin: 0px auto; clear: both; transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0,0,0); overflow: hidden; } .categoryBottomBanner img, .category_Search_Hero_Banner img { width: 100%; } .categoryPodBanner { position: relative; overflow: hidden; } /*************************************/ /* promo conditions bar below banner */ /*************************************/ /* display normal bar */ .categoryGeneralTermsAndConditions { max-width: 1600px; margin: 0px auto; } .categoryGeneralTermsAndConditions .regular .spacerTop { width: 100%; padding-top: 5px; } .categoryGeneralTermsAndConditions .regular .content { border: 1px solid #D6D6D6; padding: 3px 0; } .categoryGeneralTermsAndConditions .regular .content h3 { font-family: 'ITCFranklinGothicW01-Dm 812683',arial,sans-serif; text-transform: uppercase; font-size: 35px; letter-spacing: 0.08em; line-height: 35px; color: #222; margin: 0; } .categoryGeneralTermsAndConditions .regular .content p { font-family: 'ITCFranklinGothicW01-Bk 812662',arial,sans-serif; text-transform: uppercase; font-size: 18px; letter-spacing: 0.05em; color: #222; margin: 0; } .categoryGeneralTermsAndConditions .regular .spacerBottom { width: 100%; padding-top: 5px; } /* display bar like a sticker */ .categoryGeneralTermsAndConditions .sticker .spacerTop { width: 100%; padding-top: 5px; } .categoryGeneralTermsAndConditions .sticker .content { border: 1px solid #D6D6D6; text-align: left; } .categoryGeneralTermsAndConditions .sticker .content h3 { display: inline-block; background: #262626; font-family: 'ITCFranklinGothicW01-Dm 812683',arial,sans-serif; text-transform: uppercase; font-size: 18px; letter-spacing: 0.08em; line-height: 34px; color: #fff; padding: 0 7px; margin: 0 7px 0 0; } .categoryGeneralTermsAndConditions .sticker .content p { display: inline-block; font-family: 'ITCFranklinGothicW01-Bk 812662',arial,sans-serif; text-transform: uppercase; font-size: 18px; letter-spacing: 0.05em; color: #222; margin: 0; } .categoryGeneralTermsAndConditions .sticker .spacerBottom { width: 100%; padding-top: 5px; } @media only screen and (min-width: 320px) and (max-width: 723px){ .categoryGeneralTermsAndConditions .sticker .content h3 { display: block; margin: 0; text-align: center; } .categoryGeneralTermsAndConditions .sticker .content p { display: block; padding: 7px; } } /* ----------------------------------------------------------------**********************************---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 08. PRODUCT DETAIL PAGES (PDP) *---------------------------------------------------------------- */ /* ----------------------------------------------------------------**********************************---------------------------------------------------------------- */ /**********************/ /* USP next to button */ /**********************/ .next-to-button p { text-transform: uppercase; } /*************/ /* Sizechart */ /*************/ /* global */ #DivScroll { width: 100%; padding: 0px; overflow:auto; -webkit-overflow-scrolling: touch; overflow-y: auto; } #SizeChart { width: 100%; max-width: 905px; margin: auto; overflow:auto; overflow-y:auto; -webkit-overflow-scrolling: touch; } .sizeChart { max-width: 800px; margin: 60px 20px 20px 20px; } /* head */ .sizeChart .sChead { position: relative; margin-top: 5%; } .sizeChart .sChead .sCimage { position: absolute; top: -6%; left: 5%; width: 45%; } .sizeChart .sChead .sCimage img { width: 100%; } .sizeChart .sChead .sCintro { position: absolute; right: 5%; width: 45%; top: 11%; } .sizeChart .sChead .sCintro h1 { text-align: center; text-transform: uppercase; font-size: 25px; margin: 25px 0px 0px; } .sizeChart .sChead .sCintro h2 { text-align: center; text-transform: uppercase; font-size: 15px; letter-spacing: .1em; margin: 5px 0px 25px; } .sizeChart .sChead .sCintro p { text-align: center; color: #A7A7A7; text-transform: uppercase; font-size: 12px; margin: 0px; padding: 5px; } .sizeChart .sChead .sCintro p a { display: block; text-transform: uppercase; text-decoration: none; color: #000; background: #fff; display: inline-block; font-size: 10px; line-height: 30px; width: 185px; margin-top: 25px; } .sizeChart .sChead .sCintro p a:hover { background: #A7A7A7; } .sizeChart .sChead .sCbg { width: 100%; padding-top: 80%; background: #DFDFDF; } /* body */ .sizeChart .sCbody h3 { text-transform: uppercase; font-size: 14px; margin: 15px 0px; padding: 25px 0 5px 0; font-weight: bold; border-top: none; } .sizeChart .sCbody h3:before { display: none; } .sizeChart .sCbody p { font-size: 11px; margin: 20px 0px 0px; padding: 5px 0 5px 0; } .sizeChart .sCbody .sCtable { width: 100%; } .sizeChart .sCbody .sCtable tr { } .sizeChart .sCbody .sCtable tr th { width: 20%; height: 40px; text-align: center; background: #edeceb; border-bottom: 1px solid #d6d6d6; text-transform: uppercase; font-size: 10px; font-weight: bold; } .sizeChart .sCbody .sCtable tr td { height: 30px; text-align: center; color: #666; border-bottom: 1px solid #d6d6d6; text-transform: uppercase; font-size: 11px; } .sizeChart .sCbody .sCtable tr td.label { height: 30px; text-align: center; background: #edeceb; } .sizeChart .sCbody .sCbackToTop { text-decoration: none; font-size: 12px; display: block; text-align: center; padding: 8px 0px; text-transform: uppercase; } .sizeChart .sCbody .sCbackToTop:hover { text-decoration: underline; } /* responsiveness */ @media only screen and (min-device-width : 320px) and (max-width : 320px){ .sizeChart .sChead { } .sizeChart .sChead .sCimage { position: absolute; left: 5%; width: 90%; top: 45%; } .sizeChart .sChead .sCintro { position: relative; clear: both; width: 105%; text-align: center; } .sizeChart .sChead .sCintro h1 { margin-top: 0px; } .sizeChart .sChead .sCintro p a { border: 1px solid #DDDDDD; margin-top: 15px; } .sizeChart .sChead .sCbg { width: 100%; padding-top: 160%; margin: 25% auto 0px; background: #DFDFDF; } .sizeChart .sCbody .sCtable tr th { font-size: 9px; } .sizeChart .sCbody .sCtable tr td { font-size: 9px; } } @media only screen and (min-width : 321px) and (max-device-width : 480px){ .sizeChart .sChead .sCintro { top: 0%; } .sizeChart .sChead .sCintro p a { font-size: 16px; line-height: 25px; width: 145px; margin-top: 15px; } } /* take out to top button */ .faq-section .sizeChart .sCbody .sCbackToTop { display: none; } /* ----------------------------------------------------------------****************---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 09. CHECKOUT *---------------------------------------------------------------- */ /* ----------------------------------------------------------------****************---------------------------------------------------------------- */ /**********************/ /** Bag_Right_Margin **/ /**********************/ .Bag_Right_Margin_Banner { position: relative; margin: 0 auto 20px auto; max-width: 150px; transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0,0,0); overflow: hidden; } /*************/ /* page-cart */ /*************/ .page-cart {} /***********************************/ /* Log in / Enter your information */ /***********************************/ .page-checkout-step1 {} /***********/ /* Payment */ /***********/ .page-checkout-step3 {} /**********************/ /* Order confirmation */ /**********************/ /* global */ .page-orderconfirmation {} .orderConfirmationBanner { position: relative; transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0,0,0); } /*****************/ /* 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 (min-width : 320px) and (max-width : 850px), screen and (min-device-width : 320px) and (max-device-width : 850px) { .lang-nl_be .checkout-progress, .lang-nl_fr .checkout-progress { background: none; } } /* ----------------------------------------------------------------*************************---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 10. INSPIRATION PAGES *---------------------------------------------------------------- */ /* ----------------------------------------------------------------*************************---------------------------------------------------------------- */ /** Note(s): - All inspiration pages below are ordered/named by their category ID **/ /**************/ /* image maps */ /**************/ .staticPageBanner { position: relative; transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0,0,0); } .staticPageBanner.lft { max-width: 692px; padding: 0 0 0 30px; margin-left: auto; } .staticPageBanner.rght { max-width: 692px; padding: 0 30px 0 0; margin-right: auto; } .staticPageBanner.full { max-width: 1400px; padding: 0 30px 0 30px; margin: 0 auto; } @media only screen and (min-width : 320px) and (max-width : 850px), screen and (min-device-width : 320px) and (max-device-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 (min-width : 320px) and (max-width : 450px), screen and (min-device-width : 320px) and (max-device-width : 450px){ .page-we-is-me .grid-row.grid-1 { width: 100%; } .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; } } /**********/ /* videos */ /**********/ .staticPageBanner .imageMap .areas .videoWrapper { width: 100%; height: 100%; } .staticPageBanner .imageMap .areas .videoWrapper .videoContainer { position: relative; padding-top: 56.5%; height: 0; overflow: hidden; } .staticPageBanner .imageMap .areas .videoWrapper .videoContainer iframe, .video-container object, .video-container embed { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; max-height: 100%; } /************************/ /* 2015_HL03_blue_ridge */ /************************/ /* global */ .2015_HL03_blue_ridge {} /* additional styles for carousel */ .2015_HL03_blue_ridge .topCarousel .cycle-custom-pager { left: 45%; width: 10%; } .2015_HL03_blue_ridge .topCarousel .cycle-custom-pager .dot-container { padding: 9px 0px 5px 0px; width: 25px; display: inline-block; cursor: pointer; } .2015_HL03_blue_ridge .topCarousel .cycle-custom-pager .dot-container .dot { background: none; border: 1px solid #fff; opacity:1; filter:alpha(opacity=100); width: 13px; height: 13px; -moz-border-radius: 8px; border-radius: 8px; display: inline-block; -webkit-transition: all .3s ease-in-out; } .2015_HL03_blue_ridge .topCarousel .cycle-custom-pager .dot-container:hover .dot { background: #fff; opacity: 1.0; filter: alpha(opacity=100); } .2015_HL03_blue_ridge .topCarousel .cycle-custom-pager .cycle-pager-active .dot { background: #fff; opacity: 1.0; filter: alpha(opacity=100); } /*****************************/ /* static-pages / dance4life */ /*****************************/ /* global */ .showOnDesktop { display: block !important; } .showOnMobile { display: none !important; } /* grid */ .d4l-grid { position: relative; margin: 0 auto; max-width: 1280px; font-size: 100%; } .d4l-grid h2 { display: block; text-transform: uppercase; font-family: 'ITCFranklinGothicW01-Dm 812683',arial,sans-serif; font-size: 5.0em; line-height: 0.9em; letter-spacing: 0; margin: 0.15em auto 0.25em; } .d4l-grid .grid-table { display: table; width: 100%; position: relative; } .d4l-grid .grid-table .grid-table-row { display: table-row; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 { display: inline-block; width: 43.75%; margin: 0 3.125% 6.25%; vertical-align: top; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50.full { width: 93.75%; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50.odd:first-child { float: right; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50.odd:last-child { float: left; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .imageMap { overflow: hidden; min-height: 460px; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50:first-child .author { display: block; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50:last-child .author { display: none; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50.full .author { display: block; } /* post */ .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .imageBlock { padding-top: 1.9em; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .imageMap p { margin: 1.0em auto; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .imageMap p, .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .imageMap li { font-size: 1.0em; line-height: 1.8em; font-family: gotham_bookregular, arial, sans-serif; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .imageMap li { list-style-type: decimal; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .hr { width: 100%; height: 1px; background: #dedede; clear: both; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .date { text-transform: uppercase; font-style: italic; font-size: 1.1em; line-height: 1.9em; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; } /* author */ .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .author { clear: both; margin: 1.0em auto; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .author .avatar { display: block; float: left; margin: 1.0em 1.0em 1.0em 0; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .author .avatar img { max-width: 50px; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .author .author-info { padding: 4px 0; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .author .author-name { display: block; text-transform: uppercase; font-family: 'ITCFranklinGothicW01-Dm 812671',arial,sans-serif; font-size: 2.0em; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .author .author-title { display: block; text-transform: uppercase; font-style: italic; font-size: 1.2em; line-height: 1.5em; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; } /* videos */ .d4l-grid .placeholder { padding-top: 83%; } .d4l-grid .videoHolder { position: absolute; top: 7%; left: 0%; width: 100%; } .d4l-grid .videoWrapper { width: 100%; height: 100%; } .d4l-grid .videoWrapper .videoContainer { position: relative; padding-top: 56.5%; height: 0; overflow: hidden; } .d4l-grid .videoWrapper .videoContainer iframe, .video-container object, .video-container embed { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; max-height: 100%; } /* specific styling */ #about-dance4life .videoHolder { top: 20%; } #doutzen-and-dance4life .videoHolder { top: 15%; } /* responsiveness */ @media only screen and (min-width : 320px) and (max-width : 850px), screen and (min-device-width : 320px) and (max-device-width : 480px) { /* global */ .showOnDesktop { display: none !important; } .showOnMobile { display: block !important; } /* grid */ .d4l-grid h2 { font-size: 4.0em; line-height: 0.9em; } .d4l-grid .grid-table .grid-table-row { display: block; margin-bottom: 18.75%; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 { display: block; width: 93.75%; margin: 0 3.125% 6.25%; float: none; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50.odd { float: none; } /* post */ .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .imageBlock { padding-top: 0; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .imageMap { min-height: initial; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .imageMap p, .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .imageMap li { font-size: 1.1em; line-height: 1.5em; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50 .imageMap li { list-style-type: decimal; } /* author */ .d4l-grid .grid-table .grid-table-row .grid-table-cell_50:first-child .author { display: none; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50:last-child .author { display: block; } .d4l-grid .grid-table .grid-table-row .grid-table-cell_50.full .author { display: block; } /* videos */ .d4l-grid .placeholder { padding-top: 58%; } .d4l-grid .videoHolder { top: 0%; } /* specific styling */ #about-dance4life .videoHolder { top: 0%; } #doutzen-and-dance4life .videoHolder { top: 0%; } } /**********************************/ /** static-pages / fitguide-... **/ /**********************************/ /* pre-loader */ .se-pre-con { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(../icons/fitguide-loader.gif) center 28% no-repeat rgba(255, 255, 255, 0.9); transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0,0,0); } /* progress bar */ body[class*="page-category-fitguide"] .progress-wrapper { position: relative; } body[class*="page-category-fitguide"] .progress-wrapper .progress-bar-wrapper { position: absolute; top: 56%; left: 23%; width: 54%; height: 2%; z-index: 2; background: rgba(29, 75, 172, 0.2); } body[class*="page-category-fitguide"] .progress-wrapper .progress-bar-wrapper .progress-bar { width: 0; height: 100%; background: rgba(29, 75, 172, 0.8); } /* fitguide */ body[class*="page-category-fitguide"] .fitguide-wrapper { position: relative; max-width: 1280px; margin: 0 auto; transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0,0,0); } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide-intro { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 5; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide { overflow: hidden; position: relative; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper {} /* fits index */ body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper ul.fits { padding: 0; margin: 0; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper ul.fits li.fit { display: inline-block; list-style-type: none; position: relative; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper ul.fits li.fit .trigger {} body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper ul.fits.col-20 {} body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper ul.fits.col-20 li.fit { width: 20%; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper ul.fits.col-25 li.fit { width: 25%; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper ul.fits.col-30 li.fit { width: 33.30%; } /* zoomed fits */ body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper .fit-views { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 4; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper .fit-views .views-carousel {} /* zoomed fit */ body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper .fit-views .views-carousel .view { width: 100%; max-width: 100%; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper .fit-views .views-carousel .view .placeholder { padding-top: 69%; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper .fit-views .views-carousel .view .label { display: none; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper .fit-views .views-carousel .view .text-fit-wrapper { position: relative; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper .fit-views .views-carousel .view .text-fit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper .fit-views .views-carousel .view .view-carousel {} /* fit navigation */ body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper .fit-views-navigation-wrapper { position: relative; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper .fit-views-navigation { display: none; position: absolute; top: 0; left: 0; z-index: 5; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper .fit-views-navigation ul.navigation-items { padding: 0; margin: 0; display: block; position: relative; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper .fit-views-navigation ul.navigation-items > li { display: block; float: left; list-style: none; cursor: pointer; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper .fit-views-navigation ul.navigation-items > li > div.item { display: block; width: 100%; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper .fit-views-navigation ul.navigation-items > li > div.subnavigation { display: none; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; margin-top: 4.1%; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } body[class*="page-category-fitguide"] .fitguide-wrapper .fitguide .fits-wrapper .fit-views-navigation ul.navigation-items > li:hover > div.subnavigation { display: block; visibility: visible; } /* pre-loader (mobile) */ .se-pre-con._mobile { background: url(../icons/fitguide-loader.gif) center 25% no-repeat rgba(255, 255, 255, 0.9); background-size: 12% 9%; } /* progress bar (mobile) */ body[class*="page-category-fitguide"] .progress-wrapper._mobile .progress-bar-wrapper { top: 76%; } /* fitguide (mobile) */ body[class*="page-category-fitguide"] .fitguide-wrapper._mobile .fitguide .fits-wrapper ul.fits li.fit { display: block; } body[class*="page-category-fitguide"] .fitguide-wrapper._mobile .fitguide .fits-wrapper .fit-views .views-carousel .view .view-carousel .cycle-slide .areas { z-index: 0; } body[class*="page-category-fitguide"] .fitguide-wrapper._mobile .fitguide .fits-wrapper .fit-views .views-carousel .view .text-fit { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1; margin-top: 115%; } body[class*="page-category-fitguide"] .fitguide-wrapper._mobile .fitguide .fits-wrapper .fit-views .views-carousel .view .placeholder { padding-top: 144%; } body[class*="page-category-fitguide"] .fitguide-wrapper._mobile .fitguide .fits-wrapper .fit-views .views-carousel .view .navigation-wrapper { position: absolute; top: 4%; left: 7%; width: 5%; z-index: 150; } body[class*="page-category-fitguide"] .fitguide-wrapper._mobile .fitguide .fits-wrapper .fit-views .views-carousel .view .navigation-wrapper ul.navigation-items { display: block; width: 100%; height: 25%; margin: 0; padding: 0; } body[class*="page-category-fitguide"] .fitguide-wrapper._mobile .fitguide .fits-wrapper .fit-views .views-carousel .view .navigation-wrapper ul.navigation-items li { width: 100%; list-style-type: none; } body[class*="page-category-fitguide"] .fitguide-wrapper._mobile .fitguide .fits-wrapper .fit-views .views-carousel .view .navigation-wrapper ul.navigation-items li > div.navigation-item { width: 100%; height: auto; margin: 0 0 60% 0; } body[class*="page-category-fitguide"] .fitguide-wrapper._mobile .fitguide .fits-wrapper .fit-views .views-carousel .view .navigation-wrapper ul.navigation-items li > div.navigation-item .dot { border-radius: 50%; width: 100%; padding-bottom: 100%; background: #fff; opacity: 0.4; filter:alpha(opacity=40); cursor: pointer; } body[class*="page-category-fitguide"] .fitguide-wrapper._mobile .fitguide .fits-wrapper .fit-views .views-carousel .view .navigation-wrapper ul.navigation-items li.cycle-pager-active > div.navigation-item .dot { opacity: 1.0; filter:alpha(opacity=100); } /***************************************/ /** pre-sale / collection-for-doutzen **/ /***************************************/ /* hide LHN */ .page-category-collection-for-doutzen ul.marketing-category-nav { display: none; } /*************************************************/ /** pre-sale / collection-for-doutzen-countdown **/ /*************************************************/ /* hide LHN */ .page-category-collection-for-doutzen-countdown ul.marketing-category-nav { display: none; } /* countdown */ .page-category-collection-for-doutzen-countdown .countdown-wrapper { position: absolute; top: 66%; left: 62.2%; width: 35%; height: 7%; } .page-category-collection-for-doutzen-countdown .countdown-wrapper .countdown { width: 100%; height: 100%; position: relative; color: #222; font-family: "Lucida Console", Monaco, monospace; } .page-category-collection-for-doutzen-countdown .countdown-wrapper .countdown span { background: url( '../Category pages/_women/2015_HL09/CAT_HL09_W_Doutzen_counter_bg_2.png' ) top left no-repeat; background-size: contain; overflow: hidden; display: inline-block; max-width: 16.4%; padding: 0.6% 0 0 0.65%; } .page-category-collection-for-doutzen-countdown .countdown-wrapper .countdown .days { margin-right: 6.5%; } .page-category-collection-for-doutzen-countdown .countdown-wrapper .countdown .hours { margin-right: 8%; } .page-category-collection-for-doutzen-countdown .countdown-wrapper .countdown .minutes { margin-right: 7.5%; } .page-category-collection-for-doutzen-countdown .countdown-wrapper .countdown .seconds {} /*************************************************/ /** pre-sale / collection-for-doutzen-countdown **/ /*************************************************/ /* countdown */ .page-category-collection-for-doutzen-preview .countdown-wrapper { position: absolute; top: 66%; left: 60%; width: 35%; height: 7%; } .page-category-collection-for-doutzen-preview .countdown-wrapper .countdown { width: 100%; height: 100%; position: relative; color: #222; font-family: "Lucida Console", Monaco, monospace; } .page-category-collection-for-doutzen-preview .countdown-wrapper .countdown span { background: url( '../Category pages/_women/2015_HL09/CAT_HL09_W_Doutzen_counter_bg_2.png' ) top left no-repeat; background-size: contain; overflow: hidden; display: inline-block; max-width: 16.4%; padding: 0.6% 0 0 0.65%; } .page-category-collection-for-doutzen-preview .countdown-wrapper .countdown .days { margin-right: 6.5%; } .page-category-collection-for-doutzen-preview .countdown-wrapper .countdown .hours { margin-right: 8%; } .page-category-collection-for-doutzen-preview .countdown-wrapper .countdown .minutes { margin-right: 7.5%; } .page-category-collection-for-doutzen-preview .countdown-wrapper .countdown .seconds {} /**************************************/ /** static-pages / language-selector **/ /**************************************/ /* hide elements */ .page-category-language-selector .top-content #navigation, .page-category-language-selector .top-content .nav, .page-category-language-selector .top-container, .page-category-language-selector .footer__content { display: none; } .page-category-language-selector .lookbook-full-page { margin-bottom: 0; } /* show country selector */ .page-category-language-selector { background: url('../Landing pages/_static/language-selector/2015_HL10/BR_BG.jpg') top center no-repeat; background-size: cover; height: 100%; } .page-category-language-selector #languageSelector .imageMap .placeholder { padding-top: 50%; } .page-category-language-selector #countryDisplay { display: block !important; position: absolute; top: 50%; left: 50%; max-width: 790px; margin-top: -74px; margin-left: -395px; } /* responsiveness */ @media only screen and (max-width : 790px) { .page-category-language-selector { background: url('../Landing pages/_static/language-selector/2015_HL10/BR_BG_MOB.jpg') top center no-repeat; background-size: cover; height: 100%; } .page-category-language-selector #countryDisplay { top: 50%; left: auto; margin-left: 0; } } /*********************************************/ /** static-pages / we-is-me-become-a-member **/ /*********************************************/ /**************/ /* Navigation */ /**************/ .page-category-we-is-me p.threshold { padding: 1% 0; margin: 0 auto; font-size: 0.8em; font-style: italic; } .page-category-we-is-me .navigation-bar { position: relative; } .page-category-we-is-me .navigation-bar > .imageMap { z-index: 120; position: absolute; top: 0; left: 0; width: 100%; margin-top: -2.5%; } .page-category-we-is-me .navigation-bar.mob > .imageMap { z-index: 120; position: absolute; top: 0; left: 0; width: 100%; margin-top: -6.9%; } /*********************************************/ /** static-pages / studio-collection-portal **/ /*********************************************/ /* hide elements */ .page-category-studio-collection-portal { background: #000; overflow: hidden; } .page-category-studio-collection-portal::-webkit-scrollbar { display: none; } .page-category-studio-collection-portal .top-content #navigation, .page-category-studio-collection-portal .top-content .nav, .page-category-studio-collection-portal .top-container, .page-category-studio-collection-portal .footer__content { display: none; } .page-category-studio-collection-portal .lookbook-full-page { margin-bottom: 0; } /* global */ #PORTAL_2016_HL01_STUDIOCOLLECTION { width: 100%; margin: 0 auto; } #PORTAL_2016_HL01_STUDIOCOLLECTION .countDown { top: 39%; left: 2.5%; width: 95%; height: 8%; } #PORTAL_2016_HL01_STUDIOCOLLECTION .countDown p { color: #fff; text-align: center; } .page-category-studio-collection-portal #countryDisplay { display: block !important; position: absolute; top: 50%; left: 50%; max-width: 790px; margin-top: -74px; margin-left: -395px; opacity: 0.0; } /* responsiveness */ @media only screen and (max-width : 790px) { #PORTAL_2016_HL01_STUDIOCOLLECTION .countDown { height: 5%; } .page-category-studio-collection-portal #countryDisplay { top: 50%; left: auto; margin-left: 0; } } /* ----------------------------------------------------------------**********************---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 11. STATIC CONTENT *---------------------------------------------------------------- */ /* ----------------------------------------------------------------**********************---------------------------------------------------------------- */ /***********/ /* General */ /***********/ /* global */ .page-static {} .page-static p { margin: 1.0em 0; } /* linkButton */ a.linkButton { text-align: center; line-height: 18px; font-size: 14px; font-family: 'ITCFranklinGothicW01-Bk 812650',arial,sans-serif; letter-spacing: .15em; text-decoration: none; border: 1px solid #b7b7b7; padding: 4px 10px; } a.linkButton:hover { border: 1px solid #000; background: #000; color: #fff; padding: 4px 10px; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } /*******/ /* Faq */ /*******/ /* quicklinks (icons) */ .faq-quicklink-wrapper { margin-top: 68px; } .faq-quicklink-wrapper .active { background-color: #fff !important; border: 2px solid #000 !important; } .faq-quicklink-wrapper .float_col { float: left; width: 15.66%; } .faq-quicklink-wrapper .float_col:hover { background-color: #fff !important; border: 2px solid #000 !important; } .faq-quicklink-wrapper .float_col a { text-decoration: none; } .faq-quicklink-wrapper .col_content { margin: 0px; padding: 10px 0px; } .faq-quicklink-wrapper .col_content .col_icon { list-style-type: none; margin: 0px; padding: 5px; text-align: center; } .faq-quicklink-wrapper .col_content .col_icon .icon_img {} .faq-quicklink-wrapper .col_content .col_text { list-style-type: none; text-transform: uppercase; text-align: center; font-size: 12px; line-height: 23px; letter-spacing: 0.05em; padding-bottom: 2px; } .faq-quicklink-wrapper #algemeen { background-color: #B4B4B4; border: 2px solid #B4B4B4; } .faq-quicklink-wrapper #bestellen { background-color: #C3C3C3; border: 2px solid #C3C3C3; } .faq-quicklink-wrapper #betalen { background-color: #D2D2D2; border: 2px solid #D2D2D2; } .faq-quicklink-wrapper #levering { background-color: #E1E1E1; border: 2px solid #E1E1E1; } .faq-quicklink-wrapper #retourneren { background-color: #EAEAEA; border: 2px solid #EAEAEA; } .faq-quicklink-wrapper #contact { background-color: #F4F4F4; border: 2px solid #F4F4F4; } /* responsiveness */ @media only screen and (min-device-width : 320px) and (max-width : 320px){ .faq-quicklink-wrapper { margin-top: 0px; } .faq-quicklink-wrapper .float_col { width: 32%; } .faq-quicklink-wrapper .col_content .col_text { font-size: 18px; line-height: 18px; } } @media only screen and (min-width : 321px) and (max-device-width : 480px) { .faq-quicklink-wrapper { margin-top: 0px; } .faq-quicklink-wrapper .float_col { width: 32.33%; } } .faqImportant { padding: 0.5em; margin: 2.0em 5px 2.0em 25px; background: #FFF1EA; } .faqImportant p { padding: 5px; } /***********/ /* Contact */ /***********/ /* general beghavior */ .stacked-id-contact .stack { position: relative; margin-bottom: 10px; } .stacked-id-contact .stack .tmp { padding: 20px; background: #FDB000; } .stacked-id-contact .stack p { text-align: center;} .stacked-id-contact .stack h2 {text-align: center; letter-spacing: 0.05em;} .stacked-id-contact .stack .background { width: 100%; } /* top part */ .stacked-id-contact #stack-1 > div { width: 25%; height: 300px; } .stacked-id-contact #stack-1 > div p { font-size: 18px; line-height: normal; margin: 140px 0px 0px 0px; text-transform: uppercase; text-align: center; } .stacked-id-contact #stack-1 p span.U { border-bottom: 2px solid rgb(0,0,0); } .stacked-id-contact #stack-1 p span.U a { text-decoration: none; } .stacked-id-contact #stack-1 .arrow-right { position: absolute; top: 136px; left: 0px; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; } .stacked-id-contact #stack-1-1 { background: #E9E7E2 url('../Static pages/customer-service/contact/stack-1-1.png?$staticlink$') center 62px no-repeat; float: left; } .stacked-id-contact #stack-1-2 { background: #F1EFEA url('../Static pages/customer-service/contact/stack-1-2.png?$staticlink$') center 65px no-repeat; position: relative; float: left; } .stacked-id-contact #stack-1-2 .arrow-right {border-left: 14px solid #E9E7E2; } .stacked-id-contact #stack-1-3 { background: #FAF8F4 url('../Static pages/customer-service/contact/stack-1-3.png?$staticlink$') center 62px no-repeat; position: relative; float: left; } .stacked-id-contact #stack-1-3 .arrow-right {border-left: 14px solid #F1EFEA; } .stacked-id-contact #stack-1-4 { background: #FFFFFF url('../Static pages/customer-service/contact/stack-1-4.png?$staticlink$') center 58px no-repeat; position: relative; float: left; } .stacked-id-contact #stack-1-4 .arrow-right {border-left: 14px solid #FAF8F4; } /* middle part (form) is managed in general css */ /* content slot css */ .stacked-id-contact .slot-content {padding: 20px; background: #FDB000;} /* bottom part */ .stacked-id-contact #stack-3-1 { background: #E9E7E2; padding: 20px; } .stacked-id-contact #stack-3-1 h2 { font-size: 20px; line-height: 20px; font-weight: 600; text-align: center; margin-top: 0px; margin-bottom: 20px; } .stacked-id-contact #stack-3-1 p { font-size: 20px; line-height: 20px; text-align: center; margin-top: 0px; margin-bottom: 0px; } .stacked-id-contact #stack-3-1 p a { text-decoration: none;} .stacked-id-contact #stack-3-1 p span.small { font-size: 12px; line-height: 12px; } .stacked-id-contact #stack-3-1 .hr { width: 50%; height: 2px; margin: 30px auto; background: rgb(0,0,0); } /* Responsive & adaptive */ @media only screen and (max-width: 850px) { .stacked-id-contact #stack-3-1 h2 { font-size: inherit; line-height: inherit; margin-bottom: inherit;} .stacked-id-contact #stack-3-1 p { font-size: inherit; line-height: inherit;} .stacked-id-contact #stack-1-1 { background: #E8E7E2} .stacked-id-contact #stack-1-2 { background: #F0EFEA} .stacked-id-contact #stack-1-3 { background: #F9F8F4} .stacked-id-contact #stack-1-4 { background: #FAF9F5} .stacked-id-contact #stack-1 > div {width: 50%; height: auto; background-image: none;} .stacked-id-contact #stack-1 .arrow-right {display: none;} .stacked-id-contact #stack-1 > div p {font-size: 12px;margin: 10%;} } @media only screen and (max-width: 420px) { .stacked-id-contact #stack-1 > div p {font-size: 10px;} } /**************************/ /* Adjusted Opening Hours */ /**************************/ table.specialOpeningHours { width: 100%; } table.specialOpeningHours tr {} table.specialOpeningHours tr th { text-align: center; background: #edeceb; border-bottom: 1px solid #d6d6d6; text-transform: uppercase; font-size: 12px; font-family: 'ITCFranklinGothicW01-Bk 812647',arial,sans-serif; font-weight: bold; } table.specialOpeningHours tr th:nth-child(1) { width: 20%; } table.specialOpeningHours tr th:nth-child(2) { width: 40%; } table.specialOpeningHours tr th:nth-child(3) { width: 40%; } table.specialOpeningHours tr td { height: 30px; text-align: left; color: #666; border-bottom: 1px solid #d6d6d6; font-size: 12px; letter-spacing: .15em; font-family: 'ITCFranklinGothicW01-Bk 812647',arial,sans-serif; } /* ----------------------------------------------------------------*************************---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 12. GLOBAL PERSISTANT *---------------------------------------------------------------- */ /* ----------------------------------------------------------------*************************---------------------------------------------------------------- */ /**********/ /* Global */ /**********/ .hotspot-url[href=""], .hotspot-url:not([href]) { display: none !important; } /****************/ /* Hotspot area */ /****************/ .product-unavailable { display: none !important; } /*********************/ /* Responsive images */ /*********************/ header { width: 1600px; } @media only screen and (max-width: 320px){ header { width: 320px; } } /***************/ /* Strip pages */ /***************/ .folderid-algemeen, .folderid-algemene-voorwaarden, .folderid-app, .folderid-bestellen, .folderid-betalen, .folderid-contact, .folderid-cookie-statement, .folderid-gift-card-algemene-voorwaarden, .folderid-levering, .folderid-privacy-policy, .folderid-retourneren, .folderid-sizechart, .folderid-student-programm, .folderid-we-is-me, .page-account { display: none; } /* ----------------------------------------------------------------***********************---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 13. GLOBAL HOTFIXES *---------------------------------------------------------------- */ /* ----------------------------------------------------------------***********************---------------------------------------------------------------- */ /** SALE category link on main pages is red **/ /** Note(s): - added @ 29.06.15 - edited @ 29.06.15 **/ .refinement-link[title="SALE"], .refinement-link[title="SOLDES"] { color: #E31A2F !important; } /** Workaround to put countdown USP on pdp **/ /** Note(s): - Added @ 06.07.15 - Edited @ 06.07.15 - Functionality commentarized in content.js - Functionality added in Visual Website Optimizer **/ .countdownUSP_pdp {} .countdownUSP_pdp p { font-size: 1.1em; } .countdownUSP_pdp p span[data-countdown-pdp], .countdownUSP_pdp p span.deliveryCondition { color: #17B617; font-weight: 500; } .countdownUSP_pdp p span.clock { width: 1.4em; height: 1.4em; margin: 0 0.4em 0 0; float: left; line-height: 1.6em; background: url(../icons/clock.png?$staticlink$) no-repeat; background-size: contain; background-position: center; } /** Turn off sale bannerrow on mains **/ /** Note(s): - Added @ 22.07.15 - Edited @ 22.07.15 - Take out after SALE is finished. This was a quick fix to turn them off. **/ .bannerrow-slideshow.sale { display: none; } .page-home .bannerrow-slideshow.sale { display: block; } /** Add extra link to Doutzen stores for Doutzen products **/ /** Note(s): - added @ 28.09.15 - edited @ 28.09.15 - Added script in content.js **/ .cfd-link { margin-left: 1.0em; } /* responsiveness */ @media only screen and (max-width : 500px) { .cfd-link { margin-left: 0; display: block; } } /** Prevent product description tooltip to be capitalized **/ /** Note(s): - added @ 29.09.15 - edited @ 29.09.15 **/ .product-set-list .product-set-item .description-tooltip .tooltip-info .dialog-content { text-transform: none; font-size: 12px; } /** Fix USP on top **/ /** Note(s): - added @ 15.12.15 - edited @ 16.12.15 **/ .usp-slot { width: 380px; } /** Fix margin in menu **/ /** Note(s): - added @ 29.12.15 - edited @ 29.12.15 **/ .navigation .navigation-container .html-slot-container { margin: 0; } /** Make USP text smaller on mobile on pdp **/ /** Note(s): - added @ 12.01.16 - edited @ 12.01.16 **/ @media only screen and (max-width : 420px) { .page-pdp #stockMessage { margin: 10px 0 0; } .page-pdp #stockMessage p { font-size: 10.5px; font-weight: bold; } } /* ----------------------------------------------------------------******************************---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 14. PAGE SPECIFIC HOTFIXES *---------------------------------------------------------------- */ /* ----------------------------------------------------------------******************************---------------------------------------------------------------- */ /** Remove get together present in cart on BE-FR **/ /** Note(s): - added @ 03.11.15 - edited @ 03.11.15 **/ .page-cart.lang-fr_be .cart-promo { display: none !important; } /** Greyout EDC stock text in cart delivery options */ /** Note(s): - added @ 11.12.15 - edited @ 11.12.15 **/ .cart-footer .transportation-options .html-slot-container { color: #999; } /* ----------------------------------------------------------------*******************---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 15. VWO CHANGES *---------------------------------------------------------------- */ /* ----------------------------------------------------------------*******************---------------------------------------------------------------- */ /** Turn iPad to Landscape message */ /** Note(s): - added @ 14.12.15 - edited @ 23.12.15 **/ .iPadPortraitNotificationWrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 999; cursor: pointer; overflow: hidden; display: none; } .iPadPortraitNotificationWrapper .iPadPortraitNotificationContainer { position: absolute; max-width: 100%; cursor: initial; } .iPadPortraitNotificationWrapper .iPadPortraitNotificationContainer .iPadPortraitNotification { background: #fff; } .iPadPortraitNotificationWrapper .iPadPortraitNotificationContainer .iPadPortraitNotificationClose { position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; background: url('../icons/close.png?$staticlink$') no-repeat 8px 7px; cursor: pointer; } @media only screen and (max-width : 850px){ .iPadPortraitNotificationWrapper .iPadPortraitNotificationContainer .iPadPortraitNotification { margin: 0 30px; } .iPadPortraitNotificationWrapper .iPadPortraitNotificationContainer .iPadPortraitNotificationClose { top: 0; right: 0; background: url('../icons/close_invert.png?$staticlink$') no-repeat 8px 7px; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { .iPadPortraitNotificationWrapper { display: block; } .iPadPortraitNotificationWrapper .iPadPortraitNotificationContainer .iPadPortraitNotification { margin: 0 30px; } } /** Hide pakken-2 category **/ /** Note(s): - added @ 15.12.15 - edited @ 15.12.15 **/ /* .page-category-11 a[href*="pakken-2"] { display: none; } */ /* ----------------------------------------------------------------***********---------------------------------------------------------------- */ /* ----------------------------------------------------------------* 16. END *---------------------------------------------------------------- */ /* ----------------------------------------------------------------***********---------------------------------------------------------------- */