html { touch-action: manipulation; } @font-face { font-family: 'CervoMedium'; src: url('../fonts/CervoMedium.eot'); src: url('../fonts/CervoMedium.eot') format('embedded-opentype'), url('../fonts/CervoMedium.ttf') format('truetype'), url('../fonts/CervoMedium.svg#CervoMedium') format('svg'); font-display: swap; } @font-face { font-family: 'CervoLight'; src: url('../fonts/CervoLight.eot'); src: url('../fonts/CervoLight.eot') format('embedded-opentype'), url('../fonts/CervoLight.ttf') format('truetype'), url('../fonts/CervoLight.svg#CervoLight') format('svg'); font-display: swap; } *{ /* -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;*/ } *:focus {outline:0;} .hideMobile{ display: none; } .clean{ clear:both; } :root { /* COLORS */ --lijnmblack: rgb(20, 15, 17); --lijnmdarkgray: rgb(45,43,47); --lijnmlightgrayRef: rgb(200,200,200); --lijnmlightgray: rgb(220,220,220); --lijnmgreen: rgb(97,182,128); --lijnmwhite: rgb(255,255,255); --lijnmwhiteNavBar: rgba(255,255,255,0.8); --lijnmerror: rgb(255,40,40); --lijnmstoryNew: rgb(97,182,128); --LijnMColorSale: rgb(255, 73, 73); --LijnMColorAction: rgb(255, 73, 73); --colorWeakPwd: rgb(255,0,0); --colorAveragePwd: rgb(255,147,0); --colorOrange: rgb(255,147,0); --colorStrongPwd: rgb(15,84,11); /* FONT SIZES */ --LijnMFontSizeSale: 13px; --lijnmbodyfontsize: 15px; --fontsizeStorySlider: 10px; --fontSizeHead1: 22px; --fontSizeHead2: 17px; --fontSizeMenuMain: 18px; --fontSizeMenuSub: 16px; --fontsizegridtitleBig: 32px; --fontsizegridtitle: 16px; --fontsizegridtitleSmall: 16px; --fontsizegridtitleSub: 13px; --fontsizegridtext: 15px; --fontsizePopup: 20px; --fontSizePriceBig: 20px; --fontSizeButton: 15px; --fontsizetopnav: 18px; --fontsizeTopLink: 18px; --fontSizeCadeauBon: 22px; --fontSizeInput: 18px; --fontSizeRequiredSmall: 11px; } .grid__item.kleedjesmarkt .grid__price, .nav__sub .kleedjesmarkt a{ color: var(--colorOrange) !important; } .makeGreen{ color: var(--lijnmgreen); } *:focus {outline:0;} /**:hover { -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; }*/ figure, header, section, nav, p { margin: 0; } .error { background-color: var(--lijnmerror) !important; } body { color: var(--lijnmdarkgray); -webkit-font-smoothing: antialiased; margin: 0; padding: 0; font-size: var(--lijnmbodyfontsize); font-family: "CervoLight", serif; overflow-x: hidden; } body.bodyPage{ padding-top: 50px; } body.bodyHome{ padding: 0px; } figure.default img{ max-width: 100%; max-height: 100%; width: auto; height: auto; } h1, .h1 { font-family: "CervoMedium", serif !important; font-size: var(--fontSizeHead1); color: inherit; font-weight: 100; margin: 0 0 1em 0 } h2, .h2 { font-family: "CervoMedium", serif;; font-size: var(--fontSizeHead2); color: inherit; font-weight: 100; margin: 0 0 1em 0 } .clear { clear: both; } .txtAlignRight { text-align: right; } .txtAlignCenter { text-align: center; } .noMargin { margin: 0 !important; } .center{ position: relative; margin: 0 auto; width: 100%; } a { cursor: pointer; text-decoration: underline; color: var(--lijnmblack); } a:hover { cursor: pointer; color: var(--lijnmblack); text-decoration: underline; } /* NAV */ nav.nav__homeMain{ position: fixed; width: 100%; left: 0; top: 80px; z-index: 20; text-align: center; z-index: 100; } nav.nav__homeMain img.beeldmerk{ height: 26px; width: auto; vertical-align: middle; } nav.nav__homeMain a{ font-size: var(--fontsizetopnav); color: var(--lijnmwhite); font-family: "CervoMedium", serif; margin: 0px 10px; display: inline-block; line-height: 26px; text-decoration: none; text-transform: uppercase; } .hamburger__active nav.nav__homeMain a{ opacity: 0.3; } nav.nav__homeMain a.active{ border-bottom: 2px solid var(--lijnmwhite); } nav.nav__main { width: calc(100vw - 80px); position: fixed; top: 50px; right: -100vw; height: calc(100% - 50px); z-index: 160; text-align: left; background: var(--lijnmwhite); -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; overflow: scroll } .bodyHome nav.nav__main{ top: 50px; height: calc(100% - 50px); /*top: 90px; height: calc(100% - 90px);*/ } .homeFullPage .bgItem{ display: none; } .brand__logo__toppage{ margin: 0; padding: 0px 5px; height: 44px; text-align: left; width: 75px; display: inline-block; } .brand__logo__toppage img{ margin: 5px 0px; width: auto; height: 40px; } nav.nav__main .brand__logo{ margin: 16px; width: 150px; height: auto; } nav.nav__main .brand__logo img{ width: auto; height: auto; } .page__top{ position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: var(--lijnmwhite); z-index: 199; -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.5); box-shadow: 0 0 5px 0 rgba(0,0,0,0.5); } .page__top .top__icon{ position: relative; display: inline-block; float: right; } .page__top .top__icon .shoppingtotal, .shoppingtotal{ position: absolute; text-align: center; color: var(--lijnmblack); font-size: 11px; line-height: 22px; width: 17px; top: 6px; left: 62px; } .page__top .top__icon img{ position: relative; float: right; height: 22px; margin: 10px 5px 0px 10px; } .page__top .hamburger{ margin: 5px 10px 0px 10px; position: relative; float: right; } .popup{ position: fixed; border-radius: 20px; -webkit-border-radius: 20px; top: 20px; z-index: 201; padding: 20px 0px 16px 0px; min-height: 80px; left: 60px; width: calc(100vw - 120px); border: 0; background-color: var(--lijnmdarkgray); opacity: 0; pointer-events: none; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; pointer-events: none; text-align: center; } .popup .popupClose{ position: absolute; right: 15px; top: 10px; background-image: url('../images/icon-close_white.svg'); background-size: 15px; width: 15px; height: 15px; cursor: pointer; } .popup .popupTitle{ color: var(--lijnmwhite); font-size: var(--fontsizePopup); margin-bottom: 1em; } .popup .popupMessage{ color: var(--lijnmwhite); font-size: var(--fontsizegridtext); } .popup a, .popup p{ color: var(--lijnmwhite) } .popup.active{ opacity: 1; pointer-events: all; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .search{ position: fixed; border-radius: 20px; -webkit-border-radius: 20px; top: 20px; z-index: 201; padding: 8px 0px 16px 0px; height: 80px; left: 60px; width: calc(100vw - 120px); border: 0; background-color: var(--lijnmdarkgray); opacity: 0; pointer-events: none; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; box-sizing: content-box; } .search .closeSearch{ position: absolute; right: 15px; top: 10px; background-image: url('../images/icon-close_white.svg'); background-size: 15px; width: 15px; height: 15px; cursor: pointer; } .search.active{ opacity: 1; pointer-events: all; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .search .btnSearch{ display: none; position: absolute; right: 16px; bottom: 17px; width: 40px; height: 44px; } .search .searchTitle{ font-size: var(--fontSizeHead2); font-family: "CervoMedium", serif; color: var(--lijnmwhite); text-align: center; margin: 0; } .search .btnSearch img{ width: 22px; margin: 10px 10px 0 0; height: auto; } .search input{ height: 44px; border: 0; margin: 10px 16px; padding: 0px 56px 0px 16px; background-color: var(--lijnmwhite); width: calc(100% - 100px); border-radius: 20px; -webkit-border-radius: 20px; box-sizing: content-box; } nav.nav__main ul, nav.nav__main ul li{ list-style: none; padding: 0; width: 100%; } nav.nav__main ul li a{ position: relative; margin: 0px 16px; color: var(--lijnmblack); } nav.nav__main ul li{ font-size: var(--fontSizeMenuMain); } nav.nav__main ul li ul.nav__sub{ max-height: 0px; overflow: hidden; -webkit-transition: max-height 0.3s linear; -moz-transition: max-height 0.3s linear; -o-transition: max-height 0.3s linear; transition: max-height 0.3s linear; } nav.nav__main ul li ul.nav__sub.active{ max-height: calc(100vh - 80px); -webkit-transition: max-height 0.3s linear; -moz-transition: max-height 0.3s linear; -o-transition: max-height 0.3s linear; transition: max-height 0.3s linear; } nav.nav__main ul li ul.nav__sub li a{ color: var(--lijnmblack); font-size: var(--fontSizeMenuSub); } nav.nav__main ul li ul.nav__sub li a{ margin: 0 0 0 32px; } nav.nav__main ul li ul.nav__sub li:last-child{ } nav.nav__main ul li:not(.hasSub.active){ display: block; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } nav.nav__main ul li.hasSub.active a{ color: var(--lijnmgreen); } nav.nav__main ul li.hasSub.active ul li{ opacity:1; display: block; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } nav.nav__main ul li.hasSub.active ul li a{ color: var(--lijnmblack); } nav.nav__main ul li a{ text-decoration: none; line-height: 2em; } nav.nav__main ul li.hasSub.active ul.nav__sub{ display: block; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } nav.nav__main .bottomMenu{ position: relative; display: block; line-height: 44px; text-decoration: none; padding: 0px 16px; color: var(--lijnmblack); font-size: var(--fontSizeMenuMain) } nav.nav__main .bottomMenu .shoppingtotal{ position: absolute; text-align: center; color: var(--lijnmblack); font-size: 11px; line-height: 22px; width: 17px; bottom: 5px; left: 22px; } nav.nav__main .bottomMenu img{ height: 20px; width: 30px; object-fit: contain; vertical-align: middle; margin: 0 10px 0 0; } .hamburger { position: relative; font: inherit; display: inline-block; overflow: visible; margin: 0; top: 7px; margin-left: 10px; padding: 0px; cursor: pointer; transition-timing-function: linear; transition-duration: .15s; transition-property: opacity, filter; text-transform: none; color: inherit; border: 0; background-color: transparent; z-index:99; } .hamburger:hover { opacity: .7 } .hamburger-box { position: relative; display: inline-block; width: 26px; height: 26px } .hamburger-inner { top: 50%; display: block; margin-top: -2px } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { position: absolute; width: 26px; height: 1px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform; background-color: var(--lijnmblack); } .hamburger-inner:after, .hamburger-inner:before { display: block; content: '' } .hamburger-inner:before { top: -7px } .hamburger-inner:after { bottom: -7px } .hamburger--spin .hamburger-inner { transition-timing-function: cubic-bezier(.55, .055, .675, .19); transition-duration: .3s } .hamburger--spin .hamburger-inner:before { transition: top .1s ease-in .34s, opacity .1s ease-in } .hamburger--spin .hamburger-inner:after { transition: bottom .1s ease-in .34s, transform .3s cubic-bezier(.55, .055, .675, .19) } .hamburger--spin.is-active .hamburger-inner { transition-delay: .14s; transition-timing-function: cubic-bezier(.215, .61, .355, 1); transform: rotate(225deg) } .hamburger--spin.is-active .hamburger-inner:before { top: 0; transition: top .1s ease-out, opacity .1s ease-out .14s; opacity: 0 } .hamburger--spin.is-active .hamburger-inner:after { bottom: 0; transition: bottom .1s ease-out, transform .3s cubic-bezier(.215, .61, .355, 1) .14s; transform: rotate(-90deg) } .hamburger--spin-r .hamburger-inner { transition-timing-function: cubic-bezier(.55, .055, .675, .19); transition-duration: .3s } .hamburger--spin-r .hamburger-inner:before { transition: top .1s ease-in .34s, opacity .1s ease-in } .hamburger--spin-r .hamburger-inner:after { transition: bottom .1s ease-in .34s, transform .3s cubic-bezier(.55, .055, .675, .19) } .hamburger--spin-r.is-active .hamburger-inner { transition-delay: .14s; transition-timing-function: cubic-bezier(.215, .61, .355, 1); transform: rotate(-225deg) } .hamburger--spin-r.is-active .hamburger-inner:before { top: 0; transition: top .1s ease-out, opacity .1s ease-out .14s; opacity: 0 } .hamburger--spin-r.is-active .hamburger-inner:after { bottom: 0; transition: bottom .1s ease-out, transform .3s cubic-bezier(.215, .61, .355, 1) .14s; transform: rotate(90deg) } .hamburger__active nav.nav__main{ right: 0px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } .page__hover{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; opacity: 0; background-color: var(--lijnmdarkgray); pointer-events: none; z-index: 0; } .page__hover.active, .hamburger__active .page__hover{ opacity: 0.5; pointer-events: all; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; z-index: 150; } /* LIJNM BAR */ section.section__navbar{ height: 50px; width:100%; float: left; text-align: left; background-color: var(--lijnmwhiteNavBar); position: fixed; bottom: 0; left: 0; z-index: 99; -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.5); box-shadow: 0 0 5px 0 rgba(0,0,0,0.5); } section.section__navbar.active{ background-color: var(--lijnmwhite); } section.section__navbar figure.brand__logo{ width: 118px; margin: 16px; display: inline-block; } section.section__navbar .navTrigger{ position: absolute; right: 0; top: 0px; text-align: center; width: 100%; height: 50px; display: flex; justify-content: space-between; align-content: center; align-items: center; } section.section__navbar .navTrigger .bottomIcon{ width: 100% !important; height: 50px !important; text-align: center; justify-content: center; line-height: 50px; } section.section__navbar .navTrigger img{ max-height: 22px; max-width: 22px; width: auto; height: auto; vertical-align: middle; } /* !* LIJNM STORY *! section.section__stories{ height: calc(122px - 16px - 16px); width: calc(100% - 16px - 16px); float: left; position: relative; background-color: var(--lijnmlightgray); !*horzontal scrolling *! padding: 16px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } section.section__stories .story__item{ margin: 0px 10px 0 0; width: 80px; height: 100px; display: inline-block; } section.section__stories a{ text-decoration: none; } section.section__stories .story__item p{ width: 100%; font-size:var(--fontsizeStorySlider); text-align: center; } section.section__stories .story__item.story__new .story__figure{ border: 2px solid var(--lijnmstoryNew); } section.section__stories .story__item .story__figure{ width: 80px; height: 80px; box-sizing: border-box; border-radius: 100%; overflow: hidden; } section.section__stories .story__item .story__figure img{ width: 80px; height: 80px; object-fit: cover; object-position: center; } */ /* LIJNM SECTION GRID */ .pagination__fp { position:fixed; right:10px; top: 50%; transform: translateY(-50%); list-style: none; font-size:1.4em; z-index: 10; } .pagination__fp a { display:block; height:7px; margin-bottom:1px; color:white; position:relative; padding:4px; text-decoration: none; } .pagination__fp a.active:after { box-shadow:inset 0 0 0 5px; } .pagination__fp a .hover-text { position:absolute; right:15px; top:7px; opacity:0; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; padding-right: 15px; } .pagination__fp a:hover .hover-text { opacity: 1; } .pagination__fp a:after { -webkit-transition:box-shadow 0.5s ease; transition:box-shadow 0.5s ease; width:5px; height:5px; display: block; border:1px solid; border-radius:50%; content:''; position: absolute; margin:auto; top:0; right:4px; bottom:0; } .section__scroller{ position: absolute; width: 100vw !important; height: 100vh !important; scrolling: auto; } section.section__grid{ float: left; position: relative; width: 100%; } section.section__grid .grid__item{ box-sizing: border-box; text-align: left; position: relative; } section.section__grid .grid__item iframe{ max-width: 100% !important; } .productOthers .grid__item.webshop{ border-top: 1px solid var(--lijnmlightgray); } section.section__grid .grid__item.webshop { text-align: left; border-bottom: 1px solid var(--lijnmlightgray); border-right: 1px solid var(--lijnmlightgray); } section.section__grid .grid__item.webshop.webshopDetail{ text-align: left; border-bottom: none; border-right: none; } section.section__grid .grid__item.webshop:nth-child(2n){ border-right: 0px; } section.section__grid .grid__hover{ position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: var(--lijnmdarkgray); opacity: 0.3; z-index: 5; } /* homepage grid */ section.section__grid .grid__item p:not(.grid__title){ margin-bottom: 1em; font-size: var(--fontsizegridtext) } section.section__grid .grid__item p.grid__title__sub{ height: 2em; } section.section__grid .grid__item.full{ width: 100vw; height: 100vw; margin: 0 0 20px 0; } .section__grid__home__slider .grid__item.full{ height: 100vh !important; margin-bottom: 0px !important; } section.section__grid .grid__item.full44{ width: 100vw; height: auto; margin: 0 0 0px 0; } section.section__grid .grid__item.full .slick__slider{ position: relative; width: 100%; height: 100vw; } section.section__grid .grid__item.full .slick__slider .slide{ z-index: 10; position: relative; width: 100vw; height: 100vw; display: flex; align-items: center; } section.section__grid .grid__item.full .grid__image{ width: 100vw; height: 100vw; position: relative; z-index: 1; margin: 0; background-color: var(--lijnmwhite); } section.section__grid .grid__item.full .slick__slider .slide .grid__image{ /*position: absolute;*/ } .section__grid__home__slider .grid__item.full .grid__image{ height: 100vh !important } section.section__grid .grid__item.full44 .grid__image{ width: 100vw; height: 100vw; position: relative; z-index: 1; margin: 0 !important; } section.section__grid .grid__item.full .grid__image img{ object-fit: cover; object-position: center; width: 100vw; height: 100vw; } .section__grid__home__slider section.section__grid .grid__item.full .grid__image img{ object-fit: cover; object-position: center; width: 100%; height: 100vh; } section.section__grid .grid__item.full44 .grid__image img{ object-fit: cover; object-position: center; width: 100vw; height: 100vw; background-color: var(--lijnmwhite); } section.section__grid .grid__item.full .grid__text{ position: absolute; left: 20px; width: calc(100% - 40px); text-align: center; top: calc(50vw - 50px); z-index: 10; color: var(--lijnmwhite) } section.section__grid .grid__item.full .slick__slider .grid__text{ top: unset; } section.section__grid .grid__item.horizontal .grid__text{ position: absolute; left: 20px; width: calc(100% - 40px); text-align: center; top: calc(25vw - 50px); z-index: 10; color: var(--lijnmwhite) } .section__grid__home__slider .grid__item.full .grid__text{ top: calc(50vh - 100px) !important; } section.section__grid .grid__item.full44 .grid__text{ position: absolute; left: 20px; width: calc(100% - 40px); text-align: center; top: calc(50vw - 50px); z-index: 10; color: var(--lijnmwhite) } section.section__grid .grid__item.full .grid__title{ font-family: "CervoMedium", serif; text-transform: uppercase; font-size: var(--fontsizegridtitleBig); } section.section__grid .grid__item.horizontal .grid__title{ font-family: "CervoMedium", serif; text-transform: uppercase; font-size: var(--fontsizegridtitleBig); } section.section__grid .grid__item.full44 .grid__title{ font-size: var(--fontsizegridtitle); } section.section__grid .grid__item.full44 .grid__text .grid__title { font-family: "CervoMedium", serif; font-size: var(--fontsizegridtitleBig) !important; text-transform: uppercase; } section.section__grid .grid__item a{ text-decoration: none; } section.section__grid .grid__item a:hover .grid__image{ opacity: 0.7; } /* 2/4 grid */ section.section__grid .grid__item{ width: 50vw; box-sizing: border-box; margin: 0px 0px 0px 0px; position: relative; float: left; } section.section__grid .grid__item.tom{ margin-bottom: 20px; } section.section__grid .grid__item .grid__image{ width: calc(50vw - 20px); height: calc(50vw - 20px); position: relative; z-index: 1; margin: 10px 10px 1em 10px; } section.section__grid .grid__item .inPicColor{ z-index: 99; position: absolute; right: 10px; top: 10px; width: 16px; height: 16px; } .labelSale{ z-index: 99; position: absolute; left: 0px; top: 10px; padding: 3px 5px; font-size: var(--LijnMFontSizeSale); color: var(--lijnmwhite); height: var(--LijnMFontSizeSale); background-color: var(--LijnMColorSale) } .labelPreOrder{ z-index: 99; position: absolute; right: 0px; top: 10px; padding: 3px 5px; font-size: var(--LijnMFontSizeSale); color: var(--lijnmwhite); height: var(--LijnMFontSizeSale); background-color: var(--lijnmdarkgray); } .labelAction{ z-index: 99; position: absolute; left: 0px; top: 30px; padding: 3px 5px; font-size: var(--LijnMFontSizeSale); color: var(--lijnmwhite); height: var(--LijnMFontSizeSale); background-color: var(--LijnMColorAction) } .labelInline{ position: relative; left: unset !important; top: unset !important; display: inline-block; vertical-align: middle; margin: 10px !important; } section.section__grid .grid__item.webshopDetail .grid__image{ width: 100vw; height: 100vw; position: relative; z-index: 1; margin: 10px 0 1em 0 !important; } section.section__grid .grid__item.tom .grid__image{ width: calc(50vw - 0px); height: auto !important; margin: 0; } section.section__grid .grid__item .grid__image img{ object-fit: cover; object-position: center; width: calc(50vw - 20px); height: calc(50vw - 20px); } section.section__grid .grid__item.tom .grid__image img{ object-fit: cover; object-position: center; /* width: calc(50vw - 0px); height: calc((50vw - 0px) / 1.875) !important;*/ width: 100%; height: auto; } section.section__grid .grid__item p,section.section__grid .grid__item h1,section.section__grid .grid__item h2 { margin-left: 10px; margin-right: 10px; } /*section.section__grid .grid__item.webshopDetail p, section.section__grid .grid__item.webshopDetail h1, section.section__grid .grid__item.webshopDetail h2{ margin-left: 20px; margin-right: 20px; }*/ section.section__grid .grid__item.webshopDetail .shoppingcart.button{ /* position: absolute;*/ right: 10px; margin-top: 10px; } .productContent.zaagservice .shoppingcart.button{ position: relative !important } section.section__grid .grid__item .grid__title{ font-size: var(--fontsizegridtitleSmall); font-family: "CervoMedium", serif; position: relative; z-index: 22; } .webshop .grid__title .titleLine{ overflow: hidden; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; } section.section__grid .grid__item .grid__quote{ font-size: var(--fontsizegridtitleSmall); font-style: italic; color: var(--lijnmgreen) } section.section__grid .grid__item .grid__price, .shoppingcart__price{ color: var(--lijnmgreen); } section.section__grid .grid__item .grid__price__old{ text-decoration: line-through; font-size: var(--fontsizegridtitleSub); } section.section__grid .grid__item .optionColors{ line-height: 20px; cursor: pointer; clear: both; } section.section__grid .grid__item .optionColors img{ vertical-align: middle; width: 15px; height: auto; z-index: 30; } .colorWheel{ height: 15px; width: auto; vertical-align: middle; } section.section__grid .grid__item img.bookmark{ position: absolute; right: 0px; top: -48px; width: 16px; height: auto; z-index: 30; /*background-color: var(--lijnmwhite);*/ padding: 3px; } section.section__grid .grid__item.tom img.bookmark{ position: absolute; right: 0px; top: -35px; } section.section__grid .grid__item img.shoppingcart{ position: absolute; right: 0px; top: 25px; width: 16px; height: auto; z-index: 15; background-color: var(--lijnmwhite); padding: 3px; } img.bookmark.productDetail{ top: 0px !important; } p.attention{ color: var(--lijnmerror); font-style: italic; } section.section__grid .grid__item .grid__title__sub{ font-size: var(--fontsizegridtitleSub) !important; font-family: "CervoLight", serif; z-index: 2; } section.section__grid .grid__item.horizontal{ width: calc(100vw - 0px); height: 50vw; margin: 0px; position: relative; float: left; } section.section__grid .grid__item.horizontal .grid__image{ width: calc(100vw - 0px); height: 50vw; margin: 0 !important; } section.section__grid .grid__item.horizontal .grid__image img{ object-fit: cover; object-position: center; width: calc(100vw - 0px); height: 50vw; } section.section__grid .grid__item.horizontal.horizontalFullBar .grid__image img{ width: 100% !important; height: 100% !important; } section.section__grid .grid__item.horizontal.horizontalFullBar .grid__image{ width: 100% !important; height: 100% !important; } section.section__grid .grid__item.text { width: calc(100vw - 0px); margin: 0 0 20px 0; position: relative; float: left; clear: both; } section.section__grid .grid__item.text .kop1{ margin-top: 20px; margin-bottom: 0 !important; margin-left: 10px; margin-right: 10px; } nav.nav__inPage{ width: 100%; float: left; clear: both; } nav.nav__inPage ul{ list-style: none; padding: 0; margin: 0; } nav.nav__inPage ul li{ width: 100%; display :block; position: relative; line-height: 44px; border-bottom: 1px solid var(--lijnmlightgray); } nav.nav__inPage ul li a{ font-size: var(--fontSizeHead2); color: var(--lijnmblack); font-family: "CervoMedium", serif; margin: 0px 5px; display: block; width: 100%; line-height: 44px; text-decoration: none; text-transform: uppercase; } nav.nav__inPage ul li a:hover{ opacity: 0.7; } .accordionTitle{ background-color: var(--lijnmlightgray); color: var(--lijnmblack); cursor: pointer; padding: 10px 5px; width: calc(100% - 10px); text-align: left; line-height: 1em; border: none; outline: none; transition: 0.4s; margin: 0 !important; } .accordionTitle:after { content: '\02795'; /* Unicode character for "plus" sign (+) */ font-size: 13px; color: var(--lijnmblack); position: absolute; right: 15px; margin-top: 2px; } .accordionTitle.active:after{ content: "\2796"; /* Unicode character for "minus" sign (-) */ } .accordionContent{ /*padding: 0 5px; width: calc(100% - 10px); margin: 0 !important; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;*/ padding: 0 5px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; margin-bottom: 10px; } .accordionContent iframe{ max-width: 100% !important; } .pageHeader{ display: none; } .breadcrums{ width: 100%; background-color: var(--lijnmwhite); position: relative; } .breadcrums p{ display: block; margin: 0 10px; line-height: 30px; color: var(--lijnmdarkgray) } .pageTitle{ font-size: var(--fontsizegridtitleBig); text-transform: uppercase; margin: 0px 10px 0px 10px; } .product__var__slider{ /* display: none !important;*/ position: relative !important; width: calc(100% - 10px); height: 120px; padding: 0px 5px; margin: 20px 0px; z-index: 100; } .product__var__slider.active{ display: block !important; pointer-events: all; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .product__var__slider .frame{ margin: 0px 5px 0 0; text-align: center; } .product__var__slider .frame p{ width: calc(80px - 20px); } .product__var__slider img{ margin: 0px 0px 5px 0; height: 80px; width: auto; border: 1px solid var(--lijnmlightgray); } .product__var__slider img.selected{ border-color: var(--lijnmgreen); } .filterBar{ text-align: left; position: relative; float: left; width: calc(100% - 10px); padding: 0px 5px; background-color: var(--lijnmlightgray); } .filterBar p{ line-height: 44px; font-family: "CervoMedium", serif; } .filterBar img.filterIcon{ height: 22px; vertical-align: middle; width: unset; } .filterOptions{ -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.3); box-shadow: 0 0 5px 0 rgba(0,0,0,0.3); position: fixed; width: 200px; height: calc(100vh - 40px); top: 0px; background-color: var(--lijnmwhite); left: -100vw; overflow: hidden; float: left; padding: 20px 5px; z-index: 109; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .filterInner{ position: relative; height: 100%; width: 100%; overflow: scroll; } .filterOptions.active{ left: 0px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .filterOptions img.closeFilter{ position: absolute; right: 12px; top: 42px; width: 22px; height: auto; } .filterOptions img.closeFilter:hover{ opacity: 0.7; cursor: pointer; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .filterOptions .filterItem{ width: 100%; margin-top: 15px; float: left; clear: both; } .filterOptions .filterItem label{ width: 100%; display: inline-block; float: left; clear: both; font-family: "CervoMedium"; text-transform: uppercase; margin-top: 5px; } .filterOptions .filterAction{ display: inline-block; margin: 0 0 4px 0; line-height: 1em; cursor: pointer; } .filterOptions .filterContent{ display: inline-block; width: 100%; float: left; line-height: 1em; } .filterOptions .filterAction{ line-height: 22px; display: block; width: 100%; } .filterOptions .filterAction:nth-child(n+5):not(.active){ display: none; } .filterContent.showAll .filterAction:nth-child(n+4){ display: block; } .filterOptions .filterAction.filterColor{ width: 100%; } .filterOptions .filterAction .color{ vertical-align: middle; display: inline-block; border-radius: 100%; -webkit-border-radius: 100%; width: 22px; height: 22px; margin-right: 10px; border: 1px solid var(--lijnmdarkgray); opacity: 0.3; } .filterOptions .filterAction:not(.filterColor){ color: var(--lijnmdarkgray); padding: 0px 5px; width: calc(100% - 10px); position: relative; } .filterOptions .filterAction.active:not(.filterColor){ color: var(--lijnmgreen); padding-left: 15px; } .filterOptions .filterAction.active:not(.filterColor)::before{ content: '\2713'; position: absolute; left: 0; top: 0; width: 15px; height: 22px; } .filterOptions .filterAction.active .color{ opacity: 1; } .filterOptions .filterItem select{ display: inline-block; width: calc(100% - 40px); padding: 0px 20px; height: 30px; border: 0px; float: left; background-color: var(--lijnmlightgray); } .marginBottomButton{ float: left; margin-top: 10px; } .filterOptions .btnSaveFilter{ } /* SHOPPINGCART */ .shoppingcart__row{ position: relative; margin: 0px 5px; width: calc(100% - 5px - 5px); float: left; clear: both; padding: 10px 0 5px 0; border-bottom: 1px solid var(--lijnmlightgray); } .shoppingcart__row.fatBorder{ border-bottom:3px solid var(--lijnmlightgray); } .shoppingcart__image{ width: 50px; margin-right: 10px; float: left; } .shoppingcart__row.productRow .shoppingcart__image{ height: 50px; } .shoppingcart__image img{ width: 50px; margin: 0px; } .shoppingcart__content{ width: 150px; margin-right: 10px; float: left; } .shoppingcart__row.productRow .shoppingcart__content, .shoppingcart__row.productRow .shoppingcart__right{ padding-top: 0px; } .shoppingcart__right{ width: calc(100% - 150px - 50px - 10px - 10px - 20px); float: left; } .shoppingcart__right .trash{ width: 15px; float: right; cursor: pointer; } .shoppingcart__right.priceOutput p{ font-size: var(--fontSizeHead2); } .shoppingcart__right.priceOutput p.priceBig{ font-size: var(--fontSizePriceBig); color: var(--lijnmgreen); } .shoppingcart__row select{ display: inline-block; width: calc(100% - 40px); padding: 0px 20px; height: 30px; border: 0px; float: left; background-color: var(--lijnmlightgray); } .cadeaubonHolder label{ display: inline-block; float: left; clear: both; font-family: "CervoMedium"; text-transform: uppercase; } .cadeaubonHolder .inputCode{ height: 44px; border: 0; margin: 10px 0px; padding: 0px 20px; background-color: var(--lijnmlightgray); width: calc(100% - 40px); font-family: "CervoMedium", serif; text-transform: uppercase; font-size: var(--fontSizeCadeauBon); } .client__form{ width: calc(100% - 10px - 20px); margin: 5px; } .client__form.isForm{ margin: 10px !important; } .client__form .form-control{ width: 100%; clear: both; float: left; margin: 15px 0 0 0; } .client__form .streetHit{ display: none; padding: 5px 30px; clear: both; float: left; margin: 0px 0 15px 0; background-color: var(--lijnmlightgray); } .client__form .streetHit.active{ display: inline-block; } .client__form .form-control.half.first{ clear: both; } .client__form .form-control.postal{ width: 90px; clear: both; margin-right: 5px; } .client__form .form-control.countryHide{ display: none; } .client__form span.required{ color: var(--lijnmlightgray); font-size: var(--fontSizeRequiredSmall); text-transform: none; } .client__form .form-control.housenumber{ width: 170px; clear: none; } .client__form .form-control.error{ background-color: transparent !important; } .client__form .form-control.error input{ border: 1px solid var(--colorWeakPwd); } .client__form label{ position: relative; display: inline-block; width: 100%; font-family: "CervoMedium", serif; text-transform: uppercase; } .client__form label.label__radio{ width: unset; font-family: "CervoLight", serif; text-transform: unset; margin: 5px 20px auto 0; } input[type=number], input[type=tel]{ -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; float: left; height: 36px; margin: 0 5px 5px 0; padding: 0px 8px; border: 1px solid var(--lijnmlightgray); width: 60px; font-size: var(--fontSizeInput); font-family: "CervoLight", serif; } .shopAmount{ margin-top: 10px !important; text-align: center; } .client__form input[type=text], .client__form input[type=number], .client__form input[type=email], .client__form input[type=password], .client__form textarea{ -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; float: left; height: 36px; margin: 0 0 5px 0; padding: 0px 8px; border: 1px solid var(--lijnmlightgray); width: calc(100% - 16px); font-size: var(--fontSizeInput); font-family: "CervoLight", serif; } .client__form textarea{ height: 120px; padding: 8px; } .client__form select{ display: inline-block; border: 1px solid var(--lijnmblack); padding: 0px 20px; height: 36px; float: left; background-color: var(--lijnmlightgray); } .client__form input.smallInput, .smallLabel{ width: 80px; } .client__form input.half, .client__form label.half{ width: 50%; clear: none; } .client__form .verzendGegevensChange.hide{ display: none; } .client__form .verzendOptie.hide{ display: none; } .client__form .verzendOptie{ position: relative; float: left; } .errorMessages { margin: 0px 5px; } .errorMessages p, .errorColor{ color: var(--colorWeakPwd); font-family: "CervoLight"; } .succeedMessages p, .succeedColor{ color: var(--lijnmgreen); font-family: "CervoLight"; } .getPickup{ width: 170px; height: 70px; padding: 5px 10px; position: relative; float: left; margin: 0px 5px 5px 0px; border: 1px solid var(--lijnmlightgray); } .getPickup:hover{ cursor: pointer; border: 1px solid var(--lijnmblack); } .pickupList.loading{ padding: 70px 0px 50px 0; height: 300px; float: left; position: relative; } .pickupList.loading::before{ position: absolute; content: ' '; top: 0; left: 0; width: 50px; height: 50px; background-image: url('../images/loading-spinner.gif'); background-size: contain; } .pwStrength.strong{ color: var(--colorStrongPwd); } .pwStrength.average{ color: var(--colorAveragePwd); } .pwStrength.weak{ color: var(--colorWeakPwd); } .paymentChooser{ position: relative; min-height: 44px; float: left; width: calc(100% - 10px); margin: 0px; border-bottom: 1px solid var(--lijnmlightgray); } .paymentChooser p{ margin: 7px 0px; line-height: 30px; } .paymentChooser .subPaymentData{ display: none; margin-left: calc(44px + 20px); padding: 5px 0px 10px 0px; float: left; } .paymentChooser.active .subPaymentData{ display: block; } .paymentChooser:hover, .paymentChooser.active{ background-color: var(--lijnmlightgray); cursor: pointer; } .paymentChooser span.imageHolder{ position: relative; display: inline-block; width: 44px; margin-right: 20px; } .paymentChooser img{ vertical-align: middle; max-height: 30px; max-width: 44px; object-fit: contain; object-position: center; } .paymentLoading, .orderLoading{ box-sizing: border-box; padding: 20px; text-align: center; position: relative; width: 100%; background-color: var(--lijnmwhite); border: 1px solid var(--lijnmlightgray); border-radius: 20px; height: 200px; } .orderLoading{ pointer-events: none; opacity: 0; box-sizing: border-box; padding: 20px; text-align: center; position: fixed; top: 105px; left: 25px; height: calc(100vh - 130px); width: calc(100vw - 50px); background-color: var(--lijnmwhite); border: 1px solid var(--lijnmlightgray); border-radius: 20px; } .orderLoading.active{ pointer-events: all; opacity: 1; } .paymentLoading img, .orderLoading img{ width: 50px; height: auto; } .loadSchedule{ } .loadAgenda{ height: 30px; display: none; } .agendaDayChooser{ width: 200px; margin: 4px 0; padding: 4px 10px; position: relative; display: block; border: 1px solid var(--lijnmdarkgray); } .agendaDayChooser:hover{ cursor: pointer; } .agendaDayChooser .aanwezig{ color: var(--lijnmgreen); } .agendaDayChooser .busy{ color: var(--lijnmerror); } .showMoreTimes{ display: none; } .showMoreTimes.active, .showMoreTimes.active a{ display: block; } .showMoreTimes.active a{ width: 200px; } .showMoreTimes.active{ margin-bottom: 2px; } .agendaTimeChooser{ width: 150px; margin: 4px 0; padding: 4px 10px; position: relative; display: block; border: 1px solid var(--lijnmdarkgray); } .agendaTimeChooser.active{ background-color: var(--lijnmgreen); color: var(--lijnmwhite); } .afhalenTimeChooser{ width: 150px; margin: 4px 0; padding: 4px 10px; position: relative; display: block; border: 1px solid var(--lijnmdarkgray); } .afhalenTimeChooser.active{ background-color: var(--lijnmgreen); color: var(--lijnmwhite); } .agendaDayChooser .agendaPossibilities{ display: none; } .agendaDayChooser.active .agendaPossibilities{ display: block; } .agendaForm{ display: none; margin-top: 20px; } .agendaForm.active{ display: block; } .agendaReservation{ position: fixed; z-index:99; top: 60px; right: 0px; background-color: var(--lijnmgreen); height: 20px; padding: 0px 5px; width: 40px; display: none; line-height: 20px; color: var(--lijnmwhite); } .agendaForm .colorGreen{ color: var(--lijnmgreen); } .agendaReservation.active{ display: block; } /* FOOTER */ footer{ width: calc(100% - 32px); clear: both; position: relative; float: left; padding: 140px 16px calc(80px + 40px + 60px) 16px; background-color: var(--lijnmdarkgray); text-align: left; } footer .footerCluster .return{ width: 100%; height: 20px; display: block; } footer.footerPage{ margin-top: 40px; padding: 40px 16px calc(80px + 40px + 60px) 16px; } footer .scrollUp{ position: fixed; bottom: 80px; z-index: 99; right: 20px; height: 44px; width: 44px; line-height: 44px; border-radius: 100%; -webkit-border-radius: 100%; opacity: 0; text-align: center; font-size: var(--fontsizeTopLink); background-color: var(--lijnmwhite); color: var(--lijnmblack); font-family: "CervoMedium", serif; text-transform: uppercase; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.3); box-shadow: 0 0 5px 0 rgba(0,0,0,0.3); } .tomFooter footer .scrollUp{ display :none !important; pointer-events: none !important; } footer .scrollUp:before{ content: " "; width: 20px; background-image: url('../images/icon-arrow-up.svg'); background-repeat: no-repeat; background-position: center center; background-size: contain; height: 20px; position: absolute; top: 12px; left: 12px; } footer .scrollUp.active{ opacity: 1; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } footer p.kop1{ font-size: var(--fontSizeHead1) } footer p.kop2{ font-size: var(--fontSizeHead2); margin-bottom: 0; } footer p, footer p a{ color: var(--lijnmwhite) } footer p{ margin-bottom: 1em; } footer .openingstijden{ display: none; width: 100%; } footer .openingstijden span{ min-width: 80px; display: inline-block; } footer .openingstijden.active{ display: block; color: var(--lijnmgreen) } footer .openingstijden.show{ display: block; } footer .brand__logo{ margin: 0 0 40px 0; width: 150px; height: auto; } .showAllDays{ cursor: pointer; text-decoration: underline; margin: 0; font-size: var(--fontsizegridtext) } /* BUTTONS */ input { border-radius: 0; } input[type=submit], input[type=button]{ -webkit-appearance: none; display: inline-block; padding: 0px 16px; line-height: 36px; height: 36px; margin: 0; font-size: var(--fontSizeButton); font-family: "CervoMedium", serif; color: var(--lijnmwhite); background-color: var(--lijnmdarkgray); border: 1px solid var(--lijnmwhite); text-decoration: none; } input[type=submit]:active, input[type=button]:active{ background-color: var(--lijnmlightgray); } input[type=submit].buttonPay{ color: var(--lijnmerror); background-color: transparent; padding: 0; } .button{ display: inline-block; padding: 0px 16px; line-height: 36px; font-size: var(--fontSizeButton); color: var(--lijnmwhite); border: 1px solid var(--lijnmwhite); text-decoration: none; } .button:hover{ text-decoration: none; cursor: pointer; color: var(--lijnmlightgray); border: 1px solid var(--lijnmlightgray); } .button.dark{ color: var(--lijnmdarkgray); border-color: var(--lijnmdarkgray); } .button.dark:hover{ color: var(--lijnmblack); border-color: var(--lijnmblack); } .button.darkFill{ background-color: var(--lijnmdarkgray); border-color: var(--lijnmdarkgray); color: var(--lijnmwhite); } .button.darkFill:hover{ background-color: var(--lijnmblack); border-color: var(--lijnmdarkgray); color: var(--lijnmwhite); } .button.green{ background-color:var(--lijnmgreen); color: var(--lijnmwhite); border-color: var(--lijnmgreen); } .button.green:hover{ color:var(--lijnmgreen); background-color: var(--lijnmwhite); } input.green{ background-color:var(--lijnmgreen); color: var(--lijnmwhite); border-color: var(--lijnmgreen); } .button.btnConfigurator{ padding-left: 45px; background-image: url('../images/icon-configurator.svg'); background-position: 10px center; background-repeat: no-repeat; background-size: 22px auto; margin-top: 10px; display: inline-block; left: 10px; position: relative; } .button.shoppingcart{ padding-left: 45px; background-image: url('../images/icon-shopping-add.svg'); background-position: 10px center; background-repeat: no-repeat; background-size: 22px auto; } .button.shoppingcart.added{ color: var(--lijnmgreen); border: 1px solid var(--lijnmgreen); background-image: url('../images/icon-shopping-added.svg'); } .button.dark.btnDiensten{ margin-bottom: 10px; -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.5); box-shadow: 0 0 5px 0 rgba(0,0,0,0.5); border: 0 !important; border-radius: 10px; -webkit-border-radius: 10px; } .button.dark.btnDiensten:hover{ background-color: var(--lijnmlightgray); } .button.btnAddAku{ clear: unset; text-align: center; } .button.btnAddAku.selected{ border: 1px solid var(--lijnmgreen) !important; } .grid{ width:100%; margin-left: 10px; } .grid-item { float: left; } .grid-item img { display: block; max-width: 100%; } .filters{ text-align: center; text-transform: uppercase; color: var(--lijnmdarkgray); display: block; font-size: 13px; text-decoration: none; } .filters a.filter{ color: var(--lijnmdarkgray); margin: 0; } .filters a.filter.active{ color: var(--lijnmgreen) !important; } .grid-sizer, .grid-item { width: calc(50% - 20px); margin-bottom: 20px; } .grid-item { float: left; } .grid-item img { display: block; max-width: 100%; } .popupCustom{ z-index: 9999; position: absolute; width: 320px; text-align: center; left: calc(50vw - (320px / 2)); top: 100px; padding: 20px; box-sizing: border-box; background-color: #FFF; border: 1px solid var(--lijnmdarkgray); } .frameZaagservice{ display: none; } .frameZaagservice.active{ display: block; } .frameZaagservice textarea{ width: 240px; height: 140px; } section.section__grid:not(.homeFullPage) .button { color: var(--lijnmdarkgray); border: 1px solid var(--lijnmdarkgray); } @media screen and (min-width: 1200px){ section.section__grid .grid__item.webshopDetail .shoppingcart.button{ /* position: absolute;*/ right: 10px; margin-top: -25px; } .popupCustom{ width: 500px; left: calc(50vw - (500px / 2)); } /* ---- .grid-item ---- */ .grid-sizer, .grid-item { width: calc(25% - 20px); margin-bottom: 20px; } .grid-item { float: left; } .grid-item img { display: block; max-width: 100%; } .filters{ text-align: center; text-transform: uppercase; color: var(--lijnmdarkgray); display: block; font-size: 13px; text-decoration: none; } .filters a.filter{ color: var(--lijnmdarkgray); margin: 0; } .filters a.filter.active{ color: var(--lijnmgreen) !important; } :root { /* FONT SIZES */ --lijnmbodyfontsize: 17px; --fontsizeStorySlider: 12px; --fontSizeHead1: 26px; --fontSizeHead2: 20px; --fontSizeMenuMain: 18px; --fontSizeMenuSub: 16px; --fontsizeHeaderBig: 60px; --fontsizeHeaderContent: 22px; --fontsizeHeaderDesktopTitle: 20px; --fontsizeDesktopTitleMain: 30px; --fontsizeDesktopTitleSub: 22px; --fontsizeDesktopIntro: 20px; --fontsizegridtitleBig: 32px; --fontsizegridtitle: 18px; --fontsizegridtitleSmall: 18px; --fontsizegridtitleSub: 15px; --fontsizegridtext: 17px; --fontsizePopup: 22px; --fontSizePriceBig: 22px; --fontSizeButton: 17px; --fontsizetopnav: 20px; --fontsizeTopLink: 20px; --fontSizeCadeauBon: 24px; --fontSizeInput: 20px; --fontSizeRequiredSmall: 13px; --fontSizeRequiredSmall: 13px; } .agendaReservation{ top: 90px; } .hideMobile{ display: block; } .showMobile{ display: none; } body.bodyHome{ padding-top: 80px; } body.bodyPage{ padding-top: 80px; } .bodyWrap{ margin-bottom: 55px; } /* NAV */ nav.nav__homeMain{ display: none; } nav.nav__homeMain a{ color: var(--lijnmdarkgray); } nav.nav__homeMain a.active{ border-bottom: 2px solid var(--lijnmdarkgray); } .pagination__fp{ display: none; } .bodyHome nav.nav__main, nav.nav__main{ top: 0px; height: 80px; width: 1015px; z-index: 200; position: fixed; right: calc(50% - (1015px / 2)); margin: 0 auto; text-align: right; overflow: visible; background-color: transparent; pointer-events:none; } nav.nav__main ul{ display: block; position: absolute; width: 100%; right: 170px; top: 0; margin: 0; background-color: transparent; } nav.nav__main ul.loggedIn{ right: 200px; } nav.nav__main ul li, nav.nav__main a{ pointer-events:all ; } nav.nav__main ul li:hover{ cursor: pointer; } nav.nav__main ul li ul.nav__sub{ display: none; width:280px; top: 80px; position: absolute; left: 0; /*max0height: calc(100vh - 80px);*/ overflow-y: auto; text-align: left; -webkit-transition: none; -moz-transition:none; -o-transition: none; transition:none; } nav.nav__main ul li.hasSub:hover ul.nav__sub{ display: block; } nav.nav__main ul li ul.nav__sub li a { margin: 0; display: block; line-height: 44px; } nav.nav__main ul li ul.nav__sub li{ line-height: 44px; background-color: var(--lijnmwhite); border-bottom: 1px solid var(--lijnmlightgray); position: relative; padding: 0px 20px; width: calc(100% - 0px); float: left; } nav.nav__main ul li { display: inline-block !important; width: unset; line-height: 80px; position: relative; } nav.nav__main .bottomMenu { position: relative; float: right; line-height: 80px; padding: 0; margin: 0; } nav.nav__main .bottomMenu.toggleSearch img { margin-right: 0px !important } nav.nav__main .bottomMenu span{ display: none; } nav.nav__main .bottomMenu .shoppingtotal, .shoppingtotal{ position: absolute; text-align: center; color: var(--lijnmblack); font-size: 11px; line-height: 22px; width: 17px; bottom: 25px; top: 13px; left: 0px; } .page__top{ height: 80px; } .page__top .top__icon, .page__top .hamburger{ display: none; } nav.nav__main ul li a { font-family: "CervoMedium", serif; text-transform: uppercase; } nav.nav__main ul li:hover a{ color: var(--lijnmgreen); } nav.nav__main ul li ul.nav__sub li:hover a{ color: var(--lijnmgreen); } .brand__logo__toppage{ margin: 0 0 0 calc(50% - (1015px /2)) ; padding: 10px 0; height: 60px; text-align: left; width: auto; display: inline-block; } .brand__logo__toppage img{ margin: 0px 0px; width: auto; height: 60px; } .popup{ left: calc(50vw - 200px); width: 400px; } .search{ left: calc(50vw - 200px); width: 400px; } /* SECTIONS AND DATA */ .section__grid__home__slider{ display: none !important; } .responsiveCluster{ width: 1015px; margin: 0 auto; } .responsiveClusterSmall{ width: 740px; margin: 0 auto; } footer{ padding: 55px 0; width: 100%; } footer .responsiveCluster{ display: flex; align-items: start; justify-content: space-between; } footer .footerCluster{ width: 220px; position: relative; float: left; } footer hr{ display: none; } .header__home__headers{ width: 100%; position: relative; height: 615px; z-index: 2; } .header__home__headers .slick-prev{ margin-left: 100px; } .header__home__headers .slick-next{ margin-right: 100px; } .header__home__headers .slider{ width: 1015px !important; height: 615px !important; display: flex !important; align-items: center; justify-content: center; text-align: center; } .header__home__headers .slider div{ z-index: 4; position: relative; } .header__home__headers p{ display: none; } .header__home__headers .slick-active p{ display: block; } .header__home__headers .slider p{ font-family: 'CervoMedium'; color: var(--lijnmwhite); font-size: var(--fontsizeHeaderContent); } .header__home__headers .slider p.title{ font-family: 'CervoMedium'; text-transform: uppercase; font-size: var(--fontsizeHeaderBig); } .header__home__headers .slider img{ position: absolute; left: 0; width: 100%; top: 50px; height: 515px; object-fit: cover; z-index: 1; } .header__home__headers .slick-active img{ top: 0px; height: 615px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .header__home__headers .slider .hover{ position: absolute; left: 0; width: 100%; top: 50px; height: 515px; background-color: var(--lijnmwhite); opacity: 0.5; pointer-events: none; z-index: 2; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .header__home__headers .slick-active .hover{ opacity: 0; height: 615px; top: 0; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } article.article__homeMain{ width: 100%; position: relative; margin-top: -50px; padding: calc(50px + 55px) 0 55px 0; background-color: var(--lijnmlightgray); z-index: 1; } article.article__homeMain .responsiveCluster{ display: flex; justify-content: space-between; } article.article__homeMain .homeFrame{ width: 220px; text-align: center; } article.article__homeMain .homeFrame .homeDesktopTitle{ font-family: "CervoMedium"; text-transform: uppercase; font-size: var(--fontsizeHeaderDesktopTitle); } article.article__homeMain .homeFrame .homeImage{ width: 220px; height: 220px; } article.article__homeMain .homeFrame .homeImage:hover img{ opacity: 0.8; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } article.article__homeMain .homeFrame .homeImage img{ width: 220px; height: 220px; object-fit: cover; object-position: center; } article.article__homeIntro{ width: 100%; position: relative; padding: 55px 0; background-color: var(--lijnmwhite); z-index: 2; text-align: center; } article.article__homeIntro h2{ font-size: var(--fontsizeDesktopTitleSub); } .article__homeIntro p{ margin-bottom: 1em; font-size: var(--fontsizeDesktopIntro); } .article__homeIntro p:last-child{ margin-bottom: 0; } .desktopPageHead:before{ content: ' '; position: absolute; z-index: 1; left: 0; top: calc(var(--fontsizeDesktopTitleMain)/2); height: 1px; width: 100%; background-color: var(--lijnmdarkgray); } .desktopPageHead{ font-size: var(--fontsizeDesktopTitleMain) !important; line-height: var(--fontsizeDesktopTitleMain) !important; position: relative; width: 100%; text-align: center; display: inline-block; font-family: "CervoMedium", serif; text-transform: uppercase; z-index: 2; } .desktopPageHead span{ display: inline-block; padding: 0px 5px; background-color: var(--lijnmwhite); position: relative; z-index: 3; } .homeRefKader{ width: 100%; display: flex; align-items: start; justify-content: space-between; } .kaderRating{ width: 220px; } .refAuthor{ color: var(--lijnmlightgrayRef); } .pageHeader{ display: block; position: relative; width: 100%; height: 420px; object-position: center; object-fit: cover; } .pageTitle.mainTitle{ position: absolute; top: 260px; width: 400px; left: calc(50% - 200px); color: var(--lijnmwhite); text-align: center; margin: 0; } section.section__grid:not(.homeFullPage){ float: left; position: relative; width: 1015px; margin: 0 calc(50% - (1015px / 2)) !important; } section.section__grid.catMainer{ width: calc((1015px / 4) * 1) !important; margin: 0 0 0 calc(50% - (1015px / 2)) !important; } section.section__grid.catMainer p{ margin-right: 10px; margin-left: 0; } section.section__grid.grid__products{ padding-top: 0px; width: calc((1015px / 4) * 3) !important; margin: 0 calc(50% - (1015px / 2)) 0 0 !important; } .breadcrums{ width: 1015px; margin: 30px calc(50% - (1015px / 2)) 0 calc(50% - (1015px / 2)) !important; } .breadcrums p{ margin: 0 0; } .pageTitle { font-size: var(--fontsizegridtitleBig); text-transform: uppercase; margin: 0 10px 0 calc(50% - (1015px / 2) + 0px); } .filterOptions{ position: relative; float: left; top: unset; height: unset; width: calc(100% - 10px); left: 0; -webkit-box-shadow: none; box-shadow: none; padding: 20px 5px 20px 0; } .filterOptions .filterAction:not(.filterColor) { padding: 0; } .filterOptions .filterItem select { display: inline-block; width: calc(100% - 20px); padding: 0px 10px; } .filterInner { position: relative; height: 100%; width: 100%; overflow: visible; } .filterInner .closeFilter{ display: none; } section.section__grid .grid__item { width: calc((1015px / 4) * 1); box-sizing: border-box; margin: 0px 0px 0px 0px; position: relative; float: left; } section.section__grid .grid__item .grid__image { width: calc(((1015px / 4) * 1) - 20px) ; height: calc(((1015px / 4) * 1) - 20px) ; position: relative; z-index: 1; margin: 10px 10px 1em 10px; } section.section__grid .grid__item .grid__image img { object-fit: cover; object-position: center; width: calc(((1015px / 4) * 1) - 20px) ; height: calc(((1015px / 4) * 1) - 20px) ; } section.section__grid .grid__item.horizontal { width: calc(1015px - 0px); height: calc((1015px / 2) - 0px); margin: 0px; position: relative; float: left; } section.section__grid .grid__item.horizontal .grid__image { width: calc(((1015px / 4) * 1) - 20px) !important ; height: calc(((1015px / 4) * 1) - 20px) !important ; position: relative; z-index: 1; margin: 10px 10px 1em 10px; } section.section__grid .grid__item.horizontal .grid__image img{ width: calc(1015px - 0px) ; height: calc((1015px / 2) - 0px) ; } section.section__grid .grid__item.full .grid__image{ width: calc(1015px - 0px); height: calc(1015px - 0px); position: relative; z-index: 1; margin: 0; } section.section__grid .grid__item.full .slick__slider .slide .grid__image{ /*position: absolute;*/ } section.section__grid .grid__item.full .slick__slider .slide { z-index: 10; position: relative; width: calc(1015px - 0px); height: calc(1015px - 0px); display: flex; align-items: center; } section.section__grid .grid__item.full .slick__slider { position: relative; width: 100%; height: calc(1015px - 0px); } section.section__grid .grid__item.full { width: calc(1015px - 0px); height: calc(1015px - 0px); margin: 0 0 20px 0; } section.section__grid .grid__item.full44 .grid__image{ width: calc(1015px - 0px); height:calc(1015px - 0px); position: relative; z-index: 1; margin: 0 !important; } section.section__grid .grid__item.full .grid__image img{ object-fit: cover; object-position: center; width: calc(1015px - 0px); height: calc(1015px - 0px); } .section__grid__home__slider section.section__grid .grid__item.full .grid__image img{ object-fit: cover; object-position: center; width: 100%; height: calc((1015px / 2) - 0px); } section.section__grid .grid__item.full44 .grid__image img{ object-fit: cover; object-position: center; width: 100%; height: calc((1015px / 2) - 0px); } section.section__grid .grid__item.full .grid__text{ position: absolute; left: 20px; width: calc(100% - 40px); text-align: center; top: calc(50% - 50px); z-index: 10; color: var(--lijnmwhite) } section.section__grid .grid__item.webshop:nth-child(-n+3) { border-top: 1px solid var(--lijnmlightgray); } section.section__grid .grid__item.webshop:nth-child(2n) { border-right: 1px solid var(--lijnmlightgray); } section.section__grid .grid__item.webshop:nth-child(3n-2) { border-left: 1px solid var(--lijnmlightgray); } section.section__grid .grid__item.webshop:nth-child(6n) { border-right: 1px solid var(--lijnmlightgray); } section.section__grid .grid__item.webshopDetail{ border: 0px !important; width: 1015px; } section.section__grid .grid__item.text { width: 100%; } section.section__grid .grid__item.text .kop1 { margin-top: 20px; margin-bottom: 0 !important; margin-left: 0px; margin-right: 0px; } section.section__grid .grid__item.text p, section.section__grid .grid__item.text h1, section.section__grid .grid__item.text h2 { margin-left: 0px; margin-right: 0px; } .productContent{ width: calc(1015px / 2) !important; position: absolute;right: 0; top: 0; } section.section__grid .grid__item.webshopDetail .shoppingcart.button { position: relative; right: unset; float: left; clear: both; margin-top: 10px; } .productContent.zaagservice .shoppingcart.button{ margin-top: unset !important; } .shoppingcart__right{ } .shoppingcart__content { width: 350px; } .shoppingcart__right { width: calc(100% - 350px - 50px - 10px - 10px - 20px); } .product__var__slider{ clear: both; float: left; margin-top: 20px; margin-left: 5px; } section.section__grid .grid__item.webshopDetail img.bookmark { position: absolute; top: 20px; left: 20px; clear: both; } section.section__grid .grid__item.webshopDetail .optionColors { clear: both; float: left; margin:20px 10px 0px 10px; } section.section__grid .grid__item.full44 { width: 1015px; height: auto; margin: 0 0 20px 0; } .client__form, .desktop__frame { width: 1015px; margin: 20px auto; } .client__form.isForm{ width: 600px; margin: 0px !important; } .desktop__frame .shoppingcart__row{ margin: 0; } section.section__grid .grid__item.full44 .slick__slider{ width: calc((1015px / 2) - 2px) !important; height: calc((1015px / 2) - 2px) !important; border: 1px solid var(--lijnmlightgray); overflow: hidden; margin-bottom: 50px; } section.section__grid .grid__item.webshopDetail.full44 .grid__image{ width: calc(1015px / 2); height: calc(1015px / 2); margin: 0 !important; } section.section__grid .grid__item.full44 .grid__image { width: calc(1015px / 2); height: calc(1015px / 2); } section.section__grid .grid__item.full44 .grid__image img { width: calc(1015px / 2); height: calc(1015px / 2); } section.section__grid .grid__item.full44 .grid__text { left: 600px; height: 300px; width: calc(1200px - 600px); text-align: center; top: 0px; color: var(--lijnmdarkgray); display:flex; align-items: center; justify-content: center; } section.section__grid:not(.homeFullPage) .button{ color: var(--lijnmdarkgray); border: 1px solid var(--lijnmdarkgray); } .button.green { border: 0 !important; background-color: var(--lijnmgreen) !important; color: var(--lijnmwhite) !important; }.button.green:hover { border: 0 !important; color: var(--lijnmgreen) !important; background-color: var(--lijnmwhite) !important; } .accordionTitle { padding: 10px 25px; width: calc(100% - 50px); } }/* Slider */ .slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; position: relative; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: calc(50% - 11px); left: 0; display: block; width: 22px; height: 22px; margin-top: -10px; padding: 0; cursor: pointer; color: transparent; border: none; outline: none; background: url('/assets/images/arrow_left.png') 0px 0px no-repeat; background-size: 100% 100%; z-index: 10; } .slick-next{ left: unset; right: 0; background: url('/assets/images/arrow_right.png') 0px 0px no-repeat; background-size: 100% 100%; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-dots { position: absolute; bottom: 10px; display: block; width: 100%; padding: 0; list-style: none; z-index: 20; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 12px; height: 12px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 12px; height: 12px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-family: 'slick'; line-height: 20px; position: absolute; top: 0; left: 0; width: 10px; height: 10px; -webkit-border-radius: 6px; border-radius: 6px; content: ' '; text-align: center; opacity: 1; border: 1px solid rgba(0,0,0,0.4); background-color: rgba(255,255,255,1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: 1; background-color: rgba(255,255,255,1); border: 1px solid rgba(0,0,0,1); }.pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 1500; -webkit-text-size-adjust: 100%; /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ -webkit-backface-visibility: hidden; outline: none; } .pswp * { -webkit-box-sizing: border-box; box-sizing: border-box; } .pswp img { max-width: none; } /* style is added when JS option showHideOpacity is set to true */ .pswp--animate_opacity { /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ opacity: 0.001; will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--open { display: block; } .pswp--zoom-allowed .pswp__img { /* autoprefixer: off */ cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .pswp--zoomed-in .pswp__img { /* autoprefixer: off */ cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .pswp--dragging .pswp__img { /* autoprefixer: off */ cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* Background is added as a separate element. As animating opacity is much faster than animating rgba() background-color. */ .pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .pswp__container, .pswp__zoom-wrap { -ms-touch-action: none; touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .pswp__zoom-wrap { position: absolute; width: 100%; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; /* for open/close transition */ -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp__bg { will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { -webkit-transition: none; transition: none; } .pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } .pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; } /* stretched thumbnail or div placeholder element (see below) style is added to avoid flickering in webkit/blink when layers overlap */ .pswp__img--placeholder { -webkit-backface-visibility: hidden; } /* div element that matches size of large image large image loads on top of it */ .pswp__img--placeholder--blank { background: #222; } .pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0; } /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #CCC; } .pswp__error-msg a { color: #CCC; text-decoration: underline; } .navnav *, .navnav *::after, .navnav *::before, .navnav, .navnav:after, .navnav:before { box-sizing: border-box; list-style: none; } .navnav a:hover, .navnav li:hover, .cd-primary-nav .cd-secondary-nav a:hover{ color: rgb(97,182,128); } @media only screen and (max-width: 1169px) { body.nav-on-left.overflow-hidden { overflow: hidden; } } img { /* make images responsive */ max-width: 100%; } input[type="search"]::-ms-clear { /* removes close icon - IE */ display: none; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } /* -------------------------------- Main components -------------------------------- */ .cd-main-content, .cd-main-header { /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); will-change: transform; } .cd-main-content, .cd-main-header { position: relative; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } @media only screen and (max-width: 1169px) { .cd-main-content.nav-is-visible, .cd-main-header.nav-is-visible { -webkit-transform: translateX(-260px); -moz-transform: translateX(-260px); -ms-transform: translateX(-260px); -o-transform: translateX(-260px); transform: translateX(-260px); } .nav-on-left .cd-main-content.nav-is-visible, .nav-on-left .cd-main-header.nav-is-visible { -webkit-transform: translateX(260px); -moz-transform: translateX(260px); -ms-transform: translateX(260px); -o-transform: translateX(260px); transform: translateX(260px); } } .cd-main-content { position: fixed; top: 0; left: 0; width: 100%; min-height: 100vh; z-index: 180; pointer-events: none; } .cd-main-header { height: 55px; background: #ffffff; z-index: 3; border-bottom: 1px solid var(--lijnmlightgray); } .nav-is-fixed .cd-main-header { /* add .nav-is-fixed class to body if you want a fixed navigation on > 1170px */ position: fixed; top: 0; left: 0; width: 100%; } .showNavMobile{ } @media only screen and (min-width: 1170px) { .showNavMobile{ display: none; } .cd-main-header { height: 80px; } .cd-main-header::after { clear: both; content: ""; display: table; } } .cd-logo { position: absolute; top: 6px; left: 5%; height: calc(50px - 12px); } .cd-logo img { display: block; height: 100%; width: auto; } @media only screen and (max-width: 1169px) { .nav-on-left .cd-logo { left: auto; right: 5%; } } @media only screen and (min-width: 1170px) { .cd-logo { top: 12px; left: 4em; height: calc(80px - 24px); } } .cd-header-buttons { vertical-align: middle; position: absolute; display: inline-block; top: 5px; right: 5%; margin: 1em 0; padding-left: 0px; } .cd-header-buttons li { display: inline-block; } @media only screen and (max-width: 1169px) { .nav-on-left .cd-header-buttons { right: auto; left: 5%; } .nav-on-left .cd-header-buttons li { float: right; } } @media only screen and (min-width: 1170px) { .cd-header-buttons { top: 5px; right: 4em; } } .cd-account-trigger, .cd-shoppingcart-trigger, .cd-favorite-trigger { display: none; } .cd-shoppingcart-trigger, .cd-favorite-trigger, .cd-search-trigger { width: 20px; display: block !important; margin-left: 4px; } .showNavMobile .cd-shoppingcart-trigger, .showNavMobile .cd-favorite-trigger, .showNavMobile .cd-search-trigger { width: unset !important; } .cd-nav-trigger { width: 40px; height: 16px; display: inline-block; } @media only screen and (min-width: 1170px) { .cd-search-trigger, .cd-nav-trigger, .cd-account-trigger, .cd-shoppingcart-trigger, .cd-favorite-trigger { position: relative; display: block; width: 44px; height: 44px; overflow: hidden; white-space: nowrap; /* hide text */ color: transparent; z-index: 3; } .cd-search-trigger img, .cd-account-trigger img, .cd-shoppingcart-trigger img, .cd-favorite-trigger img { height: 22px; width: auto; vertical-align: middle; margin: 10px 0 0; } } /* .cd-search-trigger::before, .cd-search-trigger::after { !* search icon *! content: ''; position: absolute; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; !* Force Hardware Acceleration in WebKit *! -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-search-trigger::before { !* lens *! top: 11px; left: 11px; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #2e3233; } .cd-search-trigger::after { !* handle *! height: 3px; width: 8px; background: #2e3233; bottom: 14px; right: 11px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .cd-search-trigger span { !* container for the X icon *! position: absolute; height: 100%; width: 100%; top: 0; left: 0; } .cd-search-trigger span::before, .cd-search-trigger span::after { !* close icon *! content: ''; position: absolute; display: inline-block; height: 3px; width: 22px; top: 50%; margin-top: -2px; left: 50%; margin-left: -11px; background: #2e3233; opacity: 0; !* Force Hardware Acceleration in WebKit *! -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; } .cd-search-trigger span::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .cd-search-trigger span::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .cd-search-trigger.search-is-visible::before, .cd-search-trigger.search-is-visible::after { !* hide search icon *! opacity: 0; } .cd-search-trigger.search-is-visible span::before, .cd-search-trigger.search-is-visible span::after { !* show close icon *! opacity: 1; } .cd-search-trigger.search-is-visible span::before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .cd-search-trigger.search-is-visible span::after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } */ .cd-nav-trigger span, .cd-nav-trigger span::before, .cd-nav-trigger span::after { /* hamburger icon in CSS */ position: absolute; display: inline-block; height: 2px; width: 24px; background: var(--lijnmdarkgray); } .cd-nav-trigger span { /* line in the center */ position: absolute; top: 50%; right: 10px; margin-top: -2px; -webkit-transition: background 0.3s 0.3s; -moz-transition: background 0.3s 0.3s; transition: background 0.3s 0.3s; } .cd-nav-trigger span::before, .cd-nav-trigger span::after { /* other 2 lines */ content: ''; right: 0; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform 0.3s 0.3s; -moz-transition: -moz-transform 0.3s 0.3s; transition: transform 0.3s 0.3s; } .cd-nav-trigger span::before { /* menu icon top line */ top: -6px; } .cd-nav-trigger span::after { /* menu icon bottom line */ top: 6px; } .cd-nav-trigger.nav-is-visible span { /* hide line in the center */ background: rgba(46, 50, 51, 0); } .cd-nav-trigger.nav-is-visible span::before, .cd-nav-trigger.nav-is-visible span::after { /* keep visible other 2 lines */ background: #2e3233; } .cd-nav-trigger.nav-is-visible span::before { -webkit-transform: translateX(4px) translateY(-3px) rotate(45deg); -moz-transform: translateX(4px) translateY(-3px) rotate(45deg); -ms-transform: translateX(4px) translateY(-3px) rotate(45deg); -o-transform: translateX(4px) translateY(-3px) rotate(45deg); transform: translateX(4px) translateY(-3px) rotate(45deg); } .cd-nav-trigger.nav-is-visible span::after { -webkit-transform: translateX(4px) translateY(2px) rotate(-45deg); -moz-transform: translateX(4px) translateY(2px) rotate(-45deg); -ms-transform: translateX(4px) translateY(2px) rotate(-45deg); -o-transform: translateX(4px) translateY(2px) rotate(-45deg); transform: translateX(4px) translateY(2px) rotate(-45deg); } @media only screen and (min-width: 1170px) { .cd-nav-trigger { display: none; } } .cd-primary-nav{ list-style: none; z-index: 185; } .cd-primary-nav, .cd-primary-nav ul { position: fixed; top: 0; right: 0; height: 100%; width: 260px; background: var(--lijnmwhite); overflow: auto; -webkit-overflow-scrolling: touch; z-index: 1; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; z-index: 185; } .cd-primary-nav a, .cd-primary-nav ul a { display: block; height: 50px; line-height: 50px; padding: 0 16px; text-decoration: none; font-size: var(--fontSizeMenuMain); text-decoration: none; font-family: 'CervoLight'; color: var(--lijnmdarkgray); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid #3a3f40; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); will-change: transform, opacity; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } .cd-primary-nav ul{ padding: 0; } .cd-primary-nav ul.is-hidden { padding: 0; } .cd-primary-nav.is-hidden, .cd-primary-nav ul.is-hidden { /* secondary navigations hidden by default */ -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .cd-primary-nav.moves-out > li > a, .cd-primary-nav ul.moves-out > li > a { /* push the navigation items to the left - and lower down opacity - when secondary nav slides in */ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } @media only screen and (max-width: 1169px) { .nav-on-left .cd-primary-nav, .nav-on-left .cd-primary-nav ul { right: auto; left: 0; } } .cd-primary-nav .see-all a { /* different style for the See all button on mobile and tablet */ } .cd-primary-nav .cd-nav-gallery .cd-nav-item, .cd-primary-nav .cd-nav-icons .cd-nav-item { /* items with picture (or icon) and title */ height: 80px; line-height: 80px; } .cd-primary-nav .cd-nav-gallery .cd-nav-item h3, .cd-primary-nav .cd-nav-icons .cd-nav-item h3 { overflow: hidden; text-overflow: ellipsis; } .cd-primary-nav .cd-nav-gallery .cd-nav-item { padding-left: 90px; } .cd-primary-nav .cd-nav-gallery .cd-nav-item img { position: absolute; display: block; height: 40px; width: auto; left: 20px; top: 50%; margin-top: -20px; } .cd-primary-nav .cd-nav-icons .cd-nav-item { padding-left: 75px; } .cd-primary-nav .cd-nav-icons .cd-nav-item p { color: #2e3233; font-size: 1.3rem; /* hide description on small devices */ display: none; } .cd-primary-nav .cd-nav-icons .cd-nav-item::before { /* item icon */ content: ''; display: block; position: absolute; left: 20px; top: 50%; margin-top: -20px; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center center; background-size: 40px 40px; } @media only screen and (max-width: 1169px) { .cd-primary-nav { /* by default .cd-primary-nav is hidden - trick for iOS devices where you can see the navigation if you pull down */ visibility: hidden; -webkit-transition: visibility 0s 0.3s; -moz-transition: visibility 0s 0.3s; transition: visibility 0s 0.3s; padding: 0; margin: 0; } .cd-primary-nav.nav-is-visible { visibility: visible; -webkit-transition: visibility 0s 0s; -moz-transition: visibility 0s 0s; transition: visibility 0s 0s; } } @media only screen and (min-width: 1170px) { .cd-primary-nav { position: static; margin: 0; padding: 0 280px 0 0; height: auto; width: auto; float: right; overflow: visible; background: transparent; } .cd-primary-nav::after { clear: both; content: ""; display: table; } .cd-primary-nav.moves-out > li > a { /* reset mobile style */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .cd-primary-nav ul { position: static; height: auto; width: auto; background: transparent; overflow: visible; z-index: 3; } .cd-primary-nav ul.is-hidden { /* reset mobile style */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .cd-primary-nav ul.moves-out > li > a { /* reset mobile style */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .cd-primary-nav > li { float: left; margin-left: 2em; list-style: none; } .cd-primary-nav > li > a { /* main navigation buttons style */ position: relative; display: inline-block; height: 80px; line-height: 80px; padding: 0 10px; font-size: var(--fontSizeMenuMain); text-decoration: none; text-transform: uppercase; font-family: 'CervoMedium'; color: var(--lijnmblack); overflow: visible; border-bottom: none; -webkit-transition: color 0.3s, box-shadow 0.3s; -moz-transition: color 0.3s, box-shadow 0.3s; transition: color 0.3s, box-shadow 0.3s; } .cd-primary-nav > li > a:hover { } .cd-primary-nav > li > a.selected { } .cd-primary-nav .go-back, .cd-primary-nav .see-all { display: none; } .cd-primary-nav .cd-secondary-nav, .cd-primary-nav .cd-nav-gallery, .cd-primary-nav .cd-nav-icons { /* dropdown menu style */ position: absolute; top: 80px; width: 100vw; background: #ffffff; padding: 48px 64px; box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .cd-primary-nav .cd-secondary-nav::after, .cd-primary-nav .cd-nav-gallery::after, .cd-primary-nav .cd-nav-icons::after { clear: both; content: ""; display: table; } .cd-primary-nav .cd-secondary-nav.is-hidden, .cd-primary-nav .cd-nav-gallery.is-hidden, .cd-primary-nav .cd-nav-icons.is-hidden { opacity: 0; visibility: hidden; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .cd-primary-nav .cd-secondary-nav > .see-all, .cd-primary-nav .cd-nav-gallery > .see-all, .cd-primary-nav .cd-nav-icons > .see-all { /* this is the BIG See all button at the bottom of the dropdown menu */ display: block; position: absolute; left: 0; bottom: 0; height: 80px; width: 100%; overflow: hidden; /* reset some inherited style */ margin: 0; padding: 0; } .cd-primary-nav .cd-secondary-nav > .see-all a, .cd-primary-nav .cd-nav-gallery > .see-all a, .cd-primary-nav .cd-nav-icons > .see-all a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; font-size: 2.2rem; font-weight: bold; text-align: center; line-height: 80px; border-top: 1px solid #e2e3df; /* reset some inherited style */ border-bottom: none; margin: 0; padding: 0; -webkit-transition: color 0.2s, background 0.2s, border 0.2s; -moz-transition: color 0.2s, background 0.2s, border 0.2s; transition: color 0.2s, background 0.2s, border 0.2s; } .cd-primary-nav .cd-secondary-nav > .see-all a:hover, .cd-primary-nav .cd-nav-gallery > .see-all a:hover, .cd-primary-nav .cd-nav-icons > .see-all a:hover { background: #2e3233; border-color: #2e3233; color: #ffffff; } .cd-primary-nav .cd-secondary-nav > li { /* change the height according to your needs - you can even set height: auto */ height: 270px; /* here you set the number of columns - use width percentage */ width: 17%; float: left; margin-right: 2.66%; /* border-right: 1px solid #e2e3df;*/ overflow: hidden; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .cd-primary-nav .cd-secondary-nav > li:nth-child(5n-4) { /* +2 because we have 2 list items with display:none */ margin-right: 0; border-right: none; } .cd-primary-nav .cd-secondary-nav > li > a { /* secondary nav title */ font-family: "CervoMedium", serif; text-transform: uppercase; text-decoration: none; /*font-size: 1.6rem;*/ font-size: 19px; margin-bottom: .6em; } .cd-primary-nav .cd-secondary-nav a { height: 30px; line-height: 30px; padding: 0 13% 0 0; color: var(--lijnmblack); border-bottom: none; /*font-size: 1.2rem;*/ font-size: 19px; text-decoration: none; } .cd-primary-nav .cd-secondary-nav a:hover { } .cd-primary-nav .cd-secondary-nav ul { /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .cd-primary-nav .cd-secondary-nav ul ul { /* tertiary navigation */ position: absolute; top: 0; left: 0; height: 100%; width: 100%; padding: 0; } .cd-primary-nav .cd-secondary-nav ul ul.is-hidden { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .cd-primary-nav .cd-secondary-nav ul ul .go-back { display: block; } .cd-primary-nav .cd-secondary-nav ul ul .go-back a { color: transparent; } .cd-primary-nav .cd-secondary-nav ul ul .see-all { display: block; } .cd-primary-nav .cd-secondary-nav .moves-out > li > a { /* push the navigation items to the left - and lower down opacity - when tertiary nav slides in */ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .cd-primary-nav .cd-nav-gallery li { /* set here number of columns - use width percentage */ width: 18%; float: left; margin: 0 4% 40px 0; } .cd-primary-nav .cd-nav-gallery li:nth-child(4n+2) { /* +2 because we have two additional list items with display:none */ margin-right: 0; } .cd-primary-nav .cd-nav-gallery .cd-nav-item { border-bottom: none; padding: 0; height: auto; line-height: 1.2; } .cd-primary-nav .cd-nav-gallery .cd-nav-item img { position: static; margin-top: 0; height: auto; width: 100%; margin-bottom: .6em; } .cd-primary-nav .cd-nav-gallery .cd-nav-item h3 { font-weight: bold; padding: 0 .4em; } .cd-primary-nav .cd-nav-icons li { /* set here number of columns - use width percentage */ width: 32%; float: left; margin: 0 2% 20px 0; } .cd-primary-nav .cd-nav-icons li:nth-child(3n+2) { /* +2 because we have two additional list items with display:none */ margin-right: 0; } .cd-primary-nav .cd-nav-icons .cd-nav-item { border-bottom: none; height: 80px; line-height: 1.2; padding: 24px 0 0 85px; position: relative; } .cd-primary-nav .cd-nav-icons .cd-nav-item:hover { background: #f6f6f5; } .cd-primary-nav .cd-nav-icons .cd-nav-item h3 { font-weight: bold; } .cd-primary-nav .cd-nav-icons .cd-nav-item p { display: block; } .cd-primary-nav .cd-nav-icons .cd-nav-item::before { left: 25px; } } .has-children > a, .go-back a { position: relative; } .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after { /* arrow icon in CSS - for element with nested unordered lists */ content: ''; position: absolute; top: 50%; margin-top: -1px; display: inline-block; height: 2px; width: 10px; background: #464c4e; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .has-children > a::before, .go-back a::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .has-children > a::after, .go-back a::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } @media only screen and (min-width: 1170px) { .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after { background: #c9cbc4; } .has-children > a:hover::before, .has-children > a:hover::after, .go-back a:hover::before, .go-back a:hover::after { } } .has-children > a { padding-right: 40px; } .has-children > a::before, .has-children > a::after { /* arrow goes on the right side - children navigation */ right: 20px; -webkit-transform-origin: 9px 50%; -moz-transform-origin: 9px 50%; -ms-transform-origin: 9px 50%; -o-transform-origin: 9px 50%; transform-origin: 9px 50%; } .cd-primary-nav .go-back a { padding-left: 40px; } .cd-primary-nav .go-back a::before, .cd-primary-nav .go-back a::after { /* arrow goes on the left side - go back button */ left: 20px; -webkit-transform-origin: 1px 50%; -moz-transform-origin: 1px 50%; -ms-transform-origin: 1px 50%; -o-transform-origin: 1px 50%; transform-origin: 1px 50%; } @media only screen and (min-width: 1170px) { .has-children > a::before, .has-children > a::after { right: 15%; } .cd-primary-nav > .has-children > a { /* main navigation arrows on larger devices */ padding-right: 30px !important; } .cd-primary-nav > .has-children > a::before, .cd-primary-nav > .has-children > a::after { width: 9px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; background: #c9cbc4; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: width 0.3s, -webkit-transform 0.3s; -moz-transition: width 0.3s, -moz-transform 0.3s; transition: width 0.3s, transform 0.3s; } .cd-primary-nav > .has-children > a::before { right: 12px; } .cd-primary-nav > .has-children > a::after { right: 7px; } .cd-primary-nav > .has-children > a.selected::before, .cd-primary-nav > .has-children > a.selected::after { width: 14px; } .cd-primary-nav > .has-children > a.selected::before { -webkit-transform: translateX(5px) rotate(-45deg); -moz-transform: translateX(5px) rotate(-45deg); -ms-transform: translateX(5px) rotate(-45deg); -o-transform: translateX(5px) rotate(-45deg); transform: translateX(5px) rotate(-45deg); } .cd-primary-nav > .has-children > a.selected::after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .cd-secondary-nav > .has-children > a::before, .cd-secondary-nav > .has-children > a::after { /* remove arrows on secondary nav titles */ display: none; } .cd-primary-nav .go-back a { padding-left: 20px; } .cd-primary-nav .go-back a::before, .cd-primary-nav .go-back a::after { left: 1px; } } .cd-search { position: absolute; height: 50px; width: 100%; top: 50px; left: 0; z-index: 3; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .cd-search form { height: 100%; width: 100%; } .cd-search input { border-radius: 0; border: none; background: #ffffff; height: 100%; width: 100%; padding: 0 5%; box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(0, 0, 0, 0.05); -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .cd-search input::-webkit-input-placeholder { color: #c9cbc4; } .cd-search input::-moz-placeholder { color: #c9cbc4; } .cd-search input:-moz-placeholder { color: #c9cbc4; } .cd-search input:-ms-input-placeholder { color: #c9cbc4; } .cd-search input:focus { outline: none; } .cd-search.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .nav-is-fixed .cd-search { position: fixed; } @media only screen and (min-width: 1170px) { .cd-search { height: 120px; top: 80px; } .cd-search input { padding: 0 2em; font-size: 3.2rem; font-weight: 300; } } .cd-overlay { /* shadow layer visible when navigation is active */ position: fixed; z-index: 2; height: 100%; width: 100%; top: 0; left: 0; cursor: pointer; background-color: rgba(0, 0, 0, 0.2); visibility: hidden; opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s; transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s; pointer-events: none; } .cd-overlay.is-visible { opacity: 1; pointer-events: all; visibility: visible; -webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s; transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s; } @media only screen and (max-width: 1169px) { .cd-overlay.is-visible { -webkit-transform: translateX(-260px); -moz-transform: translateX(-260px); -ms-transform: translateX(-260px); -o-transform: translateX(-260px); transform: translateX(-260px); } .nav-on-left .cd-overlay.is-visible { -webkit-transform: translateX(260px); -moz-transform: translateX(260px); -ms-transform: translateX(260px); -o-transform: translateX(260px); transform: translateX(260px); } .cd-overlay.is-visible.search-is-visible, .nav-on-left .cd-overlay.is-visible.search-is-visible { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } /* -------------------------------- support for no js -------------------------------- */ .no-js .cd-primary-nav { position: relative; height: auto; width: 100%; overflow: visible; visibility: visible; z-index: 2; } .no-js .cd-search { position: relative; top: 0; opacity: 1; visibility: visible; } @media only screen and (min-width: 1170px) { .no-js .cd-primary-nav { position: absolute; z-index: 3; display: inline-block; width: auto; top: 0; right: 150px; padding: 0; } .no-js .nav-is-fixed .cd-primary-nav { position: fixed; } } .cd-main-header{ position: fixed; top: 0; width: 100%; z-index: 185; }