/* CSS Document */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input[type=text],input[type=button],input[type=submit],input[type=password],select{vertical-align:middle}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

*:active, *:focus { 
outline: 0; 
} 

html.mx_logged_in {
margin-top:0 !important;
}

.mx_logged_in #header {
top:52px;
}

.mx_buttons {
  width: 100%;
}

.left-image .mx_buttons.mx_block_image_buttons {
display: none;
  }
  
.right-image .mx_buttons.mx_block_image_buttons {
rotate: -30deg;
  position: absolute;
  }

:root {
--body-font-family: "Raleway", sans-serif;
--body-font-size:18px; 
--body-color:#000000; 
--container-width:1210px; 
--header-font-family: "Maven Pro", sans-serif;
--bg-color:#222222;
--primary-color:#55BA37; /* groen */
--secondary-color-thuis: #E5D20C; /* geel */
--secondary-color-zakelijk: #00A2EB; /* blauw */
--gradient-thuis: linear-gradient(90deg, #55BA37 0%, #E5D20C 100%); /* groen > geel */
--gradient-zakelijk: linear-gradient(90deg, #55BA37 0%, #44C5FF 100%); /* groen > blauw */

--bg-gradient-thuis: linear-gradient(0deg, #E2F1DB 9.73%, #EDF3D5 58.19%, #FAF6CE 111.75%, #FFF7CC 137.25%);
--bg-gradient-zakelijk: linear-gradient(0deg,rgba(226, 241, 219, 1) 0%, rgba(211, 241, 255, 1) 100%);
--bg-deg-gradient-thuis:linear-gradient(26deg,rgba(226, 241, 219, 0.8) 0%, rgba(245, 245, 245, 1) 35%, rgba(245, 245, 245, 1) 65%, rgba(255, 247, 204, 0.8) 100%););
--bg-deg-gradient-zakelijk: linear-gradient(206deg,rgba(226, 241, 219, 1) 0%, rgba(245, 245, 245, 1) 35%, rgba(245, 245, 245, 1) 65%, rgba(211, 241, 255, 1) 100%);
}

@property --myColor1 {
  syntax: '<color>';
  initial-value: #F5F5F5;
  inherits: false;
}

@property --myColor2 {
  syntax: '<color>';
  initial-value: #F5F5F5;
  inherits: false;
}

@property --myColor1trans {
  syntax: '<color>';
  initial-value: rgba(245, 245, 245, 0.07);
  inherits: false;
}

@property --myColor2trans {
  syntax: '<color>';
  initial-value: rgba(245, 245, 245, 0.07);
  inherits: false;
}

body {
margin:0;
padding:0;
color: var(--body-color);
line-height: 1.450;
}

body, p, td, td p {
font-family: var(--body-font-family);
font-size: var(--body-font-size);
font-weight: 400;
}

p, ul {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 30px;
}

h1, .h1 {
font-family: var(--header-font-family);
font-size: 48px;
font-weight: 700;
line-height: 100%;
padding-bottom: 30px;
width: 100%;
}

#bottom h1 {
font-size: 40px;
}

h1 strong, .h1 strong {
background: var(--gradient-thuis);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
}

h2 {
font-family: var(--header-font-family);
font-size:24px;
font-weight: 700;
padding-bottom: 10px;
line-height: 120%;
}

h3 {
font-family: var(--header-font-family);
font-size:16px;
font-weight: 600;
line-height: 140%;
}

h4 {
font-family: var(--header-font-family);
font-size:20px;
font-weight: 700;
padding-bottom: 10px;
line-height: 140%;
color: var(--primary-color);
}

h5 {
font-family: var(--header-font-family);
font-size:20px;
font-weight: 700;
padding-bottom: 10px;
line-height: 140%;
color: var(--secondary-color-zakelijk);
}

h6 {
font-family: var(--header-font-family);
font-size: 20px;
padding-bottom: 30px;
font-weight: 700;
line-height: 140%; /* 28px */
background: var(--gradient-thuis);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

ul.tick {
padding: 0;
margin: 0;
list-style-type: none;
padding-bottom: 35px;
}

ul.tick li {
  display: flex;
  margin-top: 11px;
}

ul.tick li::before {
  content: "\f00c";
  font-family: "Line Awesome Free";
  font-weight: bold;
  width: 30px !important;
  min-width: 30px;
  height: 30px !important;
  min-height: 30px;
  line-height: 30px;
  overflow: hidden;
  background: var(--gradient-thuis);
  border-radius: 30px;
  display: block;
  margin-right: 15px;
  text-align: center;
  color: #FFFFFF;
}

.zakelijk ul.tick li::before {
  background: var(--gradient-zakelijk);
  }

a {
color: var(--secondary-color-zakelijk);
}

.zakelijk h1 strong,.zakelijk .h1 strong, .zakelijk h6 {
background: var(--gradient-zakelijk);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

input[type="text"], input[type="email"], input[type="password"], input[type="phone"], input[type="password"],  input[type="button"], input[type="submit"], input[type="reset"], button, textarea, select {
-webkit-appearance: none;
-webkit-border-radius:8px;
-moz-border-radius:8px;
-khtml-border-radius: 8px;
border-radius: 8px;
border: solid 1px #B1B1B1;
filter: none;
font-size: var(--body-font-size);
font-family: var(--body-font-family);
color:var(--body-color)!important;
padding: 10px 15px;
}

input[type="file"] {
font-size: var(--body-font-size);
font-family: var(--body-font-family);
color:var(--body-color)!important;
width: 100%;
}

button,input[type=button],input[type=submit], .button {
width: auto;
display: inline-block;
color: #FFFFFF!important;
background: var(--gradient-thuis);
cursor: pointer;
padding: 12px 24px;
text-decoration: none;
border-radius: 30px;
font-weight: 600;
font-size: 16px;
border:none;
}

.button + .button {
margin-left: 15px;
}

.zakelijk button,.zakelijk input[type=button],.zakelijk input[type=submit], .zakelijk .button {
background: var(--gradient-zakelijk);
}

.outline, .zakelijk .outline {
background: transparent;
border:solid 2px var(--bg-color);
color:var(--body-color)!important;
padding: 10px 22px;
}

ul.button-group {
list-style-type: none;
padding: 20px 0px 5px 0;
margin-bottom: 55px;
text-align: center;
width: 100%;
white-space: nowrap;
overflow: auto;
}

ul.button-group li {
display: inline-block;
}

ul.button-group li a {
display: inline-block;
border:solid 2px var(--bg-color);
color:var(--body-color);
padding: 5px 15px;
text-decoration: none;
border-radius: 30px;
font-weight: 600;
font-size: 16px;
margin: 5px;
}

ul.button-group li.mx_first a {
margin-left: 0;
}

ul.button-group li.mx_last a {
margin-right: 0;
}

ul.button-group li.mx_current a {
color: #FFFFFF;
background: var(--gradient-thuis);
border: none;
padding: 7px 17px;
}

ul.button-group li a:hover {
background: var(--body-color)!important;
color: #FFFFFF;
}

.zakelijk ul.button-group li.mx_current a {
background: var(--gradient-zakelijk);
}

.content img[style*="left"], .content img[align="left"] { margin: 0 40px 10px 0; }
.content img[style*="right"], .content img[align="right"] { margin: 0 0 10px 40px; }

.content img, .block img {
max-width:100%;
height:auto;
}

img:not([src]):not([srcset]) {
  visibility: hidden;
}

table, tr, td {
height:auto !important;
}

.mobiel {
display:none;
}

#headerwrapper {
background-color: var(--bg-color);
width: 100%;
z-index: 99;
}

#headerwrapper.stick {
position: fixed;
}

#header {
max-width: var(--container-width);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
padding: 0 30px;
align-items: center;
}

