.p_width { margin:auto; left:0; right: 0;ok width:100%; max-width: 1300px; overflow-x:hidden; } .p_padding { padding:5% 25px; box-sizing: border-box; } .no-padding { padding:unset; } .bg_green { background-color: rgba(109, 167, 67, 0.24); } img { transition:opacity 0.5s; } .PH:before { content: '\e090'; position: relative; font-size: 17px; font-family: 'modules'; margin: 0 0 0 0px; } .EM:before { content: '\e076'; position: relative; font-size: 17px; font-family: 'modules'; top: 2px; margin: 0 0 0 0px; } body { margin:0; min-width:300px; color:#5a5858; font-family: 'Open Sans'; font-weight:normal; font-size:12pt; line-height:2em; appearance: none; -moz-appearance: none; -webkit-appearance: none; } header { position: relative; display: inline-block; width:100%; min-height:25vh; overflow: hidden; left:0; top:0; vertical-align: middle; background-color:#213629; background-image: url(../dimages/footer-background.png); background-position: bottom; background-size: cover; } header > div:first-child { position:fixed; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-end; justify-content: space-between; align-items: center; gap:40px; z-index:100; top:15px; left:15px; right:15px; margin:auto; max-width:1300px; background-color:rgba(255,255,255,0.6); box-shadow:0px 0px 10px rgba(0,0,0,0.1); border-radius:10px;# 0 20px 0; padding:15px 25px; box-sizing: border-box; transition: background 0.5s; } .FIXED { background-color:rgba(255,255,255,0.8) !important; } #LOGO { order:1; height:90px; } header > div:first-child > div:nth-of-type(1) { order:2; flex-grow: 3; text-align: right; } header > div:first-child > div:nth-of-type(2) { position: relative; order:3; z-index:5; padding:15px; background-color:#00793E; color:white; font-size:1.0em; border-radius:10px 0 10px 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: bold; box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.2); } nav > ul { flex-grow: 3; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-end; align-items: center; gap: 40px; } header ul { margin:0; padding:0; list-style:none; } header ul li { float:left; white-space: nowrap; } header ul li a { font-size:1.1em; text-decoration: none; color:inherit; } .overlay-top { position:absolute; z-index:-1; display:inline-block; top:0; left: 0px; right: 0px; width: 100%; height:100%; will-change: transform; background-image:url(/images/header-overlay-top.svg); background-size: 70%; background-position: left top; background-repeat: no-repeat; border-radius: 20px 0 20px 0; } .header-overlay-bottom { position:absolute; z-index:5; display:inline-block; bottom:-1px; left:0px; right:0px; width:100%; height:10%; will-change: transform; background-image:url(/images/header-overlay-bottom.svg); background-size: 101vw; background-position: bottom; background-repeat: no-repeat; } footer { position:relative; display: inline-block; width:100%; min-height:400px; overflow-x: hidden; margin: 0 0 -10px 0; padding:60px 0; box-sizing: border-box; text-align: center; color:white; background-color:#213629; background-image: url(../dimages/footer-background.png); background-blend-mode: overlay; background-size: cover; background-repeat: no-repeat; background-position: center; } footer > div:first-of-type { display: flex; flex-direction: row; flex-wrap:wrap; justify-content:space-between; align-items:stretch; align-content: stretch; gap: 60px; } footer > div:first-of-type > div { flex-grow: 1; text-align:left; } footer > div:first-of-type > div:nth-of-type(1) { flex-basis:5%; } footer > div:first-of-type > div:nth-of-type(2) { flex-basis:25%; } footer > div:first-of-type > div:nth-of-type(3) { flex-basis:20%; } footer > div:first-of-type > div:nth-of-type(4) { flex-basis:15%; } footer > div:first-of-type > div > em:first-of-type { font-weight:bold; } footer > div:first-of-type > div:first-child > img { width:150px; } footer > div > div > ul { margin:0 0 1em 0; padding: 0 0 0 0px; list-style: none; } footer > div > div > ul > li > a:first-child { font-weight:bold; } footer > div > div:last-of-type img { height:20px; vertical-align: middle; } footer > div > div:last-of-type em { position: relative; width: 100%; } footer ul { margin:0; padding: 0 0 0 0px; list-style: none; } footer ul li { float:none; } .footer-overlay { position:absolute; z-index:5; display:inline-block; top:-1px; left:0px; right:0px; width:100%; height:10%; will-change: transform; background-image:url(/images/footer-overlay.svg); background-size: 100%; background-position: left top; background-repeat: no-repeat; } #COPY { position: absolute; margin:auto; left: 0; right: 0; bottom:20px; text-align: center; font-size:0.8em; line-height: normal; } #COPY strong { font-weight: normal; } .HDR { position: relative; display: inline-block; width: 100% !important; max-width: unset !important; height:65vh !important; padding:0; vertical-align: middle; } .HDR > div { position: relative; display: inline-block; width: 100% !important; overflow:hidden; max-width: unset !important; opacity: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .HDR > div img { position: absolute; min-width:100%; min-height: 100%; bottom:0; } .TICKER_PREVIOUS, .TICKER_NEXT { background-color: transparent !important; } .TICKER_PREVIOUS { left:-15px !important; } .TICKER_NEXT { right:-15px !important; } .TICKER_NAVI { display:none !important; } .HDR .CAPT { width:80%; max-width: 1300px; padding:0 25px; text-align:left; color:white; } .CTA { margin:15px 0 0 0 !important; background-color: rgba(125, 167, 217, 0.6) !important; color: white !important; font-size: 1.2em; border:none !important; } .CAPT { position: absolute; display: inline-block; bottom:10vh; left:20px; right:20px; margin:auto; width:auto; height:auto; text-align: center; } .CAPT a { float:none !important; } .CAPT em { font-size:2.5em; line-height:1.2em; font-weight: bold; font-style: normal; } .CAPT span { position: relative; display: inline-block; font-size:1.4em; line-height:1.3em; color:white; margin:0 0 20px 0; } #MENU_LIP { position: relative; display: none; z-index:5; right: 3%; top: -5px; font-size: 31pt; cursor:pointer; } .SUB_CONT { position: absolute; display:none; box-sizing: border-box; background-color:rgba(255,255,255,0.7); border-radius:5px; text-align: left; padding:0 0 20px 0; } .SUB_CONT ul { margin:20px 40px 20px 20px; padding:0; list-style:none; } .SUB_CONT ul li { position: relative; display: inline-block; width: 100%; padding: 0 0 0 15px; clear:both; } .SUB_CONT ul li:before { position: absolute; content: '▸'; left:0; width:15px; height:15px; } .SUB_CONT ul li a { position: relative; display: inline-block; color:black; text-decoration: none; width: 100%; } .SUB_CONT ul li a:hover { text-decoration: underline; } .menu-block { flex-basis: 33%; min-height:170px; border-radius:20px 0 20px 0; background-size:cover; background-position: center; background-color: rgba(0,0,0,0.4) !important; background-blend-mode: multiply; box-shadow: 0px 0px 20px rgba(0,0,0,0.1); padding:25px !important; box-sizing: border-box; cursor:pointer; color:white; } .menu-block a { } .tuin { background-image:url(../PResize/w=400&amp;q=80/fileimages/Matthijs_Planten.png); } .onderhoud { background-image:url(../PResize/w=400&amp;q=80/fileimages/Max_Stihl_steelzaag.png); } .gazonaanleg { background-image:url(../PResize/w=400&amp;q=80/fileimages/gazon.png); } .gazonvoorbereiding { flex-basis: 50% !important; background-image:url(../PResize/w=400&amp;q=80/fileimages/gazonvoorbereiding.png); } .gazonaanlegmethodes { flex-basis: 50% !important; background-image:url(../PResize/w=400&amp;q=80/fileimages/gazon.png); } .menu-block h2 { font-size: 1.2em; } section { display: flex; width: 100%; box-sizing: border-box; text-align: justify; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 10%; padding: 0 45px; margin: 0% auto 5% auto !important; border-radius: 20px 0 20px 0; flex-wrap: nowrap; align-content: space-around; transition:opacity 1s; } .PT100 section { padding: 45px; margin: 3% auto !important; } .PT100 section:nth-of-type(even) { flex-direction: row-reverse } section > div img { width:100%; border-radius:10px; } section > div { flex-basis: auto; } section > div:nth-of-type(2) { min-width: 30%; } section > div:empty { display:none; min-width: unset; } section strong { font-weight: normal; } section h1, section > div:first-child > h2:first-child { font-style: normal; font-weight: bold; font-size:2.5em; line-height:1.4em; text-align: left; margin:0 0 0.3em 0; } section h2, section h3 { font-size:1.4em; font-weight: bold; text-align: left; margin:0 0 0.3em 0; clear:both; } section > div:nth-of-type(2) h2 { text-align:center; margin:0 0 0.5em 0; } section p { margin:0 0 1em 0; } blockquote { text-align:center; clear:both; font-family: serif; font-size: 2em !important; line-height: 1.5em; margin: 7% 0; width:100%; padding: 0 0 0 20px; color:gray; } blockquote::before { content: '"'; z-index: 7; position: absolute; font-size: 3em; color: lightgray; margin: 5px 0 0 -33px; } a { color:inherit; text-decoration: none } .cta-block { width:100vw; max-width: 1300px; } .cta-block > div { position: absolute; display: inline-block; z-index: 10; width:90vw; max-width: 1300px; padding: 35px; box-sizing: border-box; background-color: #02793e; color: white; font-size: 2em; font-weight: bold; text-align:left; border-radius: 20px 0 20px 0; margin: auto; left: 0; right: 0; } .cta-block > div > div:nth-child(2) { position: absolute; z-index:11; display: flex; align-items: center; height:170px; width:170px; top: -10px; right: -30px; background-color:#6da743; background-image: url(/images/header-overlay-top.svg); background-size: 100%; background-repeat: no-repeat; border-radius:100px; box-shadow:10px 10px 10px rgba(0,0,0,0.5); box-sizing: border-box; line-height: normal; padding: 0 0 5px 0; text-align:center; font-size:0.6em; color:white; font-weight:normal; transform: rotate(5deg); } .cta-block > div > div > div { width: 100%; } .cta-block > div > div > div em { font-size:1.3em; font-style: normal; font-weight:bold } .bttn, input[type=button] { display: inline-block; padding: 15px 20px; border-radius: 10px 0 10px 0; box-sizing: border-box; background-color: #6da743; border:none; color:white; font-size:1em; } .BRDCMS { position: relative; width: calc(100% - 90px); max-width: 1210px; margin: 0 auto; display: flex; gap: 10px; left: 0px; right: 0px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } #C_FORM_1 { padding:20px; background-color:#00793E; border-radius:20px 0 20px 0; } #C_FORM_1 h2 { color:white; margin:0 0 1em 0; } #C_FORM_1 textarea, #C_FORM_1 input{ width:100%; margin:0 0 10px 0; } #C_FORM_1 textarea { height:150px !important; } .flex-list { display: flex; width: 100%; gap: 40px; overflow-wrap: anywhere; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: stretch; margin:0 0 20px 0; } .flex-list h3, .flex-list h2 { margin:0 0 0.3em 0 !important; } .flex-list > div { flex-basis: 33%; } .flex-list > div > div { position: relative; display: inline-block; padding:40px; background: #ffffff; background: linear-gradient(180deg,rgba(255, 255, 255, 1) 40%, rgba(238, 247, 233, 1) 100%); border-radius:0px 0 10px 10px; } .flex-list > div > div:after { content: ''; position: absolute; z-index:-1; bottom:0; left:2%; right:2%; width:96%; height:40%; box-shadow: 0px 13px 10px rgba(0, 0, 0, 0.1); border-radius:0px 0 10px 10px; } .ok-list { padding: 0px; margin: 0 0 0 0px; list-style: none; text-align: left; } section > div:nth-of-type(2) .ok-list { padding: 25px; color: white; background-color: #6da743; border-radius: 20px 0 20px 0; } .ok-list > li { padding:5px 0 5px 30px; } .ok-list > li:before { content:''; position: absolute; margin: 4px 0 0px -30px; background-image: url(../images/ok-bullet.svg); background-position: center; background-size: 25px; background-repeat: no-repeat; width: 25px; height: 25px; } section > div:nth-of-type(2) .ok-list > li:before { background-image: url(../images/ok-bullet-white.svg); } .FORM_MESSAGE { display:flex; gap:10px; color:white; } .slider-flex { position: relative; display:flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: space-between; align-items: flex-start; gap:20px; } .slider-container { position: relative; display: inline-block; flex-basis:47%; margin: auto; overflow: hidden; border-radius: 5px; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } .slider { position: relative; display: inline-block; width: 100%; height:auto; } .slider img { width: 100%; height:100%; display: block; opacity:1 !important; } .before { position: relative; display: inline-block; top: 0; left: 0; z-index: 1; } .after { position: absolute; display: inline-block; z-index: 2; top: 0; left: 0; width: 100%; clip: rect(0, 50px, 3000px, 0); /* Adjust the width of the visible area */ } .slider-handle { position: absolute; top: 0; left: 50px; /* Starting position of the handle */ width: 5px; height: 100%; background-color: white; cursor: ew-resize; /* Change cursor style when hovering over the handle */ z-index: 2; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 1); } .slider-handle:after { content: '<>'; position: absolute; display: inline-block; top:50%; transform: translateY(-50%); left:-11px; width:25px; height:25px; font-size:19pt; font-weight:bold; color:white; } @media only screen and (max-width: 1300px) { .no-padding { padding:0 25px; } } @media only screen and (max-width: 900px) { .flex-list { flex-direction: column; } section > div:nth-of-type(2) { min-width: 40%; } } @media only screen and (max-width: 700px) { #MENU_LIP { display: block; } header > div:first-child { left:20px; right:20px; } header > div:first-child > div:nth-of-type(2) { order:2; font-size:1em; padding:15px; white-space: nowrap; } header > div:first-child > div:nth-of-type(1) { order:3; } nav > ul { position: fixed; display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: flex-end; z-index:4; min-height: 100vh; min-width:80vw; margin: 0; padding: 150px 55px 0 0; box-sizing: border-box; right: -100vw; top: 0; background-color: white; transition: right 0.5s; } nav > ul.OPEN { right:0; overflow: auto; } .BG { box-shadow: none; background-color:transparent; } nav > ul li { float:none; width: 100%; } nav > ul > li > a { margin:0; padding:15px 0; } .SUB_CONT { margin:0; width:70vw !important; max-width: 70vw !important; background-image:none !important; background-color: white; left:unset !important; right:0; } .SUB_CONT ul li { padding:0 15px 0 0; text-align:right; } .SUB_CONT ul li:before { position: absolute; content: '‹'; left:unset; right: 0; width: 15px; height: 15px; } header img { left: 5%; } section, footer > div:first-of-type { flex-direction: column !important; gap:20px; } .cta-block { margin: -80px auto 0 auto; } } @media only screen and (max-width: 500px) { header > div:first-child > div:nth-of-type(2) { display: none; } section h1, section > div h2:first-child { font-size:1.7em; } section h2, section h3 { font-size:1.1em; } .HDR { height:95vh !important; font-size: 0.7em; } .cta-block > div > div:nth-child(2) { right:0px; top:16vh; } } @media only screen and (max-height: 800px) { .HDR { height:95vh !important; } }