.main.bg-pro{position:relative; background:var(--color5); padding-bottom:50px;}
.main.bg-pro::before{content:""; position:absolute; inset:0; bottom:0; background-image:url('/theme/img/bg-blok.png'); background-repeat:repeat-x; background-position:center bottom 12px; background-size:30px; opacity:0.045; transform-origin:center bottom; bottom:0;}
	
html .pro-items .item{background:var(--color2); box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);}

.h-pro-items .item, .pro-items .item, .diensten .item, .h-dienst .item{transition:transform 0.3s ease-in-out;}
.h-pro-items .item:has(a:hover), .pro-items .item:has(a:hover), .diensten .item:has(a:hover), .h-dienst .item:has(a:hover){transform:translateY(-3px);}

.home-slider h2 div{display:flex; justify-content:center; margin-top:25px;}
.home-slider .btn{background:var(--color6); padding:10px 20px;}
.home-slider .btn.sec{background:var(--color3);}
.home-slider h2 span{color:var(--color2);}

.reveal-up{opacity:0; transition:opacity .4s ease-out, transform 2s ease-in-out;}
.reveal-fade{opacity:0; transition:opacity 1.2s ease-out, transform 2s ease-out;}
.reveal-up{transform:translateY(40px);}
.reveal-up.visible{opacity:1; transform:translateY(0);}
.reveal-fade.visible{opacity:1;}
.reveal-diagonal{opacity:0; display:inline-block; clip-path:polygon(0 0, 0 0, 0 0, 0 0); transition:opacity 0.8s ease-out, clip-path 1.4s ease-in-out;}
.reveal-diagonal.visible{opacity:1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}	
.reveal-circle{opacity:0; clip-path: circle(0% at 50% 50%); transition:opacity 1.4s ease-out, clip-path 2.4s ease-out;}
.reveal-circle.visible{opacity:1; clip-path:circle(150% at 50% 50%);}

@media screen and (max-width: 1020px) {
	.home-slider h2 div{margin-top:15px;}
	.home-slider .btn{background:var(--color6); padding:8px 18px;}
}

.clamp{font-size:15px; line-height:18px;}
.clamp p{display:-webkit-box; -webkit-line-clamp:3; padding:0; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; margin:0;}

.nav .has-submenu > ul{pointer-events:none;}
.nav .has-submenu:hover > ul{pointer-events:auto;}
.nav li.has-submenu{position:relative;}

.nav ul ul{margin-top:0;}
.header{border-bottom:0;}
.shortnav .header::after{bottom:0;}
.header::after{content:""; position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:#ddd; pointer-events:none;}
	
@media screen and (max-width: 768px) {
	.home-slider h2{display:none;}
	.shortnav .nav > ul > li > a{padding-top:10px; padding-bottom:10px;}
}

.kopje h2{font-size:26px; line-height:28px;}

@media screen and (max-width: 1020px) {	
	.kopje h2{font-size:23px; line-height:26px;}
}

@media screen and (max-width: 768px) {
	.kopje h2{font-size:20px; line-height:22px;}
}

@media screen and (max-width: 680px) {
	.kopje h2{font-size:18px; line-height:22px;}
}

.interesse .btn{margin-bottom:0;}
.interesse h3{padding-top:0;}

.checks{background:var(--color7); color:var(--color2); margin-bottom:15px;}
.checks .punten{list-style:none; padding:5px 0; margin:0; display:flex; gap:20px; justify-content:space-between; flex-wrap:wrap;}
.checks .punten li{flex:1 1 calc(33.333% - 20px); display:flex; align-items:center; justify-content:center; font-size:15px; line-height:18px; font-family:var(--fontheader); font-weight:600;}
.checks .punten li i{color:#2ecc71; margin-right:8px; font-size:20px;}	
.checks .punten li span:first-of-type{display:inline-block;}
.checks .punten li span:last-child{display:none;}

@media (max-width: 1080px) {
    .checks .punten li span:first-of-type{display:none;}
    .checks .punten li span:last-child{display:inline-block;}
}
	
@media (max-width: 680px) {
    .checks{margin-bottom:5px;}
	.checks .punten{padding:3px 0; gap:5px; display:flex;}
	.checks .punten li{flex:auto; justify-content:start; font-size:11px; line-height:14px;text-shadow:1px 0px 2px rgba(0, 0, 0, 0.1);}
	.checks .punten li i{margin-right:5px; font-size:16px;}
}

.h-pro.verloop{background:linear-gradient(to top, var(--color5), var(--color2));}
.crumbs{background:var(--color2); padding-top:10px;}

.btn, .h-pro .arrows div, 
.img-prev, .img-next{box-shadow:0 2px 6px rgba(0, 0, 0, 0.15);}
	
.h-pro-items .item, 
.h-dienst .item{box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);}
	
.diensten .item h3{padding-top:0;}

.breadcrumbs a::before{margin:0 6px 0 2px;}

.h-pro h3{padding:12px 0; min-height:10px;}
.pro-items .item .txt h3{padding:12px 0;}

@media screen and (max-width: 768px) {
  .h-pro{padding:30px 0 55px;}
}