/*	@-moz-document url-prefix() {
	# {
		letter-spacing: -4px;
	}
}	*/

	/*
	body h1, h2  {
		letter-spacing: -1px;
	} 
	*/
	
	body h1, h2  {
		font-weight: 700;
		letter-spacing: -3px;
		font-family: 'filson-pro', sans-serif; 
	}
	
	body h3  {
		letter-spacing: -0.3px;
	}	


	@-moz-document url-prefix() {
    .menu-link {
        line-height:1;
	padding-top:1.5rem;
    }

    .btn-blue {
	line-height:1.2rem;
	padding-top:1.3rem !important;
    }
    i.fa-caret-down {
  top: 0px !important;
    }
    i.fa-caret-right {
  top: 0px !important;
    }
    i.fa-wind {
  top: 0px !important;
    }	
		
}

@media (max-width: 991px) {
  .header-misc {
	display: none !important;
	/* margin-right:100px; */
  }
}

@media (max-width: 1199px) {
	
  .is-expanded-menu .menu-link {
	--cnvs-primary-menu-padding-x: 10px;
  }
  .contact-number {
	margin-right: 0 !important;
  }
  .header-misc {
	margin-right: -10px;
  }
}

.header-misc {
  /* margin-left: 200px; */
  /* margin-left:300px; */
}

.contact-number {
  margin-right: -20px;
}

.nummer-mobiel {
  display: inline-block;
  float: right;
  color: #fff;
}


/* ----------------------------------------------------------------

-----------------------------------------------------------------*/

img#certified {
  /* transition: transform .7s ease-in-out; */
  transition: transform 2s ease-in-out;
}
img#certified:hover {
  /*  transform: rotate(360deg); */
  /* transform: rotate(720deg); */
  transform: rotate(1730deg); 
}

.hero-diagonal {
	height: 121px;
	background-size: 2000px 121px ;
	background-position: center;
}

.slider-inner {
	background-image: url(../images/home-bg.jpg?v=c51ca095); 
	background-color: #019ce2;
	/* background-size: 1432px auto; */
	background-repeat: repeat-x; 
	background-size: auto 100%; 
}







@media (max-width: 750px) {
	#airco-bg {
	background-size: 100% !important;
	}
}	

/* Cool-air airflow overlay — canvas injected by js/koelgemak-airflow.js.
   Sits above the hero backdrop but below the slogan (.vertical-middle is
   z-index:3), and never intercepts clicks. */
#airco-bg {
	position: relative;
}
#airco-airflow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

@media (min-width: 1px) {
	#certified {
	/* translate: 400% 400%; */ 
	translate: 320% 375%; 
	}
}

@media (min-width: 576px) {
  
}

@media (min-width: 768px) {
  	.slider-inner {
	background-size: 150% 100%;
    }
	#spark {
		translate: 1100% 2000%; 
	}
}

@media (min-width: 992px) {
	#spark {
		translate: 1450% 2000%; 
	}
	#spark2 {
		/* translate: 300% 700%; */
		display: none;
	}
  
}

@media (min-width: 1200px) {
	.slider-inner {
	background-size: 150% 100%;
    }
	#certified {
	translate: 250% 375%; 
	}
	#spark {
		translate: 1650% 2000%; 
	}
	#spark2 {
		translate: 400% 700%; 
	}
  
}

@media (min-width: 1400px) {
	#airco-text-1 {
		font-size: 95px !important;
	}
	#airco-text {
		font-size: 64px;
	}
	#certified {
		translate: 320% 375%; 
	}
	#spark {
		/* translate: 400% 400%; */
		translate: 2000% 2000%; 
	}
	#spark2 {
		translate: 500% 700%; 
	}
}