#logo {
width: 300px;
}

#logo img {
display: block;
max-width: 100%;
}

#topnav {
width: calc(100% - 500px);
text-align: right;
padding: 20px 15px 20px 0;
}

#search {
width: 60px;
align-content: center;
color: #FFF;
border-right: solid 1px rgba(255, 255, 255, 0.30);
padding-right: 30px;
margin-right: 30px;
text-align: right;
position: relative;
}

#search i {
font-size: 30px;
background: linear-gradient(90deg, var(--myColor1), var(--myColor2));
transition: --myColor1 1s, --myColor2 1s;
-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
cursor: pointer;
}

#search:hover i {
  --myColor1: var(--primary-color);
  --myColor2: var(--secondary-color-thuis);
}

.zakelijk #search:hover i {
  --myColor1: var(--primary-color);
  --myColor2: var(--secondary-color-zakelijk);
}

#mx_search_form {
position: absolute;
top: -7px;
right: 75px;
width: 400px;
transition: all 0.7s ease;
}

#mx_search_form.hidden {
width: 0;
overflow: hidden;
}

#mx_search_form input[type="text"] {
width: 100%;
background-color: var(--bg-color);
border:none;
border-bottom: solid 1px #FFFFFF;
border-radius: 0;
color: #FFFFFF!important;
padding: 12px 15px;
}

#mx_search_form input[type="submit"] {
position: absolute;
top: 0;
right: 0;
background: transparent;
padding: 0;
font-size: 26px;
}

#navwrapper {
width: 100%;
background: var(--gradient-thuis);
}

.zakelijk #navwrapper {
background: var(--gradient-zakelijk);
}

#nav {
max-width: var(--container-width);
width: 100%;
margin: 0 auto;
padding: 0 15px;
}

#breadcrumbs {
width:100%;
height:50px;
line-height:50px;
font-size:12px;
color:#F5F5F5;
text-align: center;
}

#breadcrumbs ul {
padding: 0;
margin: 0;
white-space: nowrap;
overflow: auto;
}

#breadcrumbs ul li { display: inline; }

#breadcrumbs ul li a {
width:auto;
color:#F5F5F5;
text-decoration: none;
}

#breadcrumbs ul li a:after {
content:">";
padding-left:10px;
padding-right:10px;
}

#breadcrumbs ul li a:hover span {
text-decoration:underline;
}

#breadcrumbs ul li a[href*=\#] {
pointer-events:none;
}

.content {
max-width: var(--container-width);
margin: 0 auto;
padding: 90px 30px 60px 30px;
}

.blockwrapper.white .block {
overflow: hidden;
}

