/* normal */

:root{
	--text_clr: #202224;
	--clr1: #c98300;
	--clr2: #202224;
	--clr3: #64af3a;
	--border_clr : #cccccc;
	--box_clr : #e2e2e2;
	--border_radius: 20px;
	--light_text: #9c9c9c;
	--awesome100 : 100 100% "Font Awesome 6 Pro";
	--awesome300 : 300 100% "Font Awesome 6 Pro";
	--awesome400 : 400 100% "Font Awesome 6 Pro";
	--awesome900 : 900 100% "Font Awesome 6 Pro";
	--light_weight: 300;
	--normal_weight : 400;
	--medium_weight : 600;
	--bold_weight : 700;
	
}

* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	
}
html,
body {
	font-family: figtree, sans-serif;
	font-size: 18px;
	color: var(--text_clr);
	font-weight: var(--normal_weight);
	line-height:2;
	word-break: break-word;
	scroll-behavior:smooth;
	overflow-x: hidden;
	
}

body {
	background: #fff;
}
img {
	border: 0px;
	display: block;
	max-width: 100%;
	height:auto;
}
a{color:inherit; text-decoration: none; transition-duration:0.2s;}

input,
select,
textarea,
button{ -webkit-appearance: none;-moz-appearance:none; appearance:none; outline: none; font:inherit}
input[type="checkbox"]{-webkit-appearance: unset;-moz-appearance:unset; appearance:unset;}
button{cursor:pointer}

ul {
	list-style: disc;
}
h1,.h1,
h2,.h2,
h3,.h3,
h4,.h4,
h5,.h5,
h6,.h6, .title {
	font-family: "bungee", sans-serif; font-weight: var(--normal_weight); line-height:1.3; color:var(--clr2)
}

h1, .h1{font-size:40px;}
h2, .h2{font-size:30px;}
h3, .h3{font-size:22px;}
h4, .h4{font-size:20px;}
h5, .h5{font-size:19px;}
h6, .h6{font-size:18px;}

h1 span, .h1 span,
h2 span, .h2 span,
h3 span, .h3 span,
h4 span, .h4 span,
h5 span, .h5 span,
h6 span, .h6 span{color:var(--clr1)}

p{margin-bottom:1em}


.maxw1{max-width:1540px; margin:0 auto; padding: 0 20px}
.maxw2{max-width:1300px; margin:0 auto; padding: 0 20px}

.clear{clear:both;}
.flexbox{display:flex; flex-wrap:wrap}
.flexbox.space_between{justify-content: space-between;} 
.flexbox.justify_center{justify-content: center;} 
.flexbox.align_right{justify-content: flex-end;}
.flexbox.align_center{align-items: center;}
.flexbox.align_bottom{align-items: flex-end;}
.flexbox.align_top{align-items: flex-start;}

.grid{display:grid; gap: 40px;}
.grid.small_grid{gap:10px;}
.grid.cols2{grid-template-columns: repeat(2, 1fr);}
.grid.cols3{grid-template-columns: repeat(3, 1fr);}
.grid.cols4{grid-template-columns: repeat(4, 1fr);}
.grid.cols5{grid-template-columns: repeat(5, 1fr);}
.grid.cols6{grid-template-columns: repeat(6, 1fr);}

.grid .col2{grid-column:span 2}
.grid .col3{grid-column:span 3}
.grid .col4{grid-column:span 4}
.grid .col5{grid-column:span 5}
.grid .col6{grid-column:span 6}

.grid.align_top{align-items: start}
.grid.align_center{align-items: center}
.grid.align_bottom{align-items: end}

.center_text{text-align:center;}
.center_text ul, .center_text ol{text-align:left;}

.btn_bar{display:block; margin-top:2rem;}
.btn{display:inline-flex; gap:15px; line-height:1; border:none}
.btn:hover{transform:translatey(-2px)}

.btn.l_btn{font-size:20px; font-weight:var(--medium_weight); padding: 15px 25px; border-radius:var(--border_radius)}
.btn.n_btn{font-size:20px; font-weight:var(--normal_weight); padding: 20px 25px; border-radius:var(--border_radius)}

.btn.round_btn{display:inline-flex; align-items: center; justify-content: center; width:54px; height:54px; font-size:20px; border-radius:100%}