@media (min-width: 2000px) {
	#certified {
		translate: 350% 300%;
	}
	.hero-diagonal {
	background-size:125% 100%;
    }
	
	/* #airco-text {
		font-size: max(50px);
	} */
	
	/* #airco-text-1 {
		font-size: max(50px) !important; 
	} */
}



	
.list-group-item {
		width: 500px;
		/* padding: 40px 40px 40px 40px; */
	}
	.list-group-item p {
	width: 330px;
  }
	.list-group-item h2 {
		margin-left: -20px;
		font-size: 2.5rem;
		font-size: 3rem;
		font-family: 'filson-pro', sans-serif;
		/* Reserve space for the full 3-line build-up so the paragraph below
		   stays fixed (no jumping) as words are revealed on scroll. */
		min-height: 3.7em;
  	}	


	
	
@media (min-width: 1px) {
	.list-group-item {
		/* width: 300px; */
		width: calc(1 * 100vw - 1rem);
		/* width: calc(3rem + 3.3vw); */
		/* padding-right: 0px;
		padding-left: 20px; */
		padding: 40px 0px 40px 20px;
	}
	.list-group-item p {
		width: calc(1 * 100vw - 2.5rem);
  	}
	.list-group-item h2 {
		margin-left: -20px;
		font-size: 2.3rem;
  	}
	#koelwarm-text h2 {
		font-size: 2.3rem;
		letter-spacing: -2px;
	}
	
}

@media (min-width: 340px) {
	.list-group-item h2 {
		/* margin-left: -20px; */
		font-size: 2.5rem;
  	}	
	#koelwarm-text h2 {
		font-size: 2.5rem;
	}
}

@media (min-width: 350px) {
	.list-group-item h2 {
		margin-left: 0px;
  	}
	.list-group-item p {
		width: 310px;
  	}
}
@media (min-width: 380px) {
	.list-group-item {
		padding: 40px 0px 40px 40px;
	}
}

@media (min-width: 411px) {
	.list-group-item {
		width: 360px;
		padding: 40px 0px 40px 40px;
	}
	.list-group-item h2 {
		padding-right: 0px;
	}
	.ms-4 {
		margin-left: 0px;
	}
}
 	
@media (min-width: 441px) {
	.list-group-item {
		width: 429px;
		padding: 40px 40px 40px 40px;
	}
	.list-group-item p {
		width: 330px;
  	}
	.list-group-item h2 {
		font-size: 2.8rem; 
		/* margin-left: -20px; */
  	}
	#koelwarm-text h2 {
		font-size: 2.8rem;
	}
}
	
@media (min-width: 512px) {
	.list-group-item {
		width: 500px;
	}
	.list-group-item h2 {
		font-size: 3rem; 
  	}
	#koelwarm-text h2 {
		font-size: 3rem;
	}
	
}	

@media (min-width: 992px) {
	.list-group-item h2 {
		font-size: 2.5rem;
		margin-left: 0px;
  	}
	#koelwarm-text h2 {
		font-size: 2.5rem;
	}
}

@media (min-width: 1200px) {
	.list-group-item h2 {
		font-size: 3rem;
		margin-left: 0px;
  	}
	#koelwarm-text h2 {
		font-size: 3rem;
	}
}
	

	
	



@media (max-width: 575px) {
  .hero-diagonal {
	background-position: right;
	background-size: cover;
  }

	#certified-text {
	margin-left: 60px !important;
  }
 
}
	
@media (max-width: 630px) {
  #certified-text {
	margin-left: 30px;
  }
 
}	
	
@media (max-width: 767px) {
  #koelwarm {
	width: 100% !important;
  }
	#koelwarm-text {
		width: 100% !important;
		text-align: center;
	}		
 
}	

@media (max-width: 991px) {
	.rent-bar {
		position: relative !important;
	}
	#slider,
	#slider-2,
	#slider-3,
	#slider-4 {
		margin-top: -35px !important;
	}
	#certified-2 {
		transform: translateY(0px) !important;
	}
	#certified-text {
	margin-right: 0px !important;
  }
	.certified-br {
	display: none;
  }
 
}

@media (max-width: 1199px) {
	img#certified {
		display: none !important;
	}
	
}
	


#certified-2 {
	transform: translateY(100px);
}