.contentwrapper + .contentwrapper .content,
.contentwrapper + .blockwrapper.white .block,
.blockwrapper.white + .contentwrapper .content {
padding-top: 0;
}

.blockwrapper.news .block {
padding-bottom: 0;
}

.contentwrapper.gradient .content {
padding-top: 90px!important;
z-index: 2;
  position: relative;
}

.content.small {
max-width: 860px;
text-align: center;
margin: 0 auto;
}

.block .content.small {
padding-bottom: 0;
padding-top: 20px;
}

#bottomwrapper {
width: calc(100% - 60px);
max-width: calc(var(--container-width) - 60px);
margin:100px auto;
height: auto;
background-color:#f5f5f5;
min-height: 200px;
position: relative;
overflow: hidden;
border-radius: 25px;
}

#topwrapper {
width: 100%;
position: relative;
overflow: hidden;
background: var(--bg-gradient-thuis);
}

.zakelijk #topwrapper {
background: var(--bg-gradient-zakelijk);
}

#bottomwrapper .mx_block_image_buttons {
float:right;
}

#bg-bottom, #bg-top {
position: absolute;
width: 45%;
height: 150%;
top: -25%;
right: 0;
background-position-x: 0%;
background-position-y: 0%;
background-size: auto;
background-size: cover !important;
background-position: center center !important;
border-bottom-left-radius: 50% 100%;
border-top-left-radius: 50% 100%;
z-index: 1;
}

#bg-top {
border: solid 7px var(--primary-color);
border-right: none;
overflow: hidden;
}

.zakelijk #bg-top {
border: solid 7px var(--secondary-color-zakelijk);
border-right: none;
}

#top-outer {
max-width: var(--container-width);
width: 100%;
margin: 0 auto;
min-height: 500px;
display: flex;
align-items: center;
}

#bottom, #top {
width: 55%;
max-width: 600px;
padding: 60px 50px 30px 50px;
}

#top {
padding: 60px 30px 30px 30px;
}

#topwrapper.contact {
border-radius: 20px;
max-width: var(--container-width);
margin: -300px auto 0 auto;
z-index: 2;
width: calc(100% - 40px);
}

.contact #top {
width: 60%;
display: flex;
flex-wrap: wrap;
max-width: inherit;
padding: 30px 30px 30px 30px;
}

.contact #bg-top {
width: 40%;
}

.contact iframe {
pointer-events: none;
}

.contact .center-label {
top: calc(50% - 5px);
left: calc(50% - 125px);
width: 250px;
}
.contact .center-label a{
text-decoration: none;
}

.contact .center-label .dot {
top: -40px;
left: calc(50% - 30px);
z-index: 1;
}

#footerwrapper {
background-color: var(--bg-color);
}

#footer {
max-width: var(--container-width);
margin: 0 auto;
padding: 80px 30px 0 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#footer, #footer p, #footer a {
color: #F5F5F5;
text-decoration: none;
line-height: 34px;
}

.column img {
display: inline-block;
margin-bottom: 40px;
max-width:340px;
width: 100%;
}

#footer a i {
background: #F5F5F5;
color: var(--bg-color);
display: inline-block;
margin-right: 15px;
width: 34px;
height: 34px;
line-height: 34px;
border-radius: 30px;
font-size: 30px;
text-align: center;
background: linear-gradient(90deg, var(--myColor1), var(--myColor2));
transition: --myColor1 1s, --myColor2 1s;
}

#footer a:hover i {
  --myColor1: var(--primary-color);
  --myColor2: var(--secondary-color-thuis);
}

.zakelijk #footer a:hover i{
  --myColor1: var(--primary-color);
  --myColor2: var(--secondary-color-zakelijk);
}

#footer .la-facebook-f::before {
position: relative;
top: 4px;
}

#footer .column:nth-of-type(4) i {
width: 24px;
height: 24px;
line-height: 24px;
font-size: 18px;
}

#partners {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 30px 0
}

#partnerheader {
width: 250px;
font-family: "Maven Pro";
font-size: 20px;
font-style: normal;
font-weight: 700;
}

#partnerlogos {
width: calc(100% - 250px);
}

.logo_slider {
height: 75px;
overflow: hidden;
}

.logo_slider .owl-item .logo {  
padding: 0 40px;
display: flex;
height: 75px;
}

.logo_slider .owl-item img {
max-width: 185px;
max-height: 75px;
height: auto;
width: auto;
align-self: center;
}

#copywrapper {
border-top: solid 1px rgba(255, 255, 255, 0.30);
max-width: var(--container-width);
padding: 30px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#copywrapper, #copywrapper a {
color: #F5F5F5;
text-decoration: none;
font-size: 14px;
}

#copywrapper a:hover {
text-decoration: underline;
}

.clear {
clear: both;
}

.blockwrapper.bg {
width: 100%;
color: #F5F5F5;
background-image: url("../images/bg-uspwrapper-thuis.webp");
background-position: center center;
background-size: cover;
position: relative;
}

.zakelijk .blockwrapper.bg {
background-image: url("../images/bg-uspwrapper-zakelijk.webp");
}

.blockwrapper.bg.hero {
background-image: url("../images/bg-hero-thuis.webp");
}

