/* ------------------------------ @website: WOLFSGANG KANTOORINRICHTERS @version: 2.0 @author: Cybox @date: Juli 2025 ------------------------------ */ /** * Owl Carousel v2.2.1 * Copyright 2013-2017 David Deutsch */ .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#1e1f20}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} /* clearfix */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; } /* BODY */ body { --black: #010101; --green: #cbe86b; --dark-green: #627f00; --beige: #f8f3e4; } body { display: flex; flex-direction: column; font-family: "Source Sans 3", sans-serif; font-size: 20px; color: var(--black); line-height: 1.2; background-color: #fff; } body span, body div { /*font-weight: normal!important;*/ } h1, h2, h3, h4, h5, h6 { font-family: "Source Serif 4", serif; font-weight: 700; } h1, a:hover, a.active { } /*a { color: ; }*/ ul, ul li { margin: 0; padding: 0; } .notice { position: fixed; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; transform: translateY(0%); transition: all ease 0.15s; z-index: 1000; background-color: var(--green); } .notice.non_active { transform: translateY(100%); } .notice-container { display: flex; justify-content: center; padding: 19px 0 20px 0; width: 90%; } .notice-container > span { display: flex; align-items: center; padding-right: 0; font-size: 18px; color: #fff; } .notice-container > span img { position: relative; top: -2px; margin-top: -14px; margin-bottom: -14px; width: 28px; height: 28px; margin-right: 12px; } .notice-container > span a { display: inline-block; color: #fff; } .notice-container > span a:hover { opacity: 0.8; } .notice-close { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; right: 0; width: 60px; height: 100%; cursor: pointer; } .notice-close:hover { opacity: 0.6; } .notice-close img { width: 16px; height: 16px; } #topbg { display: none; } #wrapper { position: relative; display: flex; flex-direction: column; width: 100%; /*max-width: 1400px;*/ padding: 0; min-height: 0; overflow: hidden; } #cookieprefs { position: fixed; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background-color: rgba(0,0,0,0.5); } .darken { position: fixed; width: 100%; height: 100%; background: #ea641c; z-index: 8; pointer-events: none; opacity: 0; transition: all 700ms; } #cookieprefs-modal { position: relative; width: 450px; max-width: 90%; /* right: 20px; */ bottom: 0; padding: 30px; box-sizing: border-box; font-size: 17px; color: var(--black); font-weight: 700; line-height: 1.4; border-radius: 5px; box-sizing: border-box; background-color: #fff; box-shadow: 0px 0px 30px rgba(0,0,0,0.1); -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: transform 600ms ease-in-out; } #cookieprefs h1 { margin-bottom: 15px; color: #929496; font-size: 32px; font-weight: 400; line-height: 1; } #cookieprefs p { margin-bottom: 10px; } #cookieprefs p a:hover { color: var(--black); } #cookieprefs p a { color: var(--green); } #cookieprefs a.cookies_accept { display: block; padding: 15px 28px; cursor: pointer; width: auto; background: #26451c; color: #fff; margin-top: 30px; border: 0; font-size: 1.2em; text-align: center; appearance: none; -webkit-appearance: none; font-weight: 700; line-height: 1; text-transform: uppercase; border-radius: 3px; background-color: var(--green); } #kiek-container { position:relative; z-index:10; } .menu-mobile-wrapper { display:none; } .toggle-menu-mobile { display:none; } /* topmenu */ .topmenu { float:left; width:100%; /*background-color:#36ce4d;*/ background-color:#efefef; } .topmenu ul { margin:0 auto; width:90%; max-width:1400px; } .topmenu ul li { float:left; margin:0; padding:0; } .topmenu ul li:before { display:inline-block; content:"|"; color:rgba(0,0,0,0.6); margin:0 12px; } .topmenu ul li:first-child:before { content:none; } .topmenu ul li a { display:inline-block; padding:15px 0; font-size:13px; color:rgba(0,0,0,0.8); font-weight:bold; } .topmenu ul li a:hover { color:rgba(0,0,0,0.4); } .topmenu ul li a.active { color:rgba(0,0,0,0.4); } /* HEADER */ #header-top { padding-bottom: 1px; width: 100%; height: 50px; /*border-bottom: 1px solid #f5f6fa;*/ box-sizing: border-box; } #header-top-container { display: flex; justify-content: flex-end; margin: 0 auto; width: 90%; max-width: 1400px; height: 100%; } #header-top-container ul { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 15px; height: 100%; font-size: 16px; color: var(--black); letter-spacing: 0; box-sizing: border-box; } #header-top-container ul.contact { gap: 21px; padding-left: 30px; color: #fff; border-bottom-left-radius: 5px; background-color: var(--black); } #header-top-container ul.contact:after { position: absolute; top: 0; left: 30px; width: calc(100% + 500px); height: 100%; content: ""; z-index: -1; background-color: var(--black); } #header-top-container ul li { } #header-top-container ul li img { position: relative; display: inline-block; top: 2px; margin-right: 8px; width: 14px; height: 14px; filter: invert(1); } #header-top-container ul.usps li img { } /*#header-top-container ul.contact li img { opacity: 0.5; }*/ #header-top-container ul.websites li:not(:first-of-type) a { font-weight: 700; } #header-top-container ul li a { color: #fff; } #header-top-container ul li a:hover { opacity: 0.6; } #header-top-container ul li a.form { text-decoration: underline; } #header-top-container ul li a.form:hover { text-decoration: none; } #header-top-container ul li a span { display: inline-block; margin: -5px 0; font-size: 18px; color: var(--green); /* line-height: 1; */ font-weight: 700 !important; } #header-top-container ul.topnav li { } #header-top-container ul.topnav li:before { margin: 0 15px; content: "|"; opacity: 0.25; } #header-top-container ul.topnav li.blog { order: 1; } #header-top-container ul.topnav li:nth-of-type(2):before { content: none; } #header-top-container ul.topnav li:last-of-type { order: 2; } #header-top-container ul.topnav li a { font-size: 16px; font-weight: 700; letter-spacing: 0; } #header { position: relative; width: 100%; height: 100px; background-position: center; background-size: cover; background-repeat: no-repeat; } #header-container { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 0 auto; width: 90%; max-width: 1400px; height: 100%; } /* logo */ #logo { display: none; } #headerlogo { position: relative; display: block; top: -30px; left: 0; margin-right: 0; padding: 0; opacity: 1; width: 220px; z-index: 1; /*background-color: #fff;*/ background-position: center; background-size: contain; background-repeat: no-repeat; } #headerlogo:before { position: absolute; top: -10px; left: -3px; width: 30px; height: 20px; /*content: "";*/ z-index: -1; background-color: #fff; } #headerlogo a { display: flex; align-items: center; width: 100%; height: 100%; } #headerlogo a img { display: block; width: 100%; } #headerlogo > span { display: none; } /* zoeken */ .sideblock.search { margin: 0; padding: 0; box-sizing:border-box; font-size: 14px; background-color: #fff; } .sideblock.search h2 { margin-bottom:10px; font-size:14px; line-height:normal; } .sideblock.search .form { position: relative; display: flex; width: 448px; height: 46px; } .sideblock.search .form input[type=text] { position: relative; margin: 0; padding: 0 15px 0 20px; width: 100%; font-family: "Source Sans 3", sans-serif; font-size: 16px; color: #999; letter-spacing: 0; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; box-shadow: none!important; } .sideblock.search .form input.button { position: absolute; top: 0; right: 0; margin: 0; padding: 0 5px; width: 54px; height: 46px; font-family: "Source Sans 3", sans-serif; font-size: 0; color: #fff; border-radius: 0 !important; border-top-right-radius: 5px !important; border-bottom-right-radius: 5px !important; box-sizing: border-box; filter: invert(1); background-color: #fff !important; background-image: url(../images/icons/icon-search.svg) !important; background-position: center right 19px !important; background-size: 16px !important; background-repeat: no-repeat !important; } .sideblock.search .form input.button:hover { opacity: 0.9; box-shadow: none!important; } /* Bel voor meer.. */ #header #belvoormeer { position:relative; display:block; float:right; margin-top:0!important; margin-left:60px; padding: 19px 0 19px 75px!important; width:295px; content:''; font-size:14px; color:var(--black); line-height:21px; text-align:left!important; border-radius:3px; box-sizing:border-box; /*background-image:url(../images/icon-contact-dark.png);*/ background-color:#fff; background-position:34px 21px; background-size:auto 28px; background-repeat:no-repeat; } #header #belvoormeer a { color:var(--green); } #header #belvoormeer a:hover { color:var(--black); } /* MENU */ .menu-basket-wrapper { display: flex; align-items: center; justify-content: flex-end; width: auto; } /* menu */ #menu { position: relative; display: flex; flex-direction: column; justify-content: center; top: 0; left: auto; right: 0; margin: 0; padding: 0; width: auto; height: 100%; box-sizing: border-box; z-index: 2; } #menu ul li a:hover { background-color:rgba(255,255,255,0.15); } #menu ul li a.active { color:var(--black); background-color:#fff; } #menu ul.pagesmenu { float: left; margin-left: 0; } #menu ul.pagesmenu li { float: left; margin: 0; font-size: 21px; font-weight: 400; border-right: 1px solid rgba(255,255,255,0.25); } #menu ul.pagesmenu li a { display: block; padding: 13px 20px 14px 20px; color: var(--black); } #menu ul.usermenu { display: flex; margin-right: 0; min-width: 0; color: var(--black); border-radius: 0; } #menu ul.usermenu li { display: flex; align-items: center; margin: 0; padding: 0; } #menu ul.usermenu li.username { DISPLAY: NONE; padding: 15px 20px; } #menu ul.usermenu li:after { position: relative; top: 0; right: 0; margin: 0 15px; width: 1px; height: 100%; content: ""; background-color: #f4f4f4; } #menu ul.usermenu li a { position: relative; display: flex; align-items: center; justify-content: center; top: -8px; padding: 32px; font-size: 0; color: var(--black); background-position: center; background-size: 24px; background-repeat: no-repeat; } #menu ul.usermenu li a:after { position: absolute; bottom: 0; font-size: 12px; font-weight: 500; } #menu ul.usermenu li a.login { background-image: url(../images/icons/icon-login.png); } #menu ul.usermenu li a.signup { background-image: url(../images/icons/icon-register.png); background-size: 22px; } #menu ul.usermenu li.myacc a { background-image: url(../images/icons/icon-user.png); } #menu ul.usermenu li.logout a { background-image: url(../images/icons/icon-logout.png); } #menu ul.usermenu li a:hover { opacity: 0.6; } #menu ul.usermenu li a.login:after { content: "Inloggen"; } #menu ul.usermenu li a.signup:after { content: "Registreren"; } #menu ul.usermenu li.myacc a:after { content: "Account"; } #menu ul.usermenu li.logout a:after { content: "Uitloggen"; } /* winkelmandje */ #header #basket { position: relative; display: flex; align-items: center; justify-content: flex-end; margin: 0; padding: 0; width: 64px; height: 100%; color: var(--black); background-color: transparent; } #header #basket a { height:auto; } #header #basket .title { margin-bottom:0; font-size:16px; } #header #basket .icon { position: relative; display: flex; align-items: center; justify-content: center; top: -8px; margin-top: 0px; width: 64px; height: 64px; border-radius: 5px; } #header #basket .icon img { margin: 0; width: 24px; } #header #basket .summary { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } #header #basket .summary:after { position: absolute; bottom: 0; content: "Winkelwagen"; font-size: 12px; color: var(--black); font-weight: 500; } #header #basket .summary span.totalquantity { position: absolute; display: flex; align-items: center; justify-content: center; top: 10px; right: 10px; padding-left: 1px; width: 19px; height: 19px; font-size: 12px; color: var(--black); font-weight: 700 !important; line-height: 1; border-radius: 50%; /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); */ box-sizing: border-box; background-color: var(--green); } #header #basket .summary span.price { position: absolute; DISPLAY: NONE; } #header #basket .summary .subtotal { white-space: nowrap; } #header #basket .summary .link { DISPLAY: NONE; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 16px; color: var(--black); text-align: center; opacity: 0; transition: opacity ease 0.15s; background-color: rgba(255,255,255,0.9); } #header #basket .summary .link:hover { opacity: 1; } #header #basket .summary .link a { position: absolute; display: block; top: 50%; color: var(--black)!important; text-align: center; font-weight: bold; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #header #basket .icon:hover img, #header #basket .summary:hover:after { opacity: 0.6; } /*#menu ul.usermenu li a, #header #basket { background-color: rgb(239 239 239 / 25%); }*/ /* SIDEBAR LEFT/RIGHT */ #sidebar_left { position: relative; margin: 0; padding: 0; width: 100%; height: 60px; box-sizing: border-box; z-index: 10; background-color: var(--black); } #sidebar_left #menu { /*display: none;*/ } #sidebar_left .close { display: none; } #sidebar_left ul.usermenu { DISPLAY: NONE; } ul.categories { display: flex; justify-content: center; margin: 0 auto; padding: 0; width: 90%; height: 100%; } ul.categories > li { position: relative; overflow: visible; /*transition: all ease 0.15s;*/ } ul.categories > li:first-of-type { padding-left: 0; } ul.categories > li:last-of-type { padding-right: 0; } ul.categories > li:hover, ul.categories > li.active { background-color: var(--green); } ul.categories > li.cat29:before { position: absolute; DISPLAY: NONE; top: -10px; right: 0; padding: 6px 8px; content: "Sale!"; font-size: 12px; color: #fff; font-weight: 700; line-height: 1; text-transform: uppercase; border-radius: 3px; background-color: #000; } ul.categories > li > a { display: flex; align-items: center; margin: 0; padding: 0 15px 2px 15px; height: 100%; font-family: "Source Sans 3", sans-serif; font-size: 19px; color: #fff; font-weight: 500; letter-spacing: 0.25px; box-sizing: border-box; } ul.categories > li:hover > a, ul.categories > li.active > a { color: var(--black); } ul.categories > li.active > a { padding: 0 15px 2px 15px; } ul.categories > li:last-of-type > a { border-bottom: none; } ul.categories li ul { position: absolute; display: block; top: 45px; left: 0; margin: 0; padding: 15px 0 20px 0; /*border-radius: 5px;*/ /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);*/ opacity: 0; visibility: hidden; pointer-events: none; /*transform: translateX(-50%);*/ transition: all ease 0.15s; z-index: 1; background-color: var(--green); } ul.categories li ul.active { display: none; } ul.categories li ul:before { position: absolute; top: -5px; left: 0; right: 0; margin: 0 auto; width: 20px; height: 20px; /*content: "";*/ transform: rotate(45deg); background-color: #fff; } ul.categories li ul:after { position: absolute; top: -8px; left: 0; width: 100%; height: 8px; /*content: "";*/ } ul.categories li ul li:first-child:hover:before { } ul.categories li:hover ul { top: 60px; pointer-events: initial; opacity: 1; visibility: visible; } ul.categories li:hover ul.active { display: block; } ul.categories li:hover ul li:first-child:before { position: absolute; display: block; top: -6px; left: 50%; width: 10px; height: 10px; /*content: "";*/ border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; transform: translateX(-50%) rotate(135deg); background-color: #fff; } ul.categories li ul li { margin:0; padding:0; width:100%; font-size:16px; line-height:24px; } ul.categories li ul li a { display: block; padding: 7px 45px 7px 30px !important; width: 100%; font-size: 19px; color: var(--black); line-height: 1; box-sizing: border-box; background-color: transparent !important; } ul.categories li ul li a:before { margin-right:10px; /*content:"›";*/ } ul.categories li ul li a:hover { opacity: 0.5; } ul.categories li ul.active li a { } ul.categories li ul li a.active { font-weight: 400; opacity: 0.5; } .topmenu { } ul.sidenav { margin-top: 25px!important; width: 100%; border-top: 1px solid #ccc; } ul.sidenav li { margin: 0; padding: 0; width: 100%; border-bottom: 1px solid #ccc; } ul.sidenav li a { display: block; margin: 0; padding: 10px 0; font-size: 15px!important; } ul.sidenav li a.active { margin: 0; padding: 10px 0; color: #727270; } ul.sidenav li a:hover { opacity: 0.6; } .sideblock.custom.fb { } .sideblock.custom.fb .icon { display:inline-block; margin:1px!important; margin-right:15px!important; } .sideblock.custom.twit { display:none; } .sideblock.custom { } .sideblock.custom a { } #sidebar_left.sidebar .sideblock.custom:last-child { padding:15px 0; } #sidebar_left.sidebar .sideblock.custom:last-child img { } /* HEADER-IMAGE */ #header-image { position: relative; margin-top: 30px; width: 100%; height: calc(100vh - 450px); min-height: 450px; max-height: 600px; overflow: hidden; background-color: #efefef; } #header-image:before { position: absolute; top: 0; left: 0; width: 100%; height: 30px; /*content: "";*/ opacity: 0.25; z-index: 2; background: rgb(17, 17, 17); background: linear-gradient(0deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 1) 100%); } #header-image-container { position: absolute; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; left: 0; right: 0; margin: 0 auto; width: 90%; max-width: 1400px; height: 100%; z-index: 2; } #header-image-container .center { position: relative; display: flex; flex-direction: column; align-items: flex-end; text-align: right; } #header-image-container .center:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; border-radius: 50%; opacity: 0.25; filter: blur(30px); z-index: -1; background-color: var(--black); } #header-image-container .center h1 { position: relative; margin-bottom: 0; color: #fff; /*text-shadow: 0 0 60px rgba(0,0,0,1);*/ } #header-image-container .center h1 > span { display: block; line-height: 1; } #header-image-container .center h1 > span.title { position: relative; font-family: "Source Sans 3", sans-serif; font-size: 32px; font-weight: 400!important; line-height: 1.2; letter-spacing: 0; } #header-image-container .center h1 > span.subtitle { margin-top: 30px; font-size: 104px; line-height: 0.9; } #header-image-container .center a.btn { position: relative; display: block; align-items: center; margin-top: 30px; padding: 19px 30px 21px 30px; font-size: 20px; color: #fff; line-height: 1; text-decoration: none; border-radius: 5px !important; box-sizing: border-box; background-color: var(--green); } #header-image-container .center a.btn img { position: relative; top: 1px; margin: -5px -5px -5px 8px; width: 24px; filter: invert(1); } #header-image-container .center a.btn:hover { color: var(--black); background-color: #fff; } #header-image-container .center a.btn:hover img { filter: invert(0); } #header-image-image { position: relative; width: 100%; height: 100%; pointer-events: none; } #header-image-image:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: 1; background-color: rgb(0 0 0 / 25%); } #header-image-image .image { position: absolute; display: flex; flex-direction: column; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; } #header-image-image .image img { display: block; width: 100%; } .owl-dots { display: flex; justify-content: center; bottom: 45px; left: 0; right: 0; margin: 0 auto; width: 1400px; transform: none; } /* CONTENT */ #content { float: none; width: 100%; min-height: 0; } #content.fourofour h1 + br, #content.fourofour h1 + br + br { display: none; } #content.home { border-top: none; } #content-container { display: flex; flex-wrap: wrap; margin: 0 auto; padding: 60px 0 60px 0; width: 90%; max-width: 1400px; min-height: 0; /*min-height: 480px;*/ line-height: 1.5; box-sizing: border-box; } #content-container a { color: var(--dark-green); text-decoration: underline; } #content-container a:hover { text-decoration: none; } #content.home #content-container { padding: 0; } #content.fourofour #content-container { display: inherit; } /* Homepage */ #home-slider { width: 100%; } #home-slider img { display: block; width: 100%; } .owl-dots { position: absolute; bottom: 45px; left: 50%; transform: translateX(-50%); z-index: 2; } .owl-dots button.owl-dot { float: left; margin: 5px; padding: 0; width: 10px; height: 10px; border: none; border-radius: 50%; background-color: var(--green); } .owl-dots button.owl-dot:hover { opacity: 0.9; } .owl-dots button.owl-dot.active { background-color: #fff; } #content .usps { position: relative; } #content .usps:after { position: absolute; top: 0; left: -500px; width: calc(100% + 1000px); height: 100%; /*content: "";*/ z-index: -1; background-color: #f4f4f4; } #content .usps .usps-container { display: flex; flex-wrap: wrap; margin: 0 auto; padding: 90px 0; width: 90%; max-width: 1400px; min-height: 0; line-height: 1.4; box-sizing: border-box; } #content .usps .usps { display: flex; justify-content: center; gap: 0; margin: 0 auto; width: 1200px; } #content .usps .usps .usp { display: flex; flex-direction: column; align-items: center; width: calc(100% / 5); text-align: center; } #content .usps .usps .usp span { font-size: 18px; line-height: 1.4; } #content .usps .usps .usp span img { display: block; margin-bottom: 15px; width: 75px; } #content .usps .usps .usp span strong { display: block; } #content .reviews { position: relative; display: flex; flex-direction: column; align-items: center; padding: 75px 0 90px 0; } #content .reviews:before { position: absolute; top: 0; left: -500px; width: calc(50% + 500px); height: 100%; content: ""; z-index: -1; background: rgb(240,245,250); background: linear-gradient(90deg, rgba(240,245,250,0.5046393557422969) 0%, rgba(240,245,250,1) 100%); } #content .reviews:after { position: absolute; top: 0; left: -500px; width: calc(100% + 1000px); height: 100%; content: ""; z-index: -2; /*background-image: url("../images/voorkant-pand.jpg");*/ background-position: left center; background-size: 50% auto; background-repeat: no-repeat; } #content .reviews h2 { font-size: 32px; } #content .reviews span { text-align: center; } #content .reviews .items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; margin-top: 45px; padding: 0; } #content .reviews .items .item { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 40px; border-radius: 5px; background-color: #fff; } #content .reviews .items .item .review { font-size: 16px; } #content .reviews .items .item .review p { margin: 0; margin-bottom: 10px; } #content .reviews .items .item .review p:last-of-type { margin-bottom: 0; } #content .reviews .items .item .profile { display: flex; gap: 15px; } #content .reviews .items .item .profile .image { display: flex; align-items: center; justify-content: center; width: 60px; aspect-ratio: 1/1; font-size: 28px; color: #fff; font-weight: 500!important; text-align: center; } #content .reviews .items .item .profile .image.none { border-radius: 50%; overflow: hidden; } #content .reviews .items .item .profile .image.green { background-color: #689f38; } #content .reviews .items .item .profile .image img { display: block; width: 100%; } #content .reviews .items .item .profile .rating { display: flex; flex-direction: column; flex: 1; gap: 5px; font-weight: 700!important; width: 100%; } #content .reviews .items .item .profile .rating .name { font-weight: 700!important; } #content .reviews .items .item .profile .rating .stars { display: flex; gap: 2px; } #content .reviews .items .item .profile .rating .stars img { } .commercial { } .commercial figure { display: flex; flex-direction: column; align-items: center; gap: 15px; margin: 0 auto; padding: 75px 0 90px 0; width: 100%; } .commercial figure figcaption { } .commercial figure audio { width: 720px; } #content #homepage { position: relative; margin-bottom: 0; max-width: 100%; } #content #homepage .homepage_textcontent { position: relative; overflow: hidden; transition: all ease 0.25s; } /*#content .homepage_textcontent.active { margin-bottom:35px; padding-bottom:40px; max-height:none; } #content .homepage_textcontent:after { position:absolute; left:0; bottom:0; padding-top:15px; width:100%; color:#999; text-align:center; cursor:pointer; border-bottom:1px solid #ccc; background-color:#fff; } #content .homepage_textcontent:hover:after { color:var(--black); } #content .homepage_textcontent.active:after { content:"Minder -"; }*/ #content .homepage_textcontent h1 { margin-top:6px!important; margin-bottom:25px!important; } #content .homepage_textcontent p { margin: 0; margin-bottom: 20px; } #content .homepage_textcontent p:last-of-type { margin-bottom: 0; } #content .homepage_intro { position: relative; margin: 0 0 60px 0; padding: 90px 5% 90px 5%; width: 100%; font-size: 18px; /* color: #fff; */ line-height: 1.4; text-align: center; box-sizing: border-box; border-radius: 8px; background: #f4f4f4; } #content .homepage_intro:after { position: absolute; top: 0; left: -500px; width: calc(100% + 1000px); height: 100%; content: ""; /* opacity: 0.1; */ z-index: -1; background-color: #f4f4f4; } #content .homepage_intro h2 { margin-bottom: 15px; font-size: 32px; /*color: #fff;*/ font-weight: 700; } #content .homepage_intro p { margin: 0; margin-bottom: 15px; padding: 0; } #content .homepage_intro p strong { font-weight: 700; } #content .homepage_intro ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; margin-top: 30px; margin-left: 0%; padding: 0; padding: 0 30px; padding-top: 30px; width: 100%; border-top: 1px solid rgb(255 255 255 / 25%); box-sizing: border-box; } #content .homepage_intro ul li { margin: 6px 15px; font-size: 21px; list-style: none; } #content .homepage_intro ul li:before { position: relative; display: inline-block; top: 0; margin-right: 10px; width: 20px; height: 20px; content: "✔"; line-height: 1; } #content .homepage_textimage { position: relative; display: flex; flex-wrap: wrap; align-items: center; margin-top: 60px; padding: 60px 0; width: 100%; border-radius: 5px; } #content .homepage_textimage:after { position: absolute; top: 0; /*left: -500px; width: calc(100% + 1000px);*/ left: -150%; width: 450%; height: 100%; content: ""; z-index: -1; background-color: var(--black); } #content .homepage_textimage .text { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 0; padding-left: 0; padding-right: 90px; color: #fff; box-sizing: border-box; } #content .homepage_textimage .text .center { display: flex; flex-direction: column; align-items: flex-start; } #content .homepage_textimage .text .center .title { width: 100%; } #content .homepage_textimage .text .center .title h2 { display: block; margin-bottom: 30px; width: 100%; font-size: 40px; color: #fff; } #content .homepage_textimage .text .center .snippet { width: 80%; color: #fff; } #content .homepage_textimage .text .center .snippet p { margin: 0; margin-bottom: 20px; } #content .homepage_textimage .text .center .snippet p:last-of-type { margin-bottom: 0; } #content .homepage_textimage .text .center .snippet p:last-of-type + ul { margin-top: 20px; } #content .homepage_textimage .text .center .snippet ul { margin: 0; margin-bottom: 20px; } #content .homepage_textimage .text .center .snippet ul { list-style-position: inside; list-style-type: none; } #content .homepage_textimage .text .center .snippet ul:last-of-type { margin-bottom: 0; } #content .homepage_textimage .text .center .snippet ul li { display: flex; gap: 12px; } #content .homepage_textimage .text .center .snippet ul li:before { content: "✔"; } #content .homepage_textimage .text .center .snippet p:last-of-type + ul { margin-top: 20px; } #content .homepage_textimage .text .center .snippet strong { font-weight: 600; } #content .homepage_textimage .text .center .snippet a { color: #fff; } #content .homepage_textimage .text .center a.more { position: relative; margin-top: 35px; padding: 15px 25px 15px 25px; font-size: 18px; color: var(--black); font-weight: 600; line-height: 1; /* text-transform: uppercase; */ text-decoration: none; border-radius: 5px; box-sizing: border-box; background-color: #fff; } #content .homepage_textimage .text .center a.more:hover { opacity: 0.85; } #content .homepage_textimage .image { position: relative; width: 40%; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background-color: #efefef; } #content .homepage_textimage .image h2 { display: none; } #content .homepage_textimage .image img { position: absolute; display: block; width: 100%; height: 100%; object-fit: cover; } #content .homepage_textimage:nth-of-type(even):after { background-color: var(--green); } #content .homepage_textimage:nth-of-type(even) .text { order: 1; padding-left: 60px; padding-right: 0; } #content .homepage_textimage:nth-of-type(even) .text .center .title h2, #content .homepage_textimage:nth-of-type(even) .text .center .snippet { color: var(--black); } #content .homepage_textimage:nth-of-type(even) .text .center .snippet a { color: var(--black); } #content .homepage_textimage:nth-of-type(even) .text .center a.more { color: #fff; background-color: var(--black); } #content .homepage_textimage:nth-of-type(even) .image { order: 2; order: -1; } #content .homepage_textimage.ergonomisch:after { background-color: var(--beige); } #content .homepage_usps { position: relative; margin-bottom: 0; padding: 60px 0; font-size: 21px; } #content .homepage_usps:after { position: absolute; top: 0; left: -500px; width: calc(100% + 1000px); height: 100%; content: ""; z-index: -1; } #content .homepage_usps ul { display: flex; justify-content: center; gap: 60px; margin: 0; padding: 0; } #content .homepage_usps ul li { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } #content .homepage_usps ul li img { position: relative; display: inline-block; top: 0; margin-right: 15px; width: 25px; height: 25px; } #content .homepage_content { padding: 75px 0 90px 0; } #content .homepage_content h2 { margin-bottom: 15px; font-size: 28px; } #content .homepage_content .categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 30px; } #content .homepage_content .categories .category { position: relative; display: flex; padding: 5px 10px; border: 1px solid #ddd; border-radius: 5px; } #content .homepage_content .categories .category a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } #content .homepage_content .categories .category .image { display: flex; align-items: center; justify-content: center; width: 80px; width: 30%; aspect-ratio: 1 / 1; box-sizing: border-box; } #content .homepage_content .categories .category .image img { display: block; width: auto; max-width: 70%; height: auto; max-height: 70%; } #content .homepage_content .categories .category .title { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 0; font-size: 18px; font-weight: 700 !important; line-height: 1.2; box-sizing: border-box; } #content .homepage_content .categories .category a:hover + .image { opacity: 0.7; } #content .homepage_content .categories .category a:hover + .image + .title { opacity: 0.6; } #content .homepage_columns { position: relative; display: flex; gap: 30px; padding: 90px 0; font-size: 18px; font-weight: 700 !important; line-height: 1.4; box-sizing: border-box; } #content .homepage_columns:after { position: absolute; top: 0; left: -500px; width: calc(100% + 1000px); height: 100%; content: ""; z-index: -1; background-color: #f4f4f4; } #content .homepage_columns .column { margin: 0; padding: 45px; border-radius: 5px; box-sizing: border-box; background-color: #fff; } #content .homepage_columns .column h2 { font-size: 28px; } #content .homepage_columns .column h3 { margin-bottom: 15px; font-size: 20px; font-weight: 700; } #content .homepage_columns .column p { margin: 0; margin-bottom: 20px; } #content .homepage_columns .column ul { margin: 0; padding: 0; } #content .homepage_columns .column ul li { margin: 0; padding: 0; list-style: none; } #content .homepage_columns .column ul li.mrgnbttm { margin-bottom: 10px; } #content .homepage_columns .column.tijden ul li strong { display: inline-block; margin-bottom: 5px; width: 105px; font-weight: 700; } /* MAANDAANBIEDING */ #content .homepage_maandaanbieding { margin-top: 60px; padding-top: 60px; border-top: 1px solid #ddd; width: 100%; } #content .homepage_maandaanbieding h2 { display: block; margin-bottom: 30px; width: 100%; font-size: 40px; color: var(--black); font-weight: 400;} #content .homepage_maandaanbieding .split { display: flex; flex-wrap: wrap; width: 100%; } #content .homepage_maandaanbieding .split .left { position: relative; display: flex; flex-direction: column; justify-content: center; order: 2; margin: 1%; margin-right: 0; padding: 48px; width: calc((100% / 3) * 2 - 1%); color: #fff; line-height: 1.5; box-sizing: border-box; z-index: 11; background-color: var(--green); } #content .homepage_maandaanbieding .split .left:after { position: absolute; top: 50%; left: -24px; width: 50px; height: 50px; content: ""; transform: translateY(-50%) rotate(45deg); z-index: 2; background-color: var(--green); } #content .homepage_maandaanbieding .split .left .content { width: 65%; } #content .homepage_maandaanbieding .split .left .content h2 { margin: 0; margin-bottom: 10px; margin-left: -3px; font-size: 48px; color: #fff; font-weight: 400; line-height: 1; text-transform: uppercase; } #content .homepage_maandaanbieding .split .left .content .text { width: 100%; box-sizing: border-box; } #content .homepage_maandaanbieding .split .left .content a { display: inline-block; margin-top: 30px; padding: 15px 20px; font-size: 16px; color: #fff!important; line-height: 1; border-radius: 3px!important; box-sizing: border-box; background-color: var(--black); } #content .homepage_maandaanbieding .split .left .content a:hover { background-color: rgb(43 42 40 / 90%); } #content .homepage_maandaanbieding .split .left .content a span.more:after { display: inline-block; margin-left: 7px; content: "›"; } #content .homepage_maandaanbieding .split .left .content .dates { position: absolute; bottom: 48px!important; right: 50px!important; margin-top: 15px; width: calc(40% - 96px)!important; font-size: 15px; font-style: italic; opacity: 0.8; text-align: right; } #content .homepage_maandaanbieding .split .left .content .dates .date { position: relative; display: inline-block; } #content .homepage_maandaanbieding .split .left .content .dates .date.start { } #content .homepage_maandaanbieding .split .left .content .dates .date.end { } #content .homepage_maandaanbieding .split .left .prices { position: absolute; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; top: 0; right: 8%; width: 250px; height: 250px; font-size: 32px; color: var(--black); font-weight: 700; line-height: 1.2; text-align: center; transform: rotate(10deg); z-index: 100; /*background-image: url("../images/schild.svg");*/ background-position: center; background-size: 100%; background-repeat: no-repeat; } #content .homepage_maandaanbieding .split .left .prices .price { position: relative; display: block; } #content .homepage_maandaanbieding .split .left .prices .price span { } #content .homepage_maandaanbieding .split .left .prices .price span:before { content: "€ "; } #content .homepage_maandaanbieding .split .left .prices .price.original { font-size: 40px; } #content .homepage_maandaanbieding .split .left .prices .price.original span { opacity: 0.8; } #content .homepage_maandaanbieding .split .left .prices .price.original:before { position: absolute; top: 45%; left: -5%; width: 110%; height: 4px; content: ""; transform: rotate(-12deg); background-color: var(--black); } #content .homepage_maandaanbieding .split .left .prices .price.now { margin-bottom: 15px; font-size: 56px; } #content .homepage_maandaanbieding .split .item.carousel { position: relative; order: 1; margin: 1%; margin-left: 0; padding-bottom: calc(100% / 3 - 2%); width: calc(100% / 3 - 1%); height: 0; border: 1px solid #dedede; box-sizing: border-box; } .countdownbar { position: absolute; display: block; bottom: 0; margin-top: 60px; width: 100%; height: 10px; z-index: 11; background-color: lightgrey; } .countdownbar span.innerbar { height:100%; background-color: var(--green); position: relative; display: block; } .countdownbar span.pointer { position: absolute; right: 0; bottom: 25px; padding: 8px 15px; font-size: 15px; color: var(--green); font-weight: 700!important; box-shadow: 0 0 10px rgba(0,0,0,0.25); transform: translateX(50%); border-radius: 3px; white-space: nowrap; background-color: #fff; } .countdownbar span.pointer:after { position: absolute; width: 10px; height: 10px; bottom: -4px; left: 50%; content: ""; transform: translateX(-50%) rotate(45deg); background-color: #fff; } .countdownbar .date { position: absolute; } .countdownbar .date.start { left: 0; } .countdownbar .date.end { right: 0; } #content .homepage_maandaanbieding .split .item.carousel .container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } #content .homepage_maandaanbieding .split .item.carousel .container .label { position: absolute; top: 35px; right: -45px; background-color: var(--black); color: #fff; font-size: 15px; font-weight: 700; padding: 10px 0 12px 0; width: 200px; text-align: center; transform: rotate(45deg); z-index: 10; } #content .homepage_maandaanbieding .split .item.carousel .container .label { top: 20px!important; right: -110px!important; width: 300px!important; background-color: #00634c; position: absolute; color: #fff; font-size: 18px; font-weight: 700; padding: 10px 0 12px 0; width: 300px; text-align: center; transform: rotate(45deg); z-index: 9; background-color: var(--black); } #content .homepage_maandaanbieding .split .item.carousel .container .owl-carousel { position: absolute; padding-bottom: calc(100% - 2px); height: 0; } #content .homepage_maandaanbieding .split .item.carousel .container .owl-carousel .owl-stage-outer { position: absolute; height: 100%; } #content .homepage_maandaanbieding .split .item.carousel .container .owl-carousel .owl-stage-outer .owl-stage { display: flex; align-items: center; justify-content: center; height: 100%; } #content .homepage_maandaanbieding .split .item.carousel .container .owl-carousel .owl-stage-outer .owl-stage .owl-item { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } #content .homepage_maandaanbieding .split .item.carousel .container .owl-carousel .owl-stage-outer .owl-stage .owl-item img { width: auto; height: auto; max-width: 85%; max-height: 85%; } #content .homepage_maandaanbieding .split .item.carousel .container .owl-carousel .owl-dots { DISPLAY: NONE!important; bottom: 25px; } /* HOME BLOCKS */ #content.home #homeblocks { position:relative; left:-1%; margin:0; width:102%; } #content.home #homeblocks .homeblock { margin:1%; height:230px; box-sizing:border-box; } #content.home #homeblocks .homeblock.small { padding:5px 15px; width:calc(100% / 3 - 2%); height:auto; box-sizing:border-box; } #content.home #homeblocks .homeblock.small .foto { margin:9px 0; height:auto; } #content.home #homeblocks .homeblock.small.product .foto { position:relative; margin:0; padding:0; padding-bottom:80%; width:100%; height:0; } #content.home #homeblocks .homeblock.small.product .foto img { position:absolute; top:50%; left:50%; margin:0; max-width:100%; max-height:100%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } #content.home #homeblocks .homeblock.small.product .title { margin-top:0; } #content.home #homeblocks .homeblock.small.product .title a h1, #content.home #homeblocks .homeblock.small.product .title a h2 { margin-top:15px!important; padding:15px; height:100px; font-size: 16px; border-top:1px solid #ddd; box-sizing:border-box; } #content.home #homeblocks .homeblock.small.product .acontent { padding:0 15px 15px 15px; width:100%; box-sizing:border-box; } #content.home #homeblocks .homeblock.large { width:calc(100% / 3 * 2 - 2%); } #content.home #homeblocks .homeblock.large.newspage .title { float:left; padding:10px 15px 5px 15px; box-sizing:border-box; } #content.home #homeblocks .homeblock.large.newspage .title h1 { font-size:18px; } #content.home #homeblocks .homeblock.large.newspage .acontent { float:left; margin:0; padding:15px; padding-top:0; width:100%; box-sizing:border-box; } #content.home #homeblocks .homeblock.large.newspage .acontent .descr.list { height:auto; } #content.home #homeblocks .homeblock.large.newspage .acontent ul { margin:0; padding:0; border-top:1px solid #ccc; } #content.home #homeblocks .homeblock.large.newspage .acontent ul li { margin:0; padding:10px 0 10px 0; height:auto; border:none; border-bottom:1px solid #ccc; } #content.home #homeblocks .homeblock.large.newspage .acontent ul li:last-child { border:none!important; } #content.home #homeblocks .homeblock.large.newspage .acontent ul li .image { margin:0; margin-right:15px; } #content.home #homeblocks .homeblock.large.newspage .acontent ul li .right { position:relative; float:left; top:0; left:0; width:calc(100% - 65px); } #content.home #homeblocks .homeblock.large.newspage .acontent ul li .right span.date { margin-bottom:0; font-size:13px; color:#999; line-height:normal; } #content.home #homeblocks .homeblock.large.newspage .acontent ul li .right span.titel { display:block; line-height:normal; /*white-space:nowrap; overflow:hidden; text-overflow:ellipsis;*/ } #content.home #homeblocks .homeblock.large img { display: block; width:100%; } #content.home #homeblocks .homeblock.mega { width:calc(100% - 2%); } #content.home #homeblocks .homeblock.mega.newspage .title { float:left; padding:10px 15px 5px 15px; box-sizing:border-box; } #content.home #homeblocks .homeblock.mega.newspage .title h1 { font-size:18px; } #content.home #homeblocks .homeblock.mega.newspage .acontent { float:left; margin:0; padding:15px; padding-top:0; width:100%; box-sizing:border-box; } #content.home #homeblocks .homeblock.mega.newspage .acontent ul { margin:0; padding:0; border-top:1px solid #ccc; } #content.home #homeblocks .homeblock.mega.newspage .acontent ul li { margin:0; padding:10px 0 5px 0; border:none; border-bottom:1px solid #ccc; } #content.home #homeblocks .homeblock.mega.newspage .acontent ul li .image { margin:0; margin-right:15px; } #content.home #homeblocks .homeblock.mega.newspage .acontent ul li .right { position:relative; float:left; top:4px; left:0; width:calc(100% - 65px); } #content.home #homeblocks .homeblock.mega.newspage .acontent ul li .right span.date { font-size:13px; color:#999; } #content.home #homeblocks .homeblock.mega.newspage .acontent ul li .right span.titel { position:relative; display:block; top:-4px; line-height:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #content.home #homeblocks .homeblock.small.custom { padding:15px; } #content.home #homeblocks .homeblock.small.custom .foto { margin-bottom:155px; padding-bottom:80%; height:0; } #content.home #homeblocks .homeblock.small.custom .foto a img { width:100%; } #content.home #homeblocks .homeblock h1 { margin:8px 0!important; font-size:16px; font-weight:bold; } #content.home #homeblocks .homeblock .foto { width:100%; } #content.home #homeblocks .homeblock .title { width:100%; } #content.home #homeblocks .aprijs.vanvoor { width:100%!important; } #iframes { float:left; margin-top:40px; width:100%; } #iframes .frame { position:relative; float:left; margin:0 1% 70px 0; padding:0 0 35% 0; width:49%; height:0; box-sizing:border-box; } #iframes .frame.maps { margin:0 0 70px 1%; } #iframes .frame .title { margin-bottom:15px; max-width:80%; font-size:16px; color:var(--black); line-height:21px; } #iframes .frame iframe { position:absolute; width:100%; height:100%; } /* Vervolgpagina's */ .breadcrumbs { position: relative; top: -35px; padding: 0; width: 100%; font-size: 16px; border: none; } .breadcrumbs span { margin-right: 6px; margin-left: 0; } .breadcrumbs span.active { font-weight: 400; opacity: 0.5; pointer-events: none; } .breadcrumbs span a { color: #555!important; text-decoration: underline; } .breadcrumbs span a:hover { text-decoration: none; opacity: 0.7; } .breadcrumbs span.active a { text-decoration: none!important; color: #555; } .breadcrumbs span.print { DISPLAY: NONE; padding-left:19px; background-image:url(../images/icon-print.png); background-position:left top 7px; background-size:12px; background-repeat:no-repeat; } .nextandprev { display: flex; justify-content: space-between; padding: 0; height: auto; font-size: 14px; } .nextandprev span.prev, .nextandprev span.next { margin-bottom: 10px; } .nextandprev span.prev a, .nextandprev span.next a { color: #555!important; } .nextandprev span.prev:before { margin-right: 8px; content: "‹"; } .nextandprev span.next:after { margin-left: 8px; content: "›"; } .nextandprev span.prev:hover, .nextandprev span.next:hover { opacity: 0.6; } #content .page_content { flex: 1; float: none; width: 100%; } #content h1 { margin-top: 0!important; margin-bottom: 30px!important; width: 100%; font-size: 32px; color: var(--black); font-weight: 700; } #content h2 { margin-bottom: 20px; font-size: 28px; color: var(--dark-green); font-weight: 700; text-transform: none; } #content h3 { font-weight: 700; } #content .homepage_textcontent h2 { margin-bottom: 20px; width: 100%; font-size: 40px; color: var(--black); font-weight: 400; } #content p + h2 { margin-top: 20px; } #content .page_content p { margin: 0; margin-bottom: 20px; padding: 0; } #content .page_content strong { font-weight: 600; } #content .page_content ol, #content .page_content ul { margin-bottom: 20px; } #content .page_content ol li ol { margin-top: 5px; margin-bottom: 10px; } #content .page_content ol li ol li { list-style-type: lower-alpha; } #content .page_content iframe { width: 100%; } .row { } .row .content { margin: 0 auto; padding: 90px 0; width: 90%; max-width: 1400px; } .row .content .page_content { } /* Over ons */ .row.team { background-color: var(--beige); } .row.team .team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; } .row.team .team .member { position: relative; } .row.team .team .member .image { width: 100%; border-radius: 10px; overflow: hidden; } .row.team .team .member .image img { display: block; width: 100%; } .row.team .team .member .name { position: absolute; bottom: 0; left: 0; } .row.team .team .member .name h2 { padding: 30px; font-size: 28px; color: #fff; text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); } .row.team .team .member .function { display: none; } /* Contactpagina */ #content .page_content.contact { display: flex; flex-wrap: wrap; justify-content: space-between; } #content .page_content.contact .contact { width: 45%; } #content .page_content.contact .contact ul { margin-top: -15px; margin-left: 0; } #content .page_content.contact .contact ul li { display: flex; align-items: flex-start; list-style: none; padding: 2px 0; } #content .page_content.contact .contact ul li:before { position: relative; display: block; top: 6px; margin-right: 10px; width: 14px; height: 14px; content: ""; background-position: center; background-size: contain; background-repeat: no-repeat; } #content .page_content.contact .contact ul li em { font-style: normal; } #content .page_content.contact .contact ul:nth-of-type(1) { } #content .page_content.contact .contact ul:nth-of-type(1) li:before { background-image: url("../images/icons/icon-location.svg"); } #content .page_content.contact .contact ul:nth-of-type(2) { } #content .page_content.contact .contact ul:nth-of-type(2) li:nth-of-type(1):before { background-image: url("../images/icons/icon-location.svg"); } #content .page_content.contact .contact ul:nth-of-type(2) li:nth-of-type(2):before { background-image: url("../images/icons/icon-phone.svg"); } #content .page_content.contact .contact ul:nth-of-type(2) li:nth-of-type(3):before { background-image: url("../images/icons/icon-email.svg"); } #content .page_content.contact form.contactform { position: relative; margin: 0; margin-top: -70px; width: 50%; border-radius: 8px; box-sizing: border-box; } #content .page_content.contact form.contactform h2 { font-size: 32px; color: var(--black); } #content .page_content.contact form.contactform .field label + span { position: relative; flex: 1; } #content .page_content.contact form.contactform .field label + span input { } #content .page_content.contact form.contactform .field input { padding: 10px 10px; font-family: "Source Sans 3", sans-serif; border-radius: 4px; } #content .page_content.contact form.contactform .field.radio input, #content .page_content.contact form.contactform .field.checkbox input { border: 1px solid #d1d1d1; background-color: #fff; } #content .page_content.contact form.contactform .field.radio input:checked, #content .page_content.contact form.contactform .field.checkbox input:checked { background-color: var(--green); } #content .page_content.contact form.contactform .field.textfield input[type=text], #content .page_content.contact form.contactform .field.textfield input.text, #content .page_content.contact form.contactform .field.textfield input[type=password], #content .page_content.contact form.contactform .field.textarea textarea { font-family: "Source Sans 3", sans-serif; font-size: 18px; border: 1px solid #ddd!important; border-radius: 4px; } #content .page_content.contact ul.files { width: 100%; } #content .page_content.contact ul.files, #content .page_content.contact + .page_media { display: none; } /* Producten */ #category_info { margin-bottom: 38px; padding: 0; width: 100%!important; max-width: calc(100% - 250px)!important; box-sizing: border-box; } #category_products + #category_info { margin-top: 60px; margin-bottom: 0; max-width: none !important; font-size: 18px; line-height: 1.5; } #category_info br { display: none; } #category_products_controls { position: relative; display: flex; justify-content: space-between; float: none; /*margin: 0 0 35px 0!important;*/ margin: 0 0 0 0!important; padding: 0!important; width: 100%!important; /*border-bottom: 1px solid #ddd;*/ border-bottom: none; box-sizing: border-box; } #category_products_controls.category_list { margin: 0!important; padding: 0!important; border: none; } #category_products_controls.nosubfilters { margin: 0; margin-top: 60px; padding: 0; } #category_products_controls .subfilter { position: relative!important; margin: 0!important; padding: 0!important; } #category_products_controls .subfilter ul.subfilters { display: flex; margin-left: 0; } #category_products_controls .subfilter ul.subfilters li { display: flex; flex-direction: column; justify-content: center; float: none; margin-right: -1px; padding: 3px 20px 0 20px; height: 45px; font-size: 18px; line-height: 1; letter-spacing: 1px; border: 1px solid #ddd; border-bottom: 0; } #category_products_controls .subfilter ul.subfilters li:hover, #category_products_controls .subfilter ul.subfilters li.active { color: #727270; } #category_products_controls .subfilter ul.subfilters li.active { margin-bottom: 0; border-bottom: 1px solid #fff; } #category_products_controls .weergave { DISPLAY: NONE; margin:0; padding:0; width:160px; } #category_products_controls:not(.category_list) .weergave { margin-top:-50px!important; } #category_products_controls:not(.category_list):not(.nosubfilters) .weergave { margin-top:-75px!important; } #category_products_controls .weergave p.controltag { margin:0; padding:0; } #category_products_controls .weergave ul.uldropdown { top:-2px; margin:0; padding:5px 0; width:90px; } #category_products_controls .weergave ul.uldropdown.active { right:0; border:none; } #category_products_controls .weergave ul.uldropdown li.tile, #category_products_controls .weergave ul.uldropdown li.list { padding-left:25px; line-height:20px; background-position:10px center; } #category_products_controls .sorteren { position: absolute; display: flex; top: -75px; right: 0; margin: 0!important; padding: 0; width: auto; font-size: 14px; letter-spacing: 0.5px; } /*#category_products_controls.nosubfilters .sorteren { top: -75px; }*/ #category_products_controls .subfilter + .weergave + .sorteren { top: -25px; } #category_products_controls:not(.category_list) .sorteren { } #category_products_controls:not(.category_list):not(.nosubfilters) .sorteren { } #category_products_controls .sorteren p.controltag { display: flex; margin: 8px 12px 0 0; padding: 0; white-space: nowrap; } #category_products_controls .sorteren ul.uldropdown { position: relative; top: 0; right: 1px; margin: 0; padding: 0; width: 125px; border: 1px solid #ddd; border-radius: 3px; } #category_products_controls .sorteren ul.uldropdown.active { box-shadow: none; background-color: #fff; } #category_products_controls .sorteren ul.uldropdown li { padding: 12px 15px 12px 5px; padding-left: 25px; line-height: 1; background-position: 10px center; } #category_products_controls .sorteren ul.uldropdown li:hover { color: #727270; } #category_products_controls .sorteren ul.uldropdown.active li { border-bottom: 1px solid #ddd; } #category_products_controls .sorteren ul.uldropdown li:last-of-type { border-bottom: none; } #category_products { position: relative; margin-top: 15px; width: 100%; } #category_products.subcats.tile .item { padding: 15px 15px 45px 15px!important; width: calc(100% / 3 - 2%); height: auto!important; min-height: auto!important; } #category_products.subcats.tile .item h2 { position: relative; top: -5px; margin: 0; padding: 0; width: 100%; max-width: none!important; font-size: 18px; color: var(--black); font-weight: 400; line-height: 1.2; } #category_products.subcats.tile .item h2 a { font-size: 24px; color: var(--black); font-weight: 700; text-decoration: none; } #category_products.subcats.tile .item .thumb2 { } #category_products.subcats.tile .item .thumb2 img { max-width: 100%; max-height: 80%; } #category_products.subcats.tile .item .description { margin:0; padding:0; width:82%; } #category_products.tile { position: relative; float: none; width: 100%; } #category_products.tile .items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 20px; row-gap: 20px; } #category_products.tile .item { position: relative; margin: 0; padding: 20px 20px 110px 20px!important; height: auto; text-align: center; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; opacity: 1; transition: all ease 0.1s; } #category_products.tile .item:hover { opacity: 0.8; } #category_products.tile .item.bigpic { } #category_products.tile .item .thumb2 { position: relative; margin-bottom: 0; padding-bottom: 100%; width: 100%; height: 0; } #category_products.tile .item .thumb2 a { position:absolute; top:0; left:0; width:100%; height:100%; } #category_products.tile .item .thumb2 img { position: absolute; top: 50%; left: 50%; max-width: 200px; max-height: 200px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #category_products.tile .item.bigpic { } #category_products.tile .item.bigpic .thumb2 { padding-bottom:100%; } #category_products.tile .item.bigpic .thumb2 a { } #category_products.tile .item.bigpic .thumb2 a img { } #category_products.tile .item .txt .voorraad { display:none; } #category_products.tile .item.bigpic .txt .voorraad { display:block; font-style:italic; margin-top:12px; font-size:11px; color:var(--black); } #category_products.tile .item .txt { padding: 0 5%; width: 100%; box-sizing: border-box; } #category_products.tile .item .txt h2 { margin: 0; padding-top: 0; width: 100%; max-width: none!important; /*height: 108px;*/ font-size: 18px; font-weight: 700; line-height: 1.2; } #category_products.tile .item .txt h2 a { font-family: "Source Sans 3", sans-serif; font-size: 18px; color: var(--black); font-weight: 400; line-height: 1.2; text-decoration: none; } #category_products.tile .item .txt h2 a span.artcode { margin: 10px 0 0 0; width: 100%; font-size: 14px; } #category_products.tile .item .txt .specs { /*position:absolute; left:15px; bottom:15px; margin-top:5px;*/ left:0; width:100%; } #content-container .item .price { position: absolute; display: flex; flex-direction: column; row-gap: 10px; width: 100%; bottom: 45px; margin: 0!important; font-size: 24px; color: var(--black); font-weight: 700!important; } #category_products .item .specs .price { font-family: "Source Serif 4", serif; font-size: 24px; line-height: 1; } #category_products.list .item { float:left; padding:25px 0 30px 0!important; } #category_products.list h2 { float:left; margin-bottom:5px; width:calc(100% - 105px); } #category_products.list h2 a { float:left; width:100%; } #category_products.list .item .txt h2 span.artcode { margin-top:8px; width:100%; } #category_products.list .item .txt h2 span.artcode, #category_products.list .description a { position:relative; } #category_products.list .description a { bottom:-10px; } #category_products .item { padding:15px 0!important; width:100%!important; box-sizing:border-box; } #category_products .item span.soldout { padding:5px 40px; top:24px; left:-38px; } #category_products .item .txt { float:left; width:82%; } #category_products .item .txt h2 span.artcode { /*DISPLAY:NONE;*/ width: 199px; } #category_products .item .txt .specs { } #category_products .item .txt .specs .eta { line-height:16px; } #category_products .item .txt .specs .price .price-holder { display: flex; flex-direction: column; row-gap: 10px; margin: 0; } #category_products .item .txt .thumb { margin:0; padding:0; width:15%; } #category_products .item .txt .thumb img { margin:0; } #content-container .item .price span { display: block; line-height: 1; } #category_products .item .price > span:first-of-type { display: none; } #content-container .item .price span.incl { display: block; font-size: 15px; color: var(--black); font-weight: 500; opacity: 0.6; } #content-container .item .price span.excl { display: flex; align-items: center; justify-content: center; font-family: "Source Serif 4", serif; font-size: 24px; color: var(--black); font-weight: 700 !important; } #content-container .item .price span.incl:after, #content-container .item .price span.excl:after { position: relative; top: 0; margin-left: 3px; font-size: 16px; } #content-container .item .price span.incl:after { content: "(incl. btw)"; } #content-container .item .price span.excl:after { margin-left: 5px; content: "(ex. btw)"; } #content.cmspage.blog #content-container { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; padding: 60px 0 15px 0; } #content.cmspage.blog #content-container .breadcrumbs { width: 100%; } #content.cmspage.blog #content-container .page_content { width: 60%; } #content.cmspage.blog #content-container .page_content h1 { margin-bottom: 15px!important; } #content.cmspage.blog #content-container .page_content h1 + .date { margin-bottom: 15px; opacity: 0.5; } #content.cmspage.blog #content-container .news_media { width: 30%; } #content.cmspage.blog #content-container .news_media a { display: block; margin-bottom: 30px; width: 100%; border-radius: 5px; overflow: hidden; } #content.cmspage.blog #content-container .news_media a:last-of-type { margin-bottom: 0; } #content.cmspage.blog #content-container .news_media a img { display: block; width: 100%; } #category_products.tile.related_products { margin-top: 45px; } #category_products.tile.related_products strong { display: block; margin-top: 0!important; margin-bottom: 30px; width: 100%; font-family: "Source Serif 4", serif; font-size: 32px; color: var(--black); font-weight: 700; } #category_products.tile.related_products .clear { display: none; } #category_products.tile.related_products .items { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 15px; } #category_products.tile.related_products .item { margin: 0!important; width: auto!important; height: auto!important; } #category_products.tile.related_products .item .thumb2 { width:100%; } #category_products.tile.related_products .item .txt .specs { left:0; bottom:0; } #category_products.tile.related_products .item .txt h2 { max-height:none; } #category_products.tile.related_products .item .txt h2 a span.artcode { float:left; margin:8px 0; width:100%; } #product_page { width: 100%; } #product_page .product_content { position: relative; float: none; width: 100%; } a.button.addtowishlist { position: absolute; DISPLAY: NONE; top: 29px; right: 20px; margin: 0; padding: 8px 16px 8px 16px; font-size: 12px; border-radius: 3px!important; z-index: 1; } /* Toevoegen aan favorieten */ a.button.addtowishlist:hover { opacity: 0.9; box-shadow: none!important; } #product_page .product_content { display: flex; flex-wrap: wrap; } #product_page .product_content .left { display: flex; flex-direction: column; margin-bottom: 60px; padding-right: 5%; width: 50%; box-sizing: border-box; } #product_page .product_content .right { display: flex; flex-direction: column; margin-bottom: 60px; width: 50%; } #product_page .product_content .title { margin-top: 4px; height: auto; } #product_page .product_content .title h1 { width: 100%; line-height: 1.1; } #product_page .product_content .description { margin: 0; margin-bottom: 20px; padding: 0 25px 0 0; width: 100%; box-sizing: border-box; } #product_page .product_content .popup .description { width: 100%; line-height: 20px; } #product_page .product_content .images { position: relative; top: 0; margin: 0; margin-top: 9px; margin-bottom: 20px; padding: 0; width: 100%; } #product_page .product_content .images .imagelarge { position: relative; margin-right: 0; padding-bottom: calc(60% - 12px); width: 100%; height: 0; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; } #product_page .product_content .images .imagelarge:before { position: absolute; top: 52%; left: 50%; width: 46px; height: 46px; content: ""; opacity: 0; visibility: hidden; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: all ease 0.15s; filter: invert(1); z-index: 1; background-color: #341794; background-image: url(../images/icons/icon-search-w.svg); background-position: center; background-size: 18px; background-repeat: no-repeat; } #product_page .product_content .images .imagelarge:hover:before { top: 50%; opacity: 1; visibility: visible; } #product_page .product_content .images .imagelarge img { position:absolute; top:50%; left:50%; padding:10px; max-width:100%; max-height:100%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); box-sizing:border-box; } #product_page .product_content .images .imagelarge div { position:static; } #product_page .product_content .images .imagelarge span.soldout { padding:10px 45px; top:19px; left:-42px; } #product_page .product_content .images .imagethumbs { position: relative; float: none; left: -5px; width: calc(100% + 10px); } #product_page .product_content .images .imagethumbs .fotothumb { position: relative; margin: 5px; padding: 0; padding-bottom: calc(100% / 5 - 10px); width: calc(100% / 5 - 10px); height: 0; box-sizing: border-box; opacity: 1; transition: all ease 0.1s; } #product_page .product_content .images .imagethumbs .fotothumb:hover { opacity: 0.8; } #product_page .product_content .images .imagethumbs .fotothumb img { position:absolute; top:50%; left:50%; padding:5px; max-width:100%; max-height:100%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); box-sizing:border-box; } #product_page .imagethumbs { float:right; } #product_page .imagethumbs div { border: 1px solid #ddd; border-radius: 5px; } .bestellen { margin-top:20px; width:100%!important; box-sizing:border-box; } #product_page .bestellen { padding: 45px; border: 1px solid #ddd; border-radius: 5px; } .bestellen h3 { margin: 5px 0 25px 0!important; font-size: 32px!important; color: var(--black); font-weight: 400; } .bestellen .orderproduct { margin-bottom: 5px; /*padding: 30px;*/ padding: 0; width: 100%; border-radius: 5px; box-sizing: border-box; background: transparent; } .bestellen .opties { position:relative; float:left; left:-5px; margin:0; padding:0; width:calc(100% + 10px); } .bestellen .opties .optie { float:left; margin:5px; padding: 30px; padding-bottom: 60px; width:calc(100% / 3 - 10px); /*min-height:200px;*/ border-radius: 5px; box-sizing:border-box; background-color: #f4f4f4; } .bestellen .opties .optie .name { margin-bottom:15px; width:100%!important; height:auto!important; white-space:normal!important; font-weight:bold!important; line-height:normal; } .bestellen .opties .optie.enum .name { margin-bottom:15px; width:100%; height:auto!important; } .bestellen .opties .optie.enum .keuzes { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; } .bestellen .opties .optie .select.switch { top:-4px; } .bestellen .opties .optie .prijs { top:auto!important; bottom:-30px!important; } .bestellen .opties .optie .keuze { margin: 0; width: 100px; /*min-height:100px;*/ } .bestellen .opties .optie .keuze-image { width:75px; } .bestellen .opties .optie .keuze-image .image { margin-bottom:5px; width:75px; height:75px; } .bestellen .opties .optie .keuze-image span.name { margin-bottom: 0; /*min-height:90px;*/ font-size: 14px; line-height: 1.4; } .bestellen .opties .optie.enum { width:calc(100% - 10px); } .bestellen .add { position: relative; right: -5px; margin: 5px; padding: 30px; width: calc(100% / 3 - 6px); border-radius: 5px; box-sizing: border-box; background-color: #f4f4f4; } .bestellen .add .setprice, .bestellen .add .aantal, .bestellen .add .total { margin-bottom: 5px!important; font-size: 20px; } .bestellen .add .setprice span, .bestellen .add .total span, .bestellen .add .aantal select { margin-right:2px; } .bestellen .add .total.inc { font-size: 16px!important; } .bestellen .add a.button { position: relative; left: -2px; margin-top: 22px; padding: 14px 30px 16px 30px; width: 100%; font-family: "Source Sans 3", sans-serif; font-size: 19px; color: var(--black)!important; font-weight: 500; line-height: 1; text-decoration: none!important; border-radius: 5px!important; box-sizing: border-box; } .bestellen .add a.button:hover { box-shadow: none!important; opacity: 0.9; } .orderproduct .levertijd .unavailable { color: #ff5722; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch:after { content:"✔"!important; } #shoppingcart { width: 100%; } #content.besteltraject #shoppingcart { width: 40%; } #shoppingcart .item { float:left; padding: 30px 10px 30px 20px; padding-right:0; width:100%; box-sizing:border-box; } #shoppingcart .item .thumb { position:relative; float:left; margin-right:20px; } #shoppingcart .item .prijs, #shoppingcart .item .aantal, #shoppingcart .item .subtotaal { width:79px; } #shoppingcart .item .description { position:relative; float:left; left:0; width:auto; } #shoppingcart .item .description h2 a { color: var(--black); } #shoppingcart .item .description span { font-size: 16px; line-height: 1.6; } #shoppingcart .item .prices { position:relative; float:right; left:0; } #shoppingcart .item span.button { line-height:18px; } #shoppingcart .item span.changeset, #shoppingcart .item span.cancelchange { top: 66px!important; } #shoppingcart .item.editing { padding:20px; } #shoppingcart .item.editing .add { right:0!important; } #shoppingcart .totals { width: 300px; border: none; background: #f4f4f4; } #shoppingcart .totals .totaal { font-size: 20px; } #shoppingcart .header { float:left; width:100%; padding:10px 0 10px 20px!important; box-sizing:border-box; } #shoppingcart .order a.button { position: relative; padding: 14px 30px 16px 30px; width: 100%; font-size: 19px!important; color: var(--black)!important; line-height: 1!important; text-decoration: none!important; border-radius: 5px!important; box-sizing: border-box; } #shoppingcart .order a.button:hover { box-shadow: none!important; opacity: 0.9; } #shoppingcart .order.left { margin-top:-71px!important; } /* Werkbladkleuren */ #content .page_content ul.files.werkbladkleuren { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 20px; row-gap: 20px; margin-top: 30px; width: 100%; } #content .page_content ul.files.werkbladkleuren li { display: flex; flex-direction: column; row-gap: 10px; width: auto; height: auto; font-size: 15px; line-height: 1.2; } #content .page_content ul.files.werkbladkleuren li span:nth-of-type(1) { position: relative; display: block; width: 100%; aspect-ratio: 1/1; } #content .page_content ul.files.werkbladkleuren li span:nth-of-type(1) img { position: absolute; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; } #content .page_content ul.files.werkbladkleuren li span:nth-of-type(2) { padding-bottom: 10px; } #content .page_content ul.files.werkbladkleuren { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px; margin-top: 15px; width: 100%; } /* Referenties */ #content .page_media { position: relative; display: flex; flex-direction: column; gap: 20px; margin: 0; padding-left: 5%; width: 35%; } #content .page_media .image { position: relative; display: flex; flex-direction: column; gap: 20px; width: 100%; } #content .page_media .image .caption { position: relative; font-size: 16px; } #content .page_media a { position: relative; margin: 0; width: 100%; height: auto; border-radius: 5px; overflow: hidden; } #content .page_media a img { position: relative; display: block; margin: 0; width: 100%; } /* Besteltraject */ #content.besteltraject { } #content.besteltraject .step { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; } #content.besteltraject .step .loginorregister { position: relative; margin-right: 0; padding: 30px; width: 48.5%; height: auto; border-radius: 4px; box-sizing: border-box; background-color: #f4f4f4; } #content.besteltraject .step .loginorregister:nth-of-type(1) { } #content.besteltraject .step .loginorregister:nth-of-type(2) { display: flex; align-items: center; justify-content: center; } #content.besteltraject .step .loginorregister h2 { margin-bottom:10px; line-height:normal; } #content.besteltraject .step .loginorregister p { margin:0; } #content.besteltraject .step .loginorregister p input { padding: 12px; margin: 5px 0 10px 0; width: 95%; font-size: 14px; box-sizing: border-box; } #content.besteltraject .step .loginorregister input.button.login { margin-top: 10px; padding: 9px 25px 11px 25px; font-family: "Source Sans 3", sans-serif; font-size: 18px; border-radius: 5px !important; } #content.besteltraject .step .loginorregister input.button.login:hover { box-shadow: none!important; opacity: 0.9; } #content.besteltraject .step .loginorregister .forgotpassword { float: none; margin-top: 0!important; font-size: 12px; } #content.besteltraject .step .loginorregister .forgotpassword a { color: var(--black); } #content.besteltraject .step .loginorregister .forgotpassword a:hover { text-decoration: none!important; } .step #loginform .button { color: var(--black); font-weight: 500; } #content.besteltraject .step .loginorregister h1 { position: relative; display:inline-block; margin:0!important; padding:0; width:auto; line-height:normal; } #content.besteltraject .step .loginorregister h1 a.button.register.large { margin: 0!important; padding: 14px 35px 16px 35px; font-family: "Source Sans 3", sans-serif;font-size: 24px; color: var(--black); line-height: 1; text-decoration: none; letter-spacing: 0.5px; border-radius: 5px!important; white-space: nowrap; } #content.besteltraject .step .loginorregister h1 a.button.register.large:hover { box-shadow: none!important; opacity: 0.9; } #content.besteltraject #content-container { flex-direction: column; } a.button.paymentbtn { margin: 20px 10px 0 0; color: var(--black)!important; padding: 11px 25px 13px 25px; font-size: 18px; font-weight: 500; text-decoration: none!important; } /* Klantpage (Foutief e-mailadress en/of password. Probeer het opnieuw) */ #content.klantpage { } #content.klantpage #content-container { flex-direction: column; } form#newpwform { width: 50%; } #content.klantpage input.button { padding: 14px 30px 16px 30px; width: 180px; font-family: "Source Sans 3", sans-serif; font-size: 19px; font-weight: 500; border-radius: 5px!important; } #content.klantpage form#loginform { display: flex; flex-direction: column; width: 100%; max-width: 450px; } #content.klantpage form#loginform.password { margin-top: 15px; } #content.klantpage form#loginform div { margin-bottom: 10px; } #content.klantpage form#loginform div, #content.klantpage p { width: 100%; margin: 0; margin-bottom: 15px; } #content.klantpage form#loginform div { display: flex; align-items: center; justify-content: flex-end; padding: 0; height: auto; } #content.klantpage p.error br { display: none; } #content.klantpage form#loginform div span { padding: 0; width: 35%; } #content.klantpage form#loginform div input { padding: 10px; font-family: "Source Sans 3", sans-serif; font-size: 16px; border: 1px solid #ddd !important; border-radius: 4px; box-sizing: border-box; } #content.klantpage form#loginform div input, #content.klantpage form#loginform div input.button { width: 65%; } #content.klantpage form#loginform div input.button { position: relative; padding: 14px 30px 16px 30px; font-family: "Source Sans 3", sans-serif; font-size: 19px; color: var(--black)!important; font-weight: 500; line-height: 1; text-decoration: none!important; border: none!important; border-radius: 5px!important; box-sizing: border-box; } #content.klantpage form#loginform div label.error { margin-top:11px; right:0; color:#fff; line-height:normal; border:none; box-shadow:none; background-color:var(--green); } #content.klantpage form#registreerform { float: left; width: 50%; } #content.klantpage form#registreerform p { margin-bottom: 15px; } #content.klantpage form#registreerform .row .element { } #content.klantpage form#registreerform .row .element p { float:left; width: 250px; line-height:21px; } #content.klantpage form#registreerform .row .element input { width: 65%; } #content.klantpage form#registreerform .row .element input, #content.klantpage form#registreerform .row .element select { padding: 10px; width: 100% !important; font-family: "Source Sans 3", sans-serif; font-size: 16px; border: 1px solid #ddd !important; border-radius: 4px; box-sizing: border-box; } #content.klantpage form#registreerform .row .element label.error { position: absolute; top: 8px; right: 8px; margin: 0 !important; padding: 6px; width: auto; height: auto; font-size: 14px; font-weight: 700; line-height: 1; color: #f44336; border: none; border-radius: 2px; box-shadow: none; } #content.klantpage form#registreerform .column.submit { width: 100%; } #content.klantpage form#registreerform .column.submit input.button { position: relative; right: 0; margin: 0; padding: 14px 30px 16px 30px; width: calc(100% - 250px); font-family: "Source Sans 3", sans-serif; font-size: 19px; color: var(--black)!important; font-weight: 500; line-height: 1!important; text-decoration: none!important; border-radius: 5px!important; box-sizing: border-box; } /* overig */ #bestelform .column { width: 100%; } .element { position: relative; display: flex; flex-wrap: wrap; margin-bottom: 15px; padding: 0; clear: both; width: 100%; } .element span { position: relative; flex: 1; } .element p { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin: 0!important; width: 300px; } .element.opmerking p { justify-content: flex-start; } .element input:not([type=radio]), .element textarea, .element select { display: block; margin: 0!important; padding: 10px; width: calc(100% - 300px)!important; height: auto; font-family: "Source Sans 3", sans-serif; font-size: 18px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; } .element textarea { display: block; } .element input.percent25, .element select.percent25 { width: calc(25% - 75px)!important; } .element input.percent50, .element select.percent50 { width: calc(50% - 150px)!important; } .element input.percent75, .element select.percent75 { width: calc(75% - 225px)!important; } .element input[type="radio"] { margin: 0; margin-right: 12px; padding: 0; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; -webkit-appearance: none; background-color: #efefef; } .element input[type="radio"]:checked { background-color: var(--green); } .element.onlyshipping label { display: flex; flex-direction: row; align-items: center; margin-right: 20px; width: auto; cursor: pointer; } .step > #bestelform { width: 50%; } #bestelform div.column.submit { padding-right: 0; } .column input[type=submit] { margin-top: 35px; margin-bottom: 15px; } div.bottomrow { width: 100%; } .klantgegevens + div.bottomrow { width: 20%; } div.bottomrow .akkoord { width: 100%; } div.bottomrow .akkoord form label { width: calc(100% - 40px)!important; } div.bottomrow div.order.left { position: relative; width: 100%; } div.bottomrow div.order.left a.button { color: var(--black)!important; } .klantgegevens { position: relative; margin-top: 0; padding-left: 8%; padding-right: 4%; width: 40%; box-sizing: border-box; } .klantgegevens .sub { margin: -5px 20px 10px 10px; } .klantgegevens .sub .title { display: inline-block; margin-top: 15px; font-weight: 700!important; line-height: 1.5; } #bestelform > .bottomrow > .order.left a.button { width: 100%; margin-top: 0; color: #fff; } .order.left a.button { margin-top: 10px; margin-bottom: 10px; } .akkoord input[type=submit] { position: relative; float: right; margin-top: 20px; padding: 14px 30px 16px 30px; width: 100%; font-family: "Source Sans 3", sans-serif; font-size: 19px!important; color: var(--black)!important; font-weight: 400; line-height: 1!important; text-decoration: none!important; border-radius: 5px!important; box-sizing: border-box; } .column input[type=submit], .order.left a.button { position: relative; padding: 14px 30px 16px 30px; width: 100%; font-family: "Source Sans 3", sans-serif; font-size: 19px!important; color: var(--black)!important; font-weight: 500; line-height: 1!important; text-decoration: none!important; border-radius: 5px!important; box-sizing: border-box; } .column input[type=submit]:hover, .order.left a.button:hover { box-shadow: none!important; opacity: 0.9; } /* SIDEBAR RIGHT */ #sidebar_right { DISPLAY: NONE; position:relative; margin-top: 25px; width:15%; border-top:none; } #sidebar_right .sideblock.search { } /* bel mij */ #sidebar_right .sideblock h2 { font-size: 17px; } #sidebar_right .sideblock.callme { padding: 15px; padding-bottom: 20px; } #sidebar_right .sideblock.callme input[type=text], #sidebar_right .sideblock.callme input.text { margin-bottom: 8px; padding: 10px; width: 100%; border: none; box-sizing: border-box; } #sidebar_right .sideblock .button { padding: 9px 15px; font-size: 14px; border-radius: 3px!important; } #sidebar_right .sideblock span.small { margin: 0; margin-bottom: 20px; } /* virtual tour + foto bedrijfspand */ #sidebar_right .sideblock.custom { position:relative; float:left; width:100%; text-align:center; } #sidebar_right .sideblock.custom img { width:100%; } .sidebar > div { margin-bottom: 23px; } .sidebar .sideblock.custom.fb { padding:0!important; border:none!important; } .sidebar .sideblock.custom.fb > iframe { display:inline-block; float:none!important; width:120px; } .sidebar .sideblock.custom.fb img { width:auto!important; } /* nieuwsbrief */ .sideblock.newsletter { float:left; padding:20px; /*background-image:url(../images/icon-newsletter.png);*/ background-position:top 21px left 19px; background-size:40px; background-repeat:no-repeat; } .sideblock.newsletter.mobile { } .sideblock.newsletter h2 { margin-bottom:5px; padding-left:32%; font-size:16px; } .sideblock.newsletter span.acties { display:block; margin-bottom:15px; padding-left:32%; font-size:13px; line-height:18px; } .sideblock.newsletter input { margin-bottom:5px; padding:8px 10px; width:100%!important; font-size:15px; box-sizing:border-box; } .sideblock.newsletter input.button { border-radius:3px!important; } /* populaire producten */ #content .sideblock.popularproducts { padding: 60px 0 60px 0; width: 100%; } #content .sideblock.popularproducts h2 { margin-bottom: 30px; width: 100%; font-size: 40px; color: var(--black); font-weight: 900; } #content .sideblock.popularproducts .items { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 45px; } #content .sideblock.popularproducts .items .item { position: relative; padding: 15px 15px; padding-bottom: 175px; text-align: center; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; opacity: 1; overflow: hidden; transition: all ease 0.1s; } #content .sideblock.popularproducts .items .item:hover { opacity: 0.8; } #content .sideblock.popularproducts .items .item a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } #content .sideblock.popularproducts .items .item a:hover { } #content .sideblock.popularproducts .items .item .foto { position: relative; padding-bottom: 100%; width: 100%; height: 0; } #content .sideblock.popularproducts .items .item .foto img { position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #content .sideblock.popularproducts .items .item .info { display: flex; flex-direction: column; align-items: center; margin: 0 auto; width: 95%; } #content .sideblock.popularproducts .items .item .info h3 { margin-bottom: 15px; height: 42px; font-size: 15px; font-weight: normal; line-height: 22px; text-transform: none; } #content .sideblock.popularproducts .items .item .info .title { min-height: 50px; font-size: 18px; line-height: 1.2; } #content .sideblock.popularproducts .items .item .info .price { position: absolute; gap: 8px; bottom: 105px; font-size: 32px; font-weight: 400; } #content .sideblock.popularproducts .items .item .info .price span { display: block; font-family: "Source Serif 4", serif; font-size: 28px; } #content .sideblock.popularproducts .items .item .info .price small { display: block; font-size: 15px; color: var(--black); font-weight: 500; opacity: 0.6; } #content .sideblock.popularproducts .items .item .info .btn { position: absolute; bottom: 40px; margin: 0 auto; padding: 6px 0 7px 0; width: 80%; color: #fff; font-weight: 400; border-radius: 5px; background-color: var(--black); } #content .sideblock.popularproducts .items .item .info .btn span { position: absolute; display: flex; align-items: center; justify-content: center; top: -1px; right: 6px; width: 42px; height: 42px; font-size: 22px; } /* onze merken */ #content .merken { position: relative; } #content .merken:after { position: absolute; top: 0; left: -500px; width: calc(100% + 1000px); height: 100%; content: ""; z-index: -1; background-color: #f4f4f4; } #content .merken .merken-container { display: flex; flex-wrap: wrap; margin: 0 auto; padding: 60px 0 105px 0; width: 100%; min-height: 0; line-height: 1.4; box-sizing: border-box; } #content .merken .merken-container h2 { margin-bottom: 30px; width: 100%; font-size: 32px; text-align: center; } #content .merken .merken { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px; width: 100%; } #content .merken .merken .merk { display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9; border-radius: 5px; background-color: #fff; } #content .merken .merken .merk img { width: auto; max-width: 80%; height: auto; max-height: 80%; } /* iDeal banner */ .sidebar .sideblock.custom, .sidebar .sideblock.custom.nocontainer { margin-left:0!important; text-align:center; box-sizing:border-box; } .sidebar .sideblock.custom.nocontainer { padding:0; /*border:1px solid #ccc!important;*/ } .sidebar .sideblock.custom img, .sidebar .sideblock.custom.nocontainer img { display:block!important; } .sidebar .sideblock.custom.nocontainer img { display:inline-block!important; width:auto!important; } /* SHOWROOM */ /*#content .page_content.showroom + .page_media { position: relative; display: flex; flex-wrap: wrap; margin-top: 15px; margin-bottom: 45px; } #content .page_content.showroom + .page_media a { position: relative; margin: 1%; padding-bottom: calc(100% / 6 - 2%); width: calc(100% / 6 - 2%); height: 0; background-color: #efefef; } #content .page_content.showroom + .page_media a:hover img { opacity: 0.8; }*/ /* PROJECTEN */ .projecten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 45px; row-gap: 45px; margin-top: 45px; margin-bottom: 60px; } .projecten .project { border-radius: 5px; overflow: hidden; background-color: #f4f4f4; } .projecten .project .image { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; background-color: #fff; } .projecten .project .image img { display: block; width: 100%; height: 100%; object-fit: cover; } .projecten .project .image.logo img { width: auto; max-width: 80%; height: auto; max-height: 40%; object-fit: initial; } .projecten .project .text { padding: 30px 40px 40px 40px; } .projecten .project .text p:last-of-type { margin: 0!important; } /* OPKOOP EN AFVOER */ form.contactform.opkoopafvoer { } ul#newslist { display: flex; flex-direction: column; } ul#newslist li { } ul#newslist li a { } ul#newslist li a span.date { width: 120px; } ul#newslist li a span.titel { } /* CONTACT */ form.contactform { margin-top: 60px; width: 50%; } form.contactform .field { display: flex; padding: 0; margin-bottom: 15px; clear: both; position: relative; width: auto; } form.contactform .field label, form.contactform .field.textarea span.wysiwyglabel { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 200px; } form.contactform .field.textarea span.wysiwyglabel { justify-content: flex-start; } form.contactform .field label.error { position: absolute; top: 8px; right: 8px; margin: 0 !important; padding: 7px; width: auto; height: auto; font-size: 14px; font-weight: 700; line-height: 1; color: #f44336; border: none; border-radius: 2px; box-shadow: none; } form.contactform .field label.error:before { position: absolute; top: 4px; left: -10px; width: 19px; height: 19px; /*content: "";*/ z-index: -1; transform: rotate(44deg); background-color: var(--green); } form.contactform .field input { padding: 10px; width: 100%; font-size: 16px; -webkit-appearance: none; box-sizing: border-box; } form.contactform .field input.percent25 { width: 25%; } form.contactform .field input.percent50 { width: 50%; } form.contactform .field input.percent75 { width: 75%; } form.contactform .field.textarea { margin-bottom: 15px; } form.contactform .field.textarea .wysiwyg { flex: 1; font-size: 18px; } form.contactform .field.textarea textarea { display: block; padding: 10px; width: 100%!important; min-height: 150px; border: 1px solid #ccc; -webkit-appearance: none; box-sizing: border-box; } form.contactform .field.radio label:nth-child(n+2) { display: flex; flex-direction: row; align-items: center; margin-right: 20px; width: auto; cursor: pointer; } form.contactform .field.radio label.error { top: 3px; } form.contactform .field.radio input { margin: 0; margin-right: 12px; padding: 0; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; -webkit-appearance: none; background-color: #efefef; } form.contactform .field.radio input:checked { background-color: var(--green); } form.contactform .field.checkbox { margin: 30px 0; } form.contactform .field.checkbox label { display: flex; flex-direction: row; align-items: center; margin-left: 200px; width: auto; cursor: pointer; } form.contactform .field.checkbox input { margin: 0; margin-right: 12px; padding: 0; width: 20px; height: 20px; cursor: pointer; -webkit-appearance: none; background-color: #efefef; } form.contactform .field.checkbox input:checked { background-color: var(--green); } form.contactform input[type="submit"] { position: relative; left: -2px; margin-top: 10px; margin-left: 200px; padding: 14px 30px 16px 30px; font-family: "Source Sans 3", sans-serif; font-size: 19px; color: var(--black) !important; font-weight: 500; line-height: 1; text-decoration: none; border: none; border-radius: 5px !important; box-sizing: border-box; cursor: pointer; -webkit-appearance: none; background-color: var(--green); } form.contactform input[type="submit"]:hover { opacity: 0.85; } /* balk showroom */ #showroom { display: flex; align-items: center; justify-content: center; padding: 45px 0; background-color: #f4f4f4; } #showroom span { position: relative; font-family: "Source Sans 3", sans-serif; font-size: 32px; color: var(--black); font-weight: 700; } #showroom a.btn { position: relative; margin-left: 30px; padding: 20px 40px; font-size: 17px; color: #fff; font-weight: 700; line-height: 1; text-transform: uppercase; border-radius: 5px; background-color: var(--green); } #showroom a.btn:hover { opacity: 0.8; } /* FOOTER */ /*#footer-clear { height: 50px; } #footer { position: relative; float: left; font-size: 17px; color: #fff; border: none; z-index: 9; background-color: var(--black); } .footer-top { } .footer-top .footer-top-container { position: relative; display: flex; justify-content: space-between; margin: 0 auto; padding: 75px 0 60px 0; width: 90%; max-width: 1400px; line-height: normal; box-sizing: border-box; } .footer-top .column { margin: 0; width: auto; color:#fff; line-height: 24px; box-sizing: border-box; } .footer-top .column > ul { line-height: 1.6; } .footer-top .column > ul > li { } .footer-top .column > ul > li:first-of-type { margin-bottom: 25px; font-family: "Source Sans 3", sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.25px; } .footer-top .column > ul > li:first-of-type:before { content: none!important; } .footer-top .column > ul > li strong img { position: relative; display: block; top: -1px; margin-right: 10px; width: 16px; height: 16px; filter: invert(1); } .footer-top .column > ul > li a { display: block; color:#fff; } .footer-top .column > ul > li a:hover { opacity: 0.6; } .footer-top .column.intro { max-width: 240px; max-width: 20%; } .footer-top .column.intro .image { width: 100%; border-radius: 5px; overflow: hidden; background-color: #f1e8e1; } .footer-top .column.intro .image img { display: block; width: 100%; } .footer-top .column.intro .text { margin-top: 20px; font-size: 14px; } .footer-top .column.intro .text em { display: inline-block; line-height: 1.4; } .footer-top .column.intro .text strong { display: block; margin-top: 5px; font-weight: 600; } .footer-top .column.openingstijden { } .footer-top .column.openingstijden ul { } .footer-top .column.openingstijden ul li { } .footer-top .column.openingstijden ul li span { display: inline-block; width: 40px; text-transform: lowercase; } .footer-top .column.voordelen ul li { display: flex; align-items: center; } .footer-top .column.voordelen ul li:not(:first-of-type) { margin-bottom: 5px; } .footer-top .column.voordelen ul li img { position: relative; display: inline-block; top: 0; margin-right: 10px; width: 14px; height: 14px; filter: invert(1); } .footer-top .column.contact { padding: 0; text-align: right; } .footer-top .column.contact ul { } .footer-top .column.contact ul li { } .footer-top .column.contact ul li:last-of-type { margin-bottom: 0; } .footer-top .column.contact ul li strong { } .footer-top .column.contact ul li.wa { display: flex; align-items: center; margin-top: 25px; white-space: nowrap; } .footer-top .column.contact ul li.wa a { display: flex; align-items: center; color: var(--green); } .footer-top .column.contact ul li.wa a:hover { opacity: 0.8; } .footer-top .column.contact ul li.wa a svg { margin: 0 7px 0 9px; fill: var(--green); } .footer-top .column.socials { } .footer-top .column.socials ul { display: flex; } .footer-top .column.socials ul li { width: 30px; height: 30px; border-radius: 50%; background-color: #fff; } .badges { position: absolute; display: flex; align-items: center; column-gap: 30px; bottom: 60px; right: 0; } .badges .ideal { width: 90px; } .badges .ideal img { display: block; width: 100%; } .badges #trustbadgeCustomContainer { position: fixed; bottom: 20px; left: 20px; } .badges #trustbadgeCustomContainer > * > * > * { position: relative!important; display: flex!important; align-items: center; column-gap: 8px; top: auto!important; right: auto!important; bottom: auto!important; left: auto!important; padding: 10px!important; width: auto!important; border-radius: 5px!important; box-shadow: none!important; } .badges #trustbadgeCustomContainer > * > * > * > p { margin: 0!important; width: 90px!important; text-align: right!important; } .badges #trustbadgeCustomContainer > * > * > * > img { margin: 0!important; width: 30px!important; height: 30px!important; } .search-trust-wrapper { display: flex; align-items: center; } #trustbadgeCustomContainer { } #trustbadgeCustomContainer > * > * > * { position: relative!important; display: flex!important; align-items: center; column-gap: 8px; top: auto!important; right: auto!important; bottom: auto!important; left: auto!important; padding: 0!important; width: auto!important; border-radius: 5px!important; box-shadow: none!important; } #trustbadgeCustomContainer > * > * > * > p { margin: 0!important; width: 90px!important; text-align: right!important; } #trustbadgeCustomContainer > * > * > * > img { margin: 0!important; width: 30px!important; height: 30px!important; } .footer-bottom { border-top:1px solid rgba(255,255,255,0.25); } .footer-bottom .footer-bottom-container { display: flex; align-items: center; justify-content: space-between; margin: 0 auto; padding: 45px 0 60px 0; width: 90%; max-width: 1400px; font-size: 17px; } .footer-bottom .footer-bottom-container .text { line-height: 1.6; box-sizing: border-box; } .footer-bottom .footer-bottom-container .text br { display: none; } .footer-bottom .footer-bottom-container .text a { color: #fff; } .footer-bottom .footer-bottom-container .text a:hover { opacity: 0.6; } .footer-bottom .footer-bottom-container .socials { display: flex; gap: 20px; } .footer-bottom .footer-bottom-container .socials .sitem { } .footer-bottom .footer-bottom-container .socials .sitem a { } .footer-bottom .footer-bottom-container .socials .sitem a img { display: block; width: 24px; height: 24px; filter: invert(1); } .footer-bottom .footer-bottom-container .socials .sitem:hover a img { opacity: 0.6; } .footer-bottom ul { display: flex; } .footer-bottom ul li { display: flex; } .footer-bottom ul li:after { margin: 0 15px; content:"/"; opacity: 0.5; } .footer-bottom ul li:last-of-type:after { content: none; } .footer-bottom ul li span { position: relative; top: 0; margin-right: 5px; font-size: 22px; line-height: 1; } .footer-bottom ul li a { display: block; color:#fff; } .footer-bottom ul li a:hover { opacity: 0.6; } .footer-bottom .ideal a img { display: block; width: 99px; } .footer-bottom #footermenu { float:left; margin:0; padding:0; width:100%; color:#ccc; border-top:1px solid #efefef; text-align:center; } .footer-bottom #footermenu li { display:inline-block; float:none; margin-right:10px; padding:20px 0; }*/ /* FOOTER */ #footer-clear { height: 50px; } #footer { position: relative; color: #fff; border: none; background-color: var(--black); } .footer-top { } .footer-top .footer-top-container { position: relative; display: flex; gap: 70px; margin: 0 auto; padding: 60px 0 120px 0; width: 90%; max-width: 1400px; line-height: normal; box-sizing: border-box; } .footer-top .column { margin: 0; /*padding-right: 5%;*/ width: calc(100% / 5); width: auto; font-size: 18px; color:#fff; line-height: 24px; box-sizing: border-box; } .footer-top .column ul { line-height: 1.6; } .footer-top .column ul li:first-of-type { margin-bottom: 20px; font-family: "Source Serif 4", serif; font-size: 24px; font-weight: 700; line-height: 1.2; } .footer-top .column ul li a { display: block; color:#fff; white-space: nowrap; } .footer-top .column ul li a:hover { opacity: 0.6; } .footer-top .column.nav1 { /*width: 25%;*/ } .footer-top .column.nav1 ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; } .footer-top .column.nav1 ul li { /*line-height: 2.1;*/ } .footer-top .column.nav1 ul li:first-of-type { grid-column: 1/3; width: 100%; } .footer-top .column.nav2 { /*width: 19%;*/ } .footer-top .column.nav2 ul li { /*line-height: 2.1;*/ } .footer-top .column.contact { /*width: 20%;*/ } .footer-top .column.contact ul li.wa { display: flex; align-items: center; margin-top: 25px; white-space: nowrap; } .footer-top .column.contact ul li.wa a { display: flex; align-items: center; } .footer-top .column.contact ul li.wa a svg { margin: 0 7px 0 9px; fill: #fff; } .footer-top .column.openingstijden { padding: 0; /*text-align: right;*/ } .footer-top .column.usps { padding: 0; /*width: 22%;*/ } .footer-top .column.usps ul li { display: flex; margin: 0; padding: 3px 0; font-size: 18px; line-height: 1.2; } .footer-top .column.usps ul li:first-of-type { padding: 0; } .footer-top .column.usps ul li span { position: relative; top: 1px; margin-right: 18px; font-size: 19px; } .footer-top .column.social { display: flex; flex-direction: column; gap: 30px; padding: 0; margin-left: auto; /*width: 15%;*/ text-align: right; } .footer-top .column.social .title { margin-bottom: 20px; font-family: "Source Serif 4", serif; font-size: 24px; font-weight: 700!important; line-height: 1.2; } .footer-top .column.social .socials { } .footer-top .column.social .socials .icons { position: relative; display: flex; justify-content: flex-end; gap: 20px; margin-top: 25px; width: 100%; } .footer-top .column.social .socials .icons .icon { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: rgb(0 0 0 / 10%); } .footer-top .column.social .socials .icons .icon:hover { opacity: 0.75; } .footer-top .column.social .socials .icons .icon a { display: block; } .footer-top .column.social .socials .icons .icon svg { display: block; width: 100%; height: 100%; fill: #fff; } .footer-top .column.social .reviews { color: #fff; } .footer-top .column.social .reviews a { display: block; color: #fff; line-height: 1.3; text-decoration: underline; } .footer-top .column.social .reviews a:hover { text-decoration: none; } .footer-top .column .text { float:left; color:#fff; } .footer-top .column .text br { display: none; } .betaalmogelijkheden { position: absolute; bottom: 60px; right: 0; } .betaalmogelijkheden .options { display: flex; flex-wrap: wrap; gap: 10px; } .betaalmogelijkheden .options .option { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; width: 60px; height: 40px; border-radius: 3px; background-color: #fff; } .betaalmogelijkheden .options .option:first-of-type:before { position: absolute; top: 50%; right: calc(100% + 20px); margin: 0; margin-top: 1px; width: 90px; font-size: 14px; line-height: 1.2; text-align: right; content: "Veilig betalen via: (Mollie)"; transform: translateY(-50%); } .betaalmogelijkheden .options .option a { text-align: center; } .betaalmogelijkheden .options .option img { display: block; width: 100%; max-width: 40px; height: 100%; max-height: 24px; } .betaalmogelijkheden .options .option svg { } .footer-bottom { border-top:1px solid rgba(255,255,255,0.25); } .footer-bottom .footer-bottom-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 0 auto; padding: 45px 0 60px 0; width: 90%; max-width: 1400px; font-size: 16px; } .footer-bottom .footer-bottom-container .text { padding-right: 5%; width: 100%; margin-bottom: 20px; line-height: 1.6; box-sizing: border-box; } .footer-bottom .footer-bottom-container .text br { display: none; } .footer-bottom .footer-bottom-container .text a { color: #fff; } .footer-bottom .footer-bottom-container .text a:hover { opacity: 0.6; } .footer-bottom ul { display: flex; } .footer-bottom ul li { } .footer-bottom ul li a { display: block; color:#fff; } .footer-bottom ul li a:after { margin: 0 15px; content:"|"; opacity: 0.25; } .footer-bottom ul li a:hover { opacity: 0.6; } .footer-bottom .ideal a img { display: block; width: 99px; } .footer-bottom #footermenu { float:left; margin:0; padding:0; width:100%; color:#ccc; border-top:1px solid #efefef; text-align:center; } .footer-bottom #footermenu li { display:inline-block; float:none; margin-right:10px; padding:20px 0; } /* ---- END OF NEW STYLE ---- */ .bestellen .opties .optie .keuze.selected .keuze-image span, .bestellen .opties .optie.selected .name { color: var(--dark-green); } .bestellen .opties .optie.selected .optie-image .image { border-color: var(--dark-green); } a.button, input.button { color: var(--black); border: none!important; box-shadow: none!important; background: var(--green)!important; border-radius: 5px!important; } a.button:hover, input.button:hover { color: var(--black)!important; opacity: 0.9; box-shadow: none; } #shoppingcart .item span.button { top: 35px; color: var(--black); border: none!important; box-shadow: none!important; font-size: 12px; font-weight: 500; padding: 3px 0px 4px 0px; width: 64px; border-radius: 4px; background: var(--green)!important; } #shoppingcart .item span.button:hover { opacity: 0.9; } #product_page .description { } #content .page_media a.firstfoto { display: inline; } #content .page_largefoto { display:none; } .sidebar .sideblock.custom.twit iframe { width: 175px!important; } .label { position: absolute; top: 30px; right: -97px; background-color: var(--green); color: #fff; font-size: 15px; font-weight: 700; padding: 10px 0 12px 0; width: 300px; text-align: center; transform: rotate(45deg); z-index: 9; } .label.big { top: 45px; right: -82px; } /* Overzicht elementen // ALGEMEEN \\ Body = body Pagina-titel = h1 Link = a // BUTTONS \\ Button "zoeken" = .button.search Button "nieuwsbrief aanmelden" = .button.newsletter Button "bel mij versturen" = .button.belmij Button "volgende stap" = .button.next Button "vorige stap" = .button.back Button "inloggen" = .button.login Button "voeg toe favorieten" = .button.addtowishlist Button "nieuw klant" (groot) = .button.register.large Button "verwijder" (winkelmand) = #shoppingcart div.item span.remove Button "wijzigen" (winkelmand) = #shoppingcart div.item span.changeset Button "annuleren" (winkelmand) = #shoppingcart div.item span.cancelchange Button "opslaan" (winkelmand) = #shoppingcart div.item span.saveproductoptions Button "toevoegen aan winkelmand" = .button.addproductwithoptions // HEADER \\ Gekleurde headerbalk = #topbg Winkelwagen = #basket Header-menu's = #menu Header pagina's menu = #menu ul.pagesmenu Header usermenu = #menu ul.usermenu Header languagemenu = #menu ul.langmenu Breadcrumbs = div.breadcrumbs Breadcrumbs breadcrumb = div.breadcrumbs span Breadcrumb actief = div.breadcrumbs span.active // SIDEBARS \\ Sidebars = div.sidebar Sidebar links = div#sidebar_left Sidebar rechts = div#sidebar_right Sidebar blok "zoeken" = div.sideblock.search Sidebar blok "nieuwsbrief" = div.sideblock.newsletter Sidebar blok "favoriete producten" = div.sideblock.wishlist Sidebar blok "populaire producten" = div.sideblock.popularproducts Sidebar blok "bel mij" = div.sideblock.callme Sidebar blok "custom" (banner/reclame) = div.sideblock.custom Sidebar pagina-menu = ul#sidemenu Sidebar categorie-listing = ul.categories // HOME \\ Homeblock = div.homeblock // PRODUCT \\ Product-pagina = #product_page Product titel = #product_page h1 Product artikelcode = #product_page h2 Product foto's = #product_page div.images Product bestel-blok = #product_page div.bestellen Product bestel-blok artikel-summary = #product_page div.bestellen > div.orderproduct Product bestel-blok artikel-opties = #product_page div.bestellen > div.opties Optie type "keuze" = div.optie.enum Optie type "aantal" = div.optie.integer Optie type "aan/uit" = div.optie.boolean Optie titel = div.optie div.name Optie aantal&aan/uit plaatjes = div.optie-image span.image Optie hover-popup = div.optie div.popup Optie actief (gekozen) = div.optie.selected Optie keuze = div.optie div.keuze Optie keuze actief (gekozen) = div.keuze.selected // PRODUCT-OVERZICHT \\ Categorie-introtext = #category_info Controls-balk = #category_products_controls Controls "subfilter" = #category_products_controls div.subfilter Controls "weergave" = #category_products_controls div.weergave Controls "sorteren" = #category_products_controls div.sorteren Controls dropdown-menu = ul.uldropdown Controls dropdown-menu item = ul.uldropdown li Controls dropdown-menu item actief = ul.uldropdown li.active Producten-listing = #category_products Product in "list-view" = #category_products .item Product in "tile-view" = #category_products.tile .item Product thumbnail (list-view) = #category_products .item .thumb Product thumbnail (tile-view) = #category_products .item .thumb2 Product titel = #category_products .item h2 Product artikelcode = #category_products .item span.artcode Product omschrijving= #category_products .item div.description Product prijs = #category_products .item div.price Product levertijd = #category_products .item div.eta // CATEGORIE-OVERZICHT (subcategorieën) \\ Subcategorie in "list-view" = #category_products.subcats .item Subcategorie in "tile-view" = #category_products.subcats.tile .item Subcategorie in "list-view" thumbnail = #category_products.subcats .item .thumb Subcategorie in "tile-view" thumbnail = #category_products.subcats .item .thumb2 Subcategorie titel = category_products.subcats .item h2 Subcategorie omschrijving = category_products.subcats .item .description // WINKELMAND & BESTELTRAJECT \\ Artikel-overzicht header = #shoppingcart div.item.header Artikel-overzicht artikel = #shoppingcart div.item Artikel thumbnail = #shoppingcart div.item div.thumb Artikel omschrijving = #shoppingcart div.item div.description Input velden = div.element > input, div.element > select, div.element textarea Label boven input veld = div.element > p Artikel-opties wijzigen (border) = #shoppingcart div.item.editing Order-overzicht totalen = #shoppingcart div.totals Order-overzicht gegevens = div.klantgegevens Order-overzicht AV-check = div.akkoord // NIEUWS \\ Nieuwsoverzicht listing = ul#newslist // TEKST & NIEUWS PAGINA'S \\ Pagina tekst = div.page_content Grote foto bovenaan = div.page_largefoto Media-balk (foto/yt) = div.page_media Foto-thumbnail = a.fancbx Video-thumbnail = a.fancbxvideo // FOOTER \\ Footer = #footer */