h4 {
font-family: 'area-normal' !important;
font-weight: 900 !important;
}

	.btn-ontdek {
		color: var(--cnvs-themecolor);
	}	
	
	.btn-ontdek:hover {
		color: var(--cnvs-themecolor-darker);
	}

	
	.owl-carousel .owl-nav [class*=owl-] {
		color: #fff !important;
	}
	
	.owl-carousel {
		--cnvs-owl-full-nav-hover-color: var(--cnvs-themecolor) !important;
		--cnvs-owl-full-nav-hover-bgcolor: #fff !important;	
		--cnvs-owl-nav-bg: #ffffff;
	}
	
	
	
	.fa-caret-down {
  top: 2px !important;
}

.fa-caret-right {
  top: 2px !important;
}

.fa-wind {
  top: 2px !important;
}

.menu-item h4 {
  font-size: 1rem !important;
}

.underliner {
  --cnvs-underliner-color: 219, 168, 21;
  background-image: linear-gradient(to bottom, transparent calc(100% - var(--cnvs-underliner-size)), rgb(219 168 21) calc(100% - var(--cnvs-underliner-size)));
}



/* ----------------------------------------------------------------

-----------------------------------------------------------------*/


 .list-group-item {
        position: absolute;
        top: 0;
        left: 0;
		/* Transparent so stacked items never cover each other mid-transition;
		   the #begin section and sticky column behind use the same purple. */
		background-color: transparent;
        color: #fff;
        border: 0;
        margin: 0;
        /* Cross-fade the whole item (headline + paragraphs) as one unit, so
           revealing a new item never flashes an empty purple frame. */
        --text-anim-duration: .5s;
        opacity: 0;
        transition: opacity var(--text-anim-duration) cubic-bezier(0.215, 0.61, 0.355, 1);
    }

	.list-group-item.active {
		color: #fff;
	}

	/* The template scrollspy re-adds `.active` on every scroll tick (and drops
	   it in gaps), which would retrigger the fade and flicker. So the opacity
	   fade is driven off `.reveal-active`, toggled only on a real section change
	   by js/koelgemak-reveal.js. */
	.list-group-item.reveal-active {
		opacity: 1;
	}

	/* Fade is driven at item level now; keep the inner text fully opaque. */
	.list-group-item .text-anim {
		opacity: 1;
	}

    .list-group-content > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
		align-items: center;
    }
		.img-radius {
			border-radius: 30px;
		}	
/* "Lees meer" onder elk van de vier blokken (Verfrissend t/m Verantwoord).
   Verwijst naar de bijbehorende sectie op /informatie. De link staat ín het
   blok en niet eromheen: het blok stuurt via het scroll-menu de rechterkolom
   aan, en dat gedrag blijft zo werken. */

.blok-meer-regel {
	margin-top: -6px;
	padding-bottom: 45px;
}

.blok-meer {
	display: inline-block;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid rgba(255, 255, 255, 0.45);
	padding-bottom: 2px;
	transition: border-color 0.15s ease, opacity 0.15s ease;
}

.blok-meer:hover,
.blok-meer:focus-visible {
	color: #fff;
	border-bottom-color: #fff;
}

.blok-meer:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Op smalle schermen liggen de vier tekstblokken in een container zonder
   hoogte, waardoor de fotokolom eroverheen valt. De tekst blijft zichtbaar
   (de foto's laten ruimte vrij), maar een klik kwam bij de foto terecht in
   plaats van bij de link. Alleen het actieve blok komt daarom bovenop; de
   inactieve blokken vangen geen klikken, zodat ze de foto's niet blokkeren. */
@media (max-width: 991px) {
	#list-example .list-group-item {
		pointer-events: none;
	}

	/* De fotokolom is een broer van de hele tekstkolom, dus de stapelvolgorde
	   moet op die kolom staan -- een z-index op het blok zelf blijft binnen
	   zijn eigen kolom en helpt niet. */
	.blokken-kolom {
		z-index: 3;
	}

	#list-example .list-group-item.active {
		position: relative;
	}

	#list-example .list-group-item.active .blok-meer {
		pointer-events: auto;
	}
}