.blockwrapper.bg.hero.contact {
padding-bottom: 300px;
}

.zakelijk .blockwrapper.bg.hero {
background-image: url("../images/bg-hero-zakelijk.webp");
}

.blockwrapper.bg:before {
content: "";
width: 100%;
height: 100%;
background-color: #000000;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
z-index: 1;
}

.blockwrapper.bg * {
color: #F5F5F5;
z-index: 2;
}

.gradient .block {
z-index: 2;
}

.gradient {
position: relative;
background: var(--bg-deg-gradient-thuis);
overflow: hidden;
}

.gradient::before {
content: "";
background-image: url("../images/circle-left.svg");
width: 65px;
height: 162px;
display: block;
position: absolute;
top: 10%;
left: 0;
filter: invert(67%) sepia(34%) saturate(919%) hue-rotate(61deg) brightness(88%) contrast(84%);
}

.zakelijk .gradient::before {
filter: invert(50%) sepia(78%) saturate(2548%) hue-rotate(167deg) brightness(95%) contrast(102%);
}

.gradient::after {
content: "";
background-image: url("../images/circle-right.svg");
width: 65px;
height: 162px;
display: block;
position: absolute;
bottom: calc(20vw - 81px);
right: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
z-index: 1;
}

.algemeen.gradient::after, .algemeen.gradient::before,
.round.gradient::before {
display: none;
}

.zakelijk .gradient, .gradient.algemeen {
background: var(--bg-deg-gradient-zakelijk);
overflow: hidden;
}

.blockwrapper.round {
background: var(--bg-deg-gradient-thuis);
position: relative;
}

.blockwrapper.round:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.08;
background-image: url("../images/bg-round-thuis.webp");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: hard-light;
}

.zakelijk .blockwrapper.round {
background: var(--bg-deg-gradient-zakelijk);
}

.zakelijk .blockwrapper.round:after {
background-image: url("../images/bg-round-zakelijk.webp");
background-position: top center;
}

.boorwagen {
position: absolute;
bottom: 0;
left: 0;
width: 250px;
}

.block {
max-width: var(--container-width);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 70px 0;
position: relative;
}

.round .block {
overflow: hidden;
}

.blockwrapper.white + .blockwrapper.white.even {
margin-top: -170px;
}

.blockwrapper.white + .blockwrapper.white.even .block {
padding-top: 314px;
}

.blockwrapper.white + .blockwrapper.white.even:before {
content: "";
  height: 370px;
  width: 100%;
  background-image: url("../images/arrow-plane.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 370px;
  position: absolute;
left: 0;
pointer-events: none;
}

.block-inner {
display: flex;
}

.block-50 {
width: 50%;
padding: 30px;
}

.comfort-home .block-50:first-of-type {
display: flex;
flex-wrap: wrap;
gap: 30px;
padding: 10px;
}

.block-33 {
width: 33%;
padding: 30px;
display: flex;
flex-direction: column;
gap: 50px;
}

.block-66 {
width: 66%;
padding: 30px;
}

.block-50.image {
display: flex;
align-items: center;
overflow: hidden;
}

.block-50.image img.large {
max-width: 85%;
position: relative;
z-index: 1;
border-radius: 20px;
left:-15%;
}

.block-50.image img.small {
max-width: 30%;
position: relative;
z-index: 2;
border-radius: 20px;
}

.round .block-50.image {
padding: 60px;
position: relative;
}

.round .block-50, .round .block-full {
z-index: 1;
}

.round .block-50.image .inner {
display: flex;
flex-wrap: wrap;
rotate:30deg;
}

.block-50.image .left-image {
width: 50%;
aspect-ratio: 1 / 2; 
clip-path: ellipse(100% 50% at 100% 50%); 
overflow: hidden;
border-right: solid 7.5px transparent;
top: 25px;
position: relative;
}

.block-50.image .right-image {
width: 50%;
aspect-ratio: 1 / 2;
clip-path: ellipse(100% 50% at 0% 50%);
overflow: hidden;
border-left: solid 7.5px transparent;
}

.block-50.image .left-image img {
width: calc(200% + 50px);
rotate: -30deg;
top: -10px;
  position: relative;
  max-width: none;
}

.block-50.image .right-image img {
width: calc(200% + 50px);
float: right;
rotate: -30deg;
position: relative;
  top: 18px;
  left: 30px;
  max-width: none;
}

.left-label, .right-label, .center-label {
position: absolute;
width: calc(60% - 15px);
}

.left-label {
margin-left: 15px;
}

.right-label {
margin-right: 15px;
}

.center-label {
margin-left: 7.5px;
margin-right: 7.5px;
}

.bubble {
padding: 15px;
background-color: #FFFFFF;
font-size: 15px;
border-radius: 20px;
z-index: 2;
position: relative;
}

.right-label .bubble, .block-50.image .left-label .bubble{
border-radius:20px 0  20px 20px;
}

.left-label .bubble {
border-radius: 20px 20px 20px 0;
}

.block-50.image .right-label .bubble{
border-radius: 0 20px 20px 20px;
}

#hotspots {
position: relative;
margin-top: -15vw;
pointer-events: none;
}

#hotspots img{
display: block;
}