.btn.clr1_white{color:#fff; background:var(--clr1);}
.btn.clr2_white{color:#fff; background:var(--clr2);}
.btn.clr3_white{color:#fff; background:var(--clr3);}


.table_wrap{overflow-x:auto; word-break: auto-phrase;}
.table_wrap table{border-collapse: collapse;}
.table_wrap table td{border:1px solid var(--border_clr); padding:5px 10px; vertical-align:top; min-width: 200px}

.content_container ul, .content_container ol{margin-left:30px; margin-bottom:1em;}
.content_container b, .content_container strong{font-weight:var(--bold_weight)}
.content_container a{color:var(--clr2); font-weight:var(--normal_weight)}

.swiper-horizontal{overflow:hidden;}

.mob_menu{position:absolute; top:0; right:0; z-index:999999; overflow:hidden; width:0; height:0; transition-duration:0.2s}
.mob_menu.active{width:100%; height:100%;}

.mob_menu .inner{position:absolute; right:0; top:0; background:var(--clr2); color:#fff; padding: 20px; width:400px; max-width:100dvw; height:100dvh; overflow:auto;}
.mob_menu .menu_top{margin-bottom:1em;  text-align:right}
.mob_menu .menu_top .l_btn{position:relative}
.mob_menu .menu_top .l_btn span{position:absolute; font-size:10px; width:100%; bottom:3px; left:0; text-align:center;}}

.mob_menu ul{list-style:none}
.mob_menu ul li{margin-bottom:1em; list-style:none}

.top_bar{background:var(--clr1); color:#fff; font-size: 0.9rem; padding: 9px 0 }
.top_bar .usp{display:inline-block; width:auto;}
.top_bar .usp:before{content:"\f00c"; font:var(--awesome900); display:inline-block; margin-right:10px; }

.header {background:var(--clr2); color:#fff; padding: 20px 0}
.header .grid{grid-template-columns:100px 1fr}
.header .right ul {font-size:20px; font-weight:var(--medium_weight); margin-right:40px;}
.header .right ul li{display:inline-block; margin-right:25px;}
.header .right ul li a:hover{color:var(--clr1)}
.header .menu_btn{display:none; margin-left:15px;}
.header .l_btn .fa-calculator{display:none}

.breadcrumbs{text-align:right;padding-top:10px; margin-bottom:3rem; font-size:0.8rem; color:var(--light_text)}

.hero{position:relative; padding-bottom:5rem }
.hero .bg{position:absolute; background:url(img/grey_hexagon.png) no-repeat bottom/cover var(--box_clr); top:0; left:0; height:calc(100% - 40px); width:100%;}
.hero .grid{position:relative; padding-top:7%; gap:0}
.hero .hero_content{ position:relative; padding-left:calc(100% - 630px); padding-top:18%; padding-bottom:18%; padding-right:20px}
.hero .hero_content .title{font-size:48px;     max-width: 530px; margin-bottom:20px}
.hero .hero_content .subtitle{font-size:36px; line-height:1.3}
.hero .hero_content .subtitle small{font-size:25px; line-height:1.1}
.hero .image{grid-row:span 2; position:relative;}
.hero .image .img{position:absolute; height:100%; width:100%; left:0; top:0; border-radius:var(--border_radius) 0 0 var(--border_radius)}
.hero .image .family{position:absolute;	left:40px; bottom:0; max-width:65%;}
.hero .review{padding-left:calc(100% - 630px); padding-top:20px;  padding-bottom:20px; color:var(--light_text);         background: #fff;        position: relative; padding-right:20px; line-height:1.3}
.hero .review .inner{margin-left:28px;}
.hero .review i{width:30px; margin-left:-30px; display:inline-block;}
.hero .review .name{font-weight:var(--medium_weight)}

.title_bar{margin-bottom:2rem}
.title_bar .subtitle{font-weight:var(--medium_weight); font-size:1.1rem; line-height:1.3}


.content_block{margin-bottom:5rem}
.content_block.grey_bg{background:var(--box_clr); padding:60px 0}

.divider{border-top:1px solid var(--clr2); margin-bottom:5rem}

.home_content {}
.home_content .grid{grid-template-columns:2fr 1fr}
.home_content .left{padding-right:40px;}
.home_content .featured_image{border-radius:var(--border_radius); position:relative; overflow:hidden;}
.home_content .featured_image:after{content:""; padding-bottom:100%; display:block;}
.home_content .featured_image img{width:100%; height:100%; position:absolute; object-fit:cover}

.subpage_content {}
.subpage_content .grid{grid-template-columns:2fr 1fr}
.subpage_content .left{padding-right:40px;}
.subpage_content .featured_image{border-radius:var(--border_radius); position:relative; overflow:hidden;}
.subpage_content .featured_image:after{content:""; padding-bottom:100%; display:block;}
.subpage_content .featured_image img{width:100%; height:100%; position:absolute; object-fit:cover}

.product_block{}
.product_block .product_item{position:relative}
.product_block .product_item .image{position:absolute; left:0; top:0; height:100%; width:100%}
.product_block .product_item .overlay{position:relative; background:rgba(0,0,0,0.35); color:#fff; }
.product_block .product_item .overlay:after{content:""; padding-bottom:70%; display:block;}
.product_block .product_item .overlay .inner{position:absolute; bottom:0; left:0; padding:30px;}
.product_block .product_item .overlay .title{color:#fff; }
.product_block .product_item .overlay .title:after{content:"\f178"; font:var(--awesome400); display:inline-block; margin-left:20px;color:var(--clr1)}

.product_blocks{}
.product_blocks .product_item{position:relative}
.product_blocks .product_item .image{position:absolute; left:0; top:0; height:100%; width:100%}
.product_blocks .product_item .overlay{position:relative; background:rgba(0,0,0,0.35); color:#fff; }
.product_blocks .product_item .overlay:after{content:""; padding-bottom:70%; display:block;}
.product_blocks .product_item .overlay .inner{position:absolute; bottom:0; left:0; padding:30px;}
.product_blocks .product_item .overlay .title{color:#fff; }
.product_blocks .product_item .overlay .title:after{content:"\f178"; font:var(--awesome400); display:inline-block; margin-left:20px;color:var(--clr1)}

.img_text_block{}
.img_text_block .image{position:relative; margin-bottom:30px;}
.img_text_block .image .inner{position:absolute; left:0; top:-30px; width:calc(100% + 50px); height:100%; border-radius:0 var(--border_radius) var(--border_radius) 0}
.img_text_block .text{position:relative; margin-top:30px; background:var(--clr2); border-radius: var(--border_radius) 0 0 var(--border_radius); }
.img_text_block .text .bg{position:absolute; left:-50px;  width:calc(100% + 50px); height:100%;  background:url(img/hexagon.png) repeat center var(--clr2); border-radius: var(--border_radius) 0 0 var(--border_radius); }
.img_text_block .text .inner{position:relative; color:#fff;padding: 60px calc(100% - 630px) 60px 50px}
.img_text_block .text .inner h2{color:#fff}

.advice{background:var(--clr1); position:relative; color:#fff;}
.advice .bg{position:absolute; width:100%; height:100%; top:0; left:0;   background:url(img/hexagon.png) repeat center } 
.advice .grid{grid-template-columns:2fr 1fr}
.advice .left{padding: 90px 0; position:relative }
.advice .left h2{color:#fff}
.advice .right{position:relative; display:flex; align-items: flex-end;}

.contact_block{background:var(--box_clr); padding: 30px; border-radius:var(--border_radius)}
.contact_block  a i{color:var(--clr1); width:30px; display:inline-block;}
.contact_block  a:hover{color:var(--clr1);}

.gallery .grid .img{position:relative;}
.gallery .grid .img:after{content:""; padding-bottom:70%; display:block;}
.gallery .grid .img img{position:absolute; width:100%; height:100%; object-fit:cover}

.img_text {}
.img_text .grid{grid-template-columns:1fr 2fr; align-items: center;}
.img_text .text{padding-left:40px;}
.img_text .featured_image{border-radius:var(--border_radius); position:relative; overflow:hidden;}
.img_text .featured_image:after{content:""; padding-bottom:100%; display:block;}
.img_text .featured_image img{width:100%; height:100%; position:absolute; object-fit:cover}


.text_img {}
.text_img .grid{grid-template-columns:2fr 1fr; align-items: center;}
.text_img .text{padding-right:40px;}
.text_img .featured_image{border-radius:var(--border_radius); position:relative; overflow:hidden;}
.text_img .featured_image:after{content:""; padding-bottom:100%; display:block;}
.text_img .featured_image img{width:100%; height:100%; position:absolute; object-fit:cover}


.footer{}
.footer a:hover{color:var(--clr1)}
.footer .col .title{margin-bottom:50px; color:var(--clr1)}
.footer .col ul{list-style:none}
.footer .col ul li a{margin-left:30px;}
.footer .col ul li a:before{content:"\f178"; margin-left:-30px; width:30px; font:var(--awesome300); display:inline-block;}

.footer .inner .beeldmerk{margin-bottom:20px; display:block;}
.footer .inner a i{color:var(--clr1); width:30px; display:inline-block;}

.footer .bottom{margin-top:60px; padding:15px 0; border-top:1px solid rgba(0,0,0,0.2); font-size:0.8rem; text-align:center; color:rgba(0,0,0,0.55)}

.wpcf7 .form_item{margin-bottom: 20px; display:flex; flex-wrap:wrap}
.wpcf7 .label{width: 180px; }
.wpcf7 .form_field{width: calc(100% - 180px); }
.wpcf7 input, .wpcf7 textarea,  .wpcf7 select{width:100%; padding:5px 15px; border: 1px solid var(--border_clr) ; border-radius:var(--border_radius); font:inherit }
.wpcf7 textarea{height:200px}

.wpcf7 select{background:url(img/angle-down.png) no-repeat calc(100% - 10px) 50% #fff;}

span.wpcf7-list-item {display: inline-block;margin: 0px 0 0;}
span.checkbox{margin-top:10px; display: block;}
.wpcf7 .wpcf7-list-item {display: inline-block; margin-right:35px; width: 100%;}
.wpcf7-list-item-label {margin-left: 30px;display: inline-block; vertical-align: top;}
.wpcf7-checkbox {padding: 5px 0px; display:inline-block}
.wpcf7-checkbox label {position: relative;cursor: pointer;}
.wpcf7-checkbox input[type=checkbox] {position: absolute;visibility: hidden;height: 1em;width: 1em;top: 0.25em;left: 0px;}
.wpcf7-checkbox input[type=checkbox] + span:before {display: block;position: absolute;content: '';border-radius: 0;height: 1em;width: 1em;top: 0.25em;left: 0px;border: 1px solid var(--border_clr); background:#fff}
.wpcf7-checkbox input[type=checkbox] + span:after {display: flex;        justify-content: center; align-items: center;position: absolute;content: "\f00d";font:var(--awesome900); height: calc(1em - 3px);    width: calc(1em - 3px);color:var(--clr1);top: calc(0.25em + 2px);    left: 2px;visibility: hidden;font-size: 1em;text-align: center; }
.wpcf7-checkbox input[type=checkbox]:checked + span:before {background: transparent;}
.wpcf7-checkbox input[type=checkbox]:checked + span:after {visibility: visible;}

.wpcf7-radio label {position: relative;cursor: pointer;}
.wpcf7-radio input[type=radio] {position: absolute;visibility: hidden;width: 1em;height: 1em;top: 0;left: 0;}
.wpcf7-radio input[type=radio] + span:before {display: block;position: absolute;content: '';border-radius: 100%;height: 1em;width: 1em;top: 0.25em;left: 0px;border: 1px solid var(--border_clr); background:#fff}
.wpcf7-radio input[type=radio] + span:after {display: block;position: absolute;content: "";font:var(--awesome900); height: calc(1em - 3px);    width: calc(1em - 3px);    color: var(--clr1);    background: var(--clr1);
    border-radius: 100%;    top: calc(0.25em + 2px);    left: 2px;visibility: hidden;text-align: center;}
.wpcf7-radio input[type=radio]:checked + span:before {background: transparent;}
.wpcf7-radio input[type=radio]:checked + span:after {visibility: visible;}

@media only screen and (max-width: 1340px) {
	.header .grid {    grid-template-columns: 80px 1fr;}
	.header .right ul{display:none}
	.header .menu_btn{display:inline-flex}
	
	.hero .hero_content{padding-left: 20px;}
	.hero .review {padding-left: 20px;}
	
	.img_text_block .text .inner{padding: 60px 20px 60px 0px;}
}

@media only screen and (max-width: 1250px) {
	.product_block .grid.cols3{grid-template-columns: repeat(2, 1fr);}
	.product_blocks .grid.cols2{grid-template-columns: repeat(2, 1fr);}
}

@media only screen and (max-width: 1100px) {
	.hero .hero_content .title {font-size: 42px;}
	.hero .hero_content .subtitle {    font-size: 32px;}
	
	
	.gallery .grid {grid-template-columns: repeat(2, 1fr);}
	
	.footer .grid.cols4 {grid-template-columns: repeat(2, 1fr);}
	.footer .col:first-of-type{grid-row:1}
	.footer .col:last-of-type{grid-row:1}
	.footer .col .title { margin-bottom: 30px;}
}


@media only screen and (max-width: 960px) {
	.hero .grid{padding-top: 0%;}
	.hero .grid.cols2{grid-template-columns:repeat(1, 1fr)}
	.hero .hero_content{ padding-top:12%; padding-bottom:12%;}
	.hero .image .img {    width: calc(100% - 60px);left:auto; right:0}
	.hero .image:after{content:""; padding-bottom:65%; display:block;}
	.hero .image .family {max-width: 45%;}
	.hero .bg {  height: calc(70%);}
	.hero .review .inner{text-align:right}
	.home_content .grid {    grid-template-columns: 1fr;}
	.home_content .left{padding-right: 0px;}
	
	
	
	.subpage_content .grid {    grid-template-columns: 1fr;}
	.subpage_content .left{padding-right: 0px;}

	
	.img_text_block .grid.cols2 {grid-template-columns: repeat(1, 1fr); gap:0}
	.img_text_block .text{margin-top:0}
	.img_text_block .text .inner{padding: 60px 20px 60px 20px;}
	.img_text_block .image{margin-bottom:-30px; position:relative; z-index:1; width:calc(100% - 50px)}
	.img_text_block .image:after{content:""; padding-bottom:60%; display:block;}
	.img_text_block .image .inner{top:0; width:100%}
	.product_block .product_item .overlay .inner { padding: 20px;}
	.product_blocks .product_item .overlay .inner { padding: 20px;}
}
@media only screen and (max-width: 750px) {
	.text_img .grid {    grid-template-columns: 1fr;}
	.text_img .text{padding-right: 0px;}
	.img_text .grid {    grid-template-columns: 1fr;}
	.img_text .text{padding-left: 0px;}
	
	.product_block .grid.cols3{grid-template-columns: repeat(1, 1fr);}
	.product_blocks .grid.cols2{grid-template-columns: repeat(1, 1fr);}
}

@media only screen and (max-width: 650px) {
	h1, .h1 {font-size: 36px;}
	h2, .h2{font-size:24px;}
	.btn.l_btn {font-size: 18px;}
	.advice .grid {    grid-template-columns: 1fr;}
	.advice .right{ justify-content: flex-end;}
	.advice .right img{margin-top:0; width:200px}
	.advice .left {    padding: 70px 0 0;}
	.hero .review .inner{text-align:left}
}


@media only screen and (max-width: 550px) {
	.header .l_btn span span{display:none}
	.hero .hero_content .title {        font-size: 36px;    }
	.hero .hero_content .subtitle {        font-size: 26px;    }
	.footer .grid.cols4 {grid-template-columns: repeat(1, 1fr);}
	.footer .col:last-of-type{grid-row:2}
	.wpcf7 .label{width: 100%; }
	.wpcf7 .form_field{width: 100%; }
}


@media only screen and (max-width: 470px) {
	.header .grid {        grid-template-columns: 60px 1fr;    }
	.header .l_btn .fa-calculator{display:block}
	.header .l_btn .fa-arrow-right-long{display:none}
	.header .l_btn{position:relative}
	.header .l_btn span{position:absolute; font-size:10px; width:100%; bottom:3px; left:0; text-align:center;}
	.gallery .grid {grid-template-columns: repeat(1, 1fr);}
}

@media only screen and (max-width: 400px) {
	html, body {font-size: 16px;}
	h1, .h1 {font-size: 30px;}
	
	.hero{padding-bottom:3rem}
	.hero .hero_content .title {        font-size: 30px;    }
	.hero .hero_content .subtitle {        font-size: 22px;    }
}



@media print {
   
	html, body {  
			page-break-after: avoid;
            page-break-before: avoid; 
			border: 1px solid white;
            height: 99%;}
   
	div{display:block; width:100%}
   
  
}