#hotspots .left-label {
left:10%;
bottom: 10%;
width: 315px;
height: 95px;
}

#hotspots .center-label {
left:calc(50% - 166px);
bottom: 35%;
width: 315px;
height: 95px;
}

#hotspots .right-label{
right:10%;
bottom: 60%;
width: 315px;
height: 95px;
}

.dot {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50px;
background-image: url("../images/dot-thuis.svg");
display: block;
z-index: 1;
}

.zakelijk .dot {
background-image: url("../images/dot-zakelijk.svg");
}

#hotspots .left-label .dot {
bottom: -32px;
left: -30px;
}

#hotspots .center-label .dot {
top: -32px;
left: calc(50% - 30px);
}

#hotspots .right-label .dot {
top: -32px;
right: -30px;
}

.block-50.image .left-label {
top: 40px;
right: 40%;
}

.block-50.image .right-label {
bottom: 0;
left: 40%;
}

.block-50.image .left-label .dot {
top: -32px;
right: -30px;
}

.block-50.image .right-label .dot {
top: -32px;
left: -30px;
}

.even .block-50 {
order: 2;
}

.even .block-50.image {
order: 1;
}

.even .block-50.image img.large {
order: 1;
left: 0;
}

.even .block-50.image img.small {
order: 2;
left: -15%;
}

.block-full {
width: 100%;
text-align: center;
padding: 15px 5px;
display: flex;
  flex-wrap: wrap
}

.block-full > h1,
.block-full > h2,
.block-full > h3{
width: 100%;
max-width: 860px;
margin: 0 auto;
text-align: center;
}

#leaf, #leaf-private {
z-index: 9!important;
width: 80px;
height: auto;
position:absolute;
transition: all 0.7s ease;
pointer-events: none; /* zodat plaatje niet interfereert met hover */
left:20px;
top: 20px;
}

#leafcontainer.block, #leafcontainer-private.block {
position: relative;
}

#leafcontainer .block-50:first-of-type, #leafcontainer-private .block-50:first-of-type {
padding-top: 70px;
}

.usp-block { 
width: calc(33.3% - 50px);
margin: 25px;
/*background: rgba(245, 245, 245, 0.07);*/
border-radius: 16px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
text-align: left;
background: linear-gradient(90deg, var(--myColor1trans), var(--myColor2trans));
transition: --myColor1trans 1s, --myColor2trans 1s;
overflow: hidden;
position: relative;
padding: 30px 30px 0 30px;
}

.block-50 .usp-block { 
width: 100%;
margin: 0;
}

.comfort-home .block-50 .usp-block { 
width: calc(50% - 15px);
background: #b7b7b72e;
margin: 0;
}

.comfort-home .block-50 .usp-block:nth-of-type(odd) { 
top:-50px;
}

.block-33 .usp-block { 
width: 100%;
text-align: center;
margin: 0;
flex: 1;
display: flex;
align-items: center;
}

.block-33 .usp-block .icon, .contact .usp-block .icon { 
margin-left: auto;
  margin-right: auto;
  }
  
.block-33 .usp-block p, .block-33 .usp-block strong, .contact .usp-block p, .contact .usp-block strong { 
color: var(--body-color);
}

.block-33 .usp-block:hover:has(a) p, .block-33 .usp-block:hover:has(a) strong { 
color: #FFFFFF;
}

.contact .usp-block {
width: calc(55% - 30px);
text-align: center;
margin: 15px;
min-height: 189px;
}

.contact .usp-block:nth-of-type(2), .contact .usp-block:nth-of-type(3) {
width: calc(45% - 30px);
}

.usp-block.image * { 
color:#FFFFFF;
}

.usp-block.image .icon {
margin-bottom: 150px;
}

.usp-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
z-index: -1;
transition: all 0.5s ease;
}

.usp-image:after {
content:"";
display: block;
background: linear-gradient(180deg,rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.8) 100%);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.block-33 .usp-image:after, .grey .usp-image:after, .contact .usp-image:after {
display: none;
}

.usp-block:hover:has(a) .usp-image {
opacity: 0;
}

.usp-block a {
color: #FFFFFF;
color: inherit;
display: block;
text-decoration: none;
width: 100%;
}

.usp-block .icon {
width: 50px;
height: 50px;
background-color: #F5F5F5;
border-radius: 50px;
text-align: center;
line-height: 50px;
font-size: 30px;
margin-top: -5px;
margin-bottom: 5px;
}

.usp-block .description {
padding-top: 55px;
transition: all 0.5s ease;
}

.usp-block:hover:has(a) .description {
padding-top: 0;
padding-bottom: 55px;
}

.usp-block p.link {
position: absolute;
bottom:-40px;
transition: all 0.5s ease;
padding-bottom: 0;
line-height: 40px;
padding: 0 25px;
background-color: #FFFFFF;
color: var(--body-color);
border-radius: 30px;
  font-weight: 600;
  font-size: 16px;
  opacity: 0;
}

.usp-block:hover:has(a) p.link {
bottom: 30px;
opacity: 1;
}

.usp-block .icon i, .thuis .usp-block:hover:has(a) .icon i, .grey .usp-block h2, .contact .usp-block:hover:has(a) .icon i {
background: var(--gradient-thuis);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.zakelijk .usp-block .icon i, .zakelijk .usp-block:hover:has(a) .icon i, .zakelijk .grey .usp-block h2 {
background: var(--gradient-zakelijk);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.grey .usp-block, .contact .usp-block { 
background: linear-gradient(90deg, var(--myColor1), var(--myColor2));
transition: --myColor1 1s, --myColor2 1s;
}

.zakelijk .grey .usp-block .icon {
background: var(--gradient-zakelijk);
}

.thuis .grey .usp-block .icon, .contact .usp-block .icon {
background: var(--gradient-thuis);
}

.grey .usp-block:hover:has(a) .icon, .contact .usp-block:hover:has(a) .icon  {
background: #FFFFFF!important;
}

.grey .usp-block .icon i, .contact .usp-block .icon i {
background:#FFFFFF;
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.grey .usp-block a, .contact .usp-block a {
color: var(--body-color);
}

.grey .usp-block:hover:has(a) a, .contact .usp-block:hover:has(a) p, .contact .usp-block:hover:has(a) strong  {
color:#FFFFFF;
}

.grey .usp-block:hover:has(a) h2, .contact .usp-block:hover:has(a) h2 {
background: #FFFFFF;
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.zakelijk .usp-block .icon i {
color: #FFFFFF;
}

.usp-block:hover:has(a) { 
  --myColor1trans: var(--primary-color);
  --myColor2trans: var(--secondary-color-thuis);
}

.zakelijk .usp-block:hover:has(a) { 
  --myColor1trans: var(--primary-color);
  --myColor2trans: var(--secondary-color-zakelijk);
}

.zakelijk .grey .usp-block:hover:has(a) { 
  --myColor1: var(--primary-color);
  --myColor2: var(--secondary-color-zakelijk);
}

.thuis .grey .usp-block:hover:has(a), .contact .usp-block:hover:has(a) { 
  --myColor1: var(--primary-color);
  --myColor2: var(--secondary-color-thuis);
}

.comfort-home .usp-block:nth-of-type(1):hover:has(a) {
background: var(--secondary-color-zakelijk);
color: #FFFFFF;
}

.comfort-home .usp-block:nth-of-type(2):hover:has(a) {
background: var(--primary-color);
color: #FFFFFF;
}

.comfort-home .usp-block:nth-of-type(3):hover:has(a) {
background: var(--secondary-color-thuis);
color: #FFFFFF;
}

.comfort-home .usp-block:nth-of-type(4):hover:has(a) {
background: var(--bg-color);
color: #FFFFFF;
}

#cycle img {
height: auto;
border-radius: 20px;
}

#cycle .owl-item {
aspect-ratio:1/1;
background-color: #FFFFFF;
display: flex;
align-items: center;
}

#counter {
display: flex;
flex-wrap: wrap;
padding-top: 90px;
padding-bottom: 15px;
}

.counter {
width:calc(50% - 15px);
padding: 30px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
background-color:rgba(253, 216, 0, 0.22);
text-align:center;
margin-left: 15px;
margin-top: 15px;
margin-bottom: 15px;
}

.counter.odd {
margin-left: 0;
margin-right: 15px;
top: -50px;
position: relative;
}

.counter span {
font-size:36px;
font-weight: 600;
color:#5FB748;
}

.counter span.percent {
font-size: 22px;
font-weight: 800;
}

.counter span.count {
font-size:52px;
font-weight: 700;
padding-right: 5px;
}

#reviews .owl-stage-outer {
padding: 0 15px;
}

#reviews .owl-stage {
    display: flex;
}

.review {
width: calc(100vw - 60px);
max-width: 575px;
background-color: #FFFFFF;
padding: 30px;
border-radius: 20px;
border: 1px solid #E4E4E4;
box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.05);
text-align: left;
height: 100%;
display: flex;
flex-wrap: wrap;
}

.review-content {
padding-left: 80px;
position: relative;
}

.review-content:before {
content:"";
background-image: url("../images/quotes.svg");
width: 38px;
height: 31px;
display: block;
position: absolute;
left: 0;
top: 0;
filter: invert(50%) sepia(78%) saturate(2548%) hue-rotate(167deg) brightness(95%) contrast(102%);
}

.review-info {
align-self: flex-end;
width: 100%;
padding-top: 30px;
}

.review-info img {
width: 74px!important;
float: left;
border-radius: 50px;
margin-right: 30px;
margin-top: -10px;
}

.review-info p {
padding-bottom: 0;
}

.review-info p:last-of-type {
font-size: 16px;
color:#868686;
}

.member {
width: calc(100vw - 60px);
max-width: 380px;
overflow: hidden;
border-radius: 20px;
position: relative;
background-color: #000000;
}

.member img {
display: block;
transition: all 0.7s ease;
}

.member:hover img {
transform: scale(1.1); 
opacity: 0.8;
}

.member-info {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
padding: 0 30px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.8));
}

.member-info h6 {
font-size: 32px;
position: absolute;
bottom: 10%;
  width: 100%;
  left: 0;
transition: all 0.7s ease;
}

.member-info p {
opacity: 0;
position: absolute;
bottom: -10%;
  width: 100%;
  left: 0;
transition: all 0.7s ease;
}

.member:hover .member-info h6{
bottom:25%;
}

.member:hover .member-info p{
opacity: 1;
bottom: 10%;
}


.faq {
border-radius: 30px;
cursor: pointer;
padding: 56px 60px;
position: relative;
}

.faq.active {
box-shadow: 0px 196px 55px 0px rgba(0, 0, 0, 0.00), 0px 126px 50px 0px rgba(0, 0, 0, 0.01), 0px 71px 42px 0px rgba(0, 0, 0, 0.05), 0px 31px 31px 0px rgba(0, 0, 0, 0.09), 0px 8px 17px 0px rgba(0, 0, 0, 0.10);
background: #FFF;
}

.faq:before {
position: absolute;
right: 60px;
top: 55px;
width: 36px;
height: 36px;
border:solid 2px #636363;
color: #636363;
content:"+";
display: block;
border-radius: 30px;
font-size: 44px;
  line-height: 36px;
  text-align: center;
  pointer-events: none;
  font-weight: 300;
}

.faq.active:before {
content:"-";
line-height: 29px;
}

.question {
font-weight: bold;
font-family: var(--header-font-family);
font-size: 24px;
padding-right: 60px;
}

.faq:after {
content: "";
width:100%;
height: 1px;
background-color:#B1B1B1;
display: block;
position: relative;
bottom: -57px;
}

.faq.active:after {
background-color:transparent;

}

.answer {
display: none;
padding-top: 30px;
}

.mx_pagination ul, .mx_pagination li {
border:none !important;
float:none !important;
text-align:center;
}

.mx_pagination li {
display:inline-block;
-webkit-border-radius: 20px !important;
-moz-border-radius: 20px !important;
-khtml-border-radius: 20px !important;
border-radius: 20px !important;
}

.mx_pagination li a{
background-color:#F2F2F2;
-webkit-border-radius: 20px !important;
-moz-border-radius: 20px !important;
-khtml-border-radius: 20px !important;
border-radius: 20px !important;
width:34px;
height:34px;
line-height:30px;
color:#000000;
padding:0 !important;
}

.mx_pagination li.mx_current a {
    background-color:var(--primary-color)!important;
	color:#FFFFFF;
}


@media screen and (max-width: 1200px) {

.column:first-of-type {
max-width: 25%;
}

.blockwrapper.white + .blockwrapper.white.even {
margin-top: -17.5vw;
}

.blockwrapper.white + .blockwrapper.white.even .block {
padding-top: 22.5vw;
}

.blockwrapper.white + .blockwrapper.white.even:before {
height:25vw;
background-size: auto 25vw;
}

} /* end mediaquery */

@media screen and (max-width: 1080px) {

h1, .h1 {
font-size: 36px;
}

#bottom h1 {
font-size: 30px;
}

#header {
padding: 0 20px;
}

#nav {
padding: 0 10px;
}

.usp-block {
  width: calc(33.3% - 30px);
  margin: 15px;
  padding: 30px 20px 0 20px;
  }
  
.contact #top {
padding: 15px;
}
  
.comfort-home .block-50:first-of-type {
gap:20px;
padding-left: 15px;
  padding-right: 0;
}

.comfort-home .block-50 .usp-block {
  width: calc(50% - 10px);
  }

.block-33 {
padding-right: 0;
}

.column:nth-of-type(2) {
order: 1;
}

.column:nth-of-type(3) {
order: 2;
}

.column:nth-of-type(1) {
max-width: 50%;
order: 4;
}

.column:nth-of-type(4) {
order: 3;
}

#partners {
order:5;
}

.column {
width: 50%;
padding-bottom: 15px;
}

.faq {
padding: 30px;
}

.faq:before {
right: 30px;
  top: 25px;
}

.faq:after {
bottom: -31px;
}

.question {
font-size: 22px;
}

#bottom {
padding: 30px 30px 0px 30px;
}

#hotspots .left-label {
left: 5%;
}

#hotspots .right-label {
right: 5%;
}
  
} /* end mediaquery */

@media screen and (max-width: 1023px) {

#logo {
width: 250px;
}

#topnav {
width: calc(100% - 370px);
padding-right: 5px;
} 

#search {
width: 45px;
}

#mx_search_form {
right: 60px;
}

.usp-block h2 {
font-size:22px;
}

.block-33.grey {
display: none;
}

.block-66 {
width: 100%;
}

.gradient::before {
top: -60px;
}

.gradient::after {
bottom: -60px;
}

} /* end mediaquery */

@media screen and (max-width: 950px) {

#bottomwrapper {
margin-top: 30px;
margin-bottom:30px;
}

.comfort-home .block-50 {
width: 100%;
order: 1;
}

.comfort-home .block-50:first-of-type {
order:2;
padding-right: 30px;
padding-left: 30px;
padding-top: 50px;
}

.grey .block-full {
padding-left: 30px;
padding-right: 30px
}

.grey .usp-block {
width: calc(50% - 15px)!important;
margin-right: 15px;
margin-left: 0;
}

.grey .usp-block:nth-of-type(2n) {
margin-right: 0;
margin-left: 15px;
}

.grey .usp-block:has(.usp-image) {
display: none;
}

} /* end mediaquery */

@media screen and (max-width: 860px) {

#logo {
width: calc(100% - 140px);
}

#header {
height: 65px;
}

#topnav {
display: none;
}

#search {
  width: 65px;
  padding-right: 15px;
  margin-right: 15px;
  }

#mx_search_form {
width: calc(100vw - 440px);
}

#top-outer {
min-height:auto;
}

#bottom, #top, .contact #top {
width: 100%;
max-width: 100%;
}

.contact #bg-top {
width: 150%;
border-bottom-left-radius: 0;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  border-bottom: none!important;
  height: 300px;
}

.contact iframe {
  height: 500px;
  top: -100px;
  position: relative;
  left: 10px;
  }

#bg-bottom, #bg-top {
width: 150%;
position: relative;
height: 60vw;
top: inherit;
left: -25%;
border-bottom-left-radius: 0;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  border-bottom: none!important;
}

.usp-block {
width: 100%;
margin-left: 0;
margin-right: 0;
}

.block-full {
padding-left: 30px;
padding-right: 30px;
}

.block-50 {
width: 100%;
padding: 0 30px;
}

.block-50.image {
max-width: 600px;
margin: 0 auto;
padding-top: 20px;
}

.even .block-50.image {
order: 3;
}

.slider .block-50 {
order: 1;
}

.slider .block-50:first-of-type {
order: 2;
max-width: 640px;
margin: 0 auto;
}

  .blockwrapper.white + .blockwrapper.white.even {
  margin-top: 0;
  }

  .blockwrapper.white + .blockwrapper.white.even .block {
    padding-top: 60px;
  }

  .blockwrapper.white + .blockwrapper.white.even::before {
transform: scaleX(-1);
    margin-top: -240px;
    background-size: contain;
    background-position: center right;
    height: 300px;
    width: calc(100% - 20px);
    margin-left: 20px;
  }

.faq {
padding: 30px 15px;
border-radius: 15px;
}

.faq::before {
right: 15px;
}

} /* end mediaquery */

@media screen and (max-width: 640px) {

.desktop {
display: none;
}

.mobiel {
display: block;
margin: 0 auto;
}

 #mx_search_form {
    width: calc(100vw - 175px);
    }

.contact .usp-block {
width: 100%!important;
}

.contact .usp-block:first-of-type {
display: none;
}

#bottomwrapper {
margin: 20px;
width: calc(100% - 40px);
}

#top {
  padding: 30px 20px 10px 20px;
}

 #bottom {
    padding: 30px 20px 0px 20px;
  }

.bg .block {
padding-top: 35px;
padding-bottom: 35px;
}

.block-full, .grey .block-full, .content, .block-66, .block-50, .comfort-home .block-50:first-of-type {
padding-left: 20px;
padding-right: 20px;
}

.round .block-50.image {
padding: 15px 20px 15px 30px;
}

.grey .usp-block {
width: 100%!important;
margin-right: 0!important;
margin-left: 0!important;
}

#partnerheader {
width: 100%;
text-align: center;
padding-bottom: 20px;
}

#partnerlogos {
width: 100%;
}

.column {
width: 100%;
max-width: inherit!important;
text-align: center;
}

.faq {
padding: 15px;
}

.faq:before {
top: 15px;
width: 28px;
height: 28px;
line-height: 28px;
}

.faq.active::before {
line-height: 20px;
}

.faq:after {
bottom: -16px;
}

.question {
font-size: 18px;
}

.review-content {
padding-left:0;
padding-top: 20px;
}

.review-content:before {
top:-15px;
}

#leaf, #leaf-private {
width: 60px;
}

.usp-block:has(a) .description {
  padding-top: 0;
  padding-bottom: 55px;
}

.usp-block:has(a) p.link {
  bottom: 30px;
  opacity: 1;
}

} /* end mediaquery */

@media screen and (max-width: 550px) {


.bubble {
position: absolute;
}

 
#hotspots .right-label {
top: inherit;
top:20px;
}

#hotspots .right-label .bubble {
border-radius: 20px 20px 0 20px;
}

#hotspots .right-label .dot {
  top: 65px;
  right: -30px;
  }

#hotspots .left-label {
bottom: 35px;
}

#hotspots .left-label .dot {
  bottom: -30px;
  left: -30px;
}

#hotspots .center-label {
bottom: 45%;
}

#hotspots .center-label .dot {
  top: 66px;
  }


.round .block-50.image {
    padding: 60px 20px 90px 30px;
  }

.bubble {

}

.block-50.image .left-label .dot {
  top: calc(100% - 30px);
  right: -30px;
}

.left-label, .right-label, .center-label {
width: calc(100% - 60px);
}

.block-50.image .left-label {
right: 45px;
top: 0;
}

.block-50.image .right-label {
left: 45px;
}

.comfort-home .block-50 .usp-block {
width: 100%;
top: 0!important;
}

.button {
display: block;
text-align: center;
}

.button + .button {
margin-left: 0;
margin-top: 15px;
}

#logo {
width: calc(100% - 125px);
}

#mx_search_form {
    width: calc(100vw - 155px);
  }

.review-info p:last-of-type {
clear: left;
}

.review-info img {
margin-top: -20px;
  margin-bottom: 10px;
  }

} /* end mediaquery */