@view-transition {
  navigation: auto;
}
/*Text rotator Hero homepage*/
.text-rotator {
  white-space: nowrap;
  opacity: 1;
  /* the transition durations should match the animation durations */
  transition: opacity 0.5s ease, width 0.5s ease-in-out;
  display: inline-block;
}
.text-rotator.fade-out {
  opacity: 0;
}
@media only screen and (min-width: 1025px) { 
  .output h2 {
	font-size:2.5rem;
  line-height:90%;
	}
}
@media only screen and (max-width: 1024px) { 
  .output h2 {
	font-size:6vw;
  line-height:120%;
	}
}
/*Rotating image animation*/
.rotate-anim img {
    position: relative;
    -webkit-animation:spin 15s linear infinite;
    -moz-animation:spin 15s linear infinite;
    animation:spin 15s linear infinite;
  filter: brightness(0) saturate(100%) invert(93%) sepia(100%) saturate(652%) hue-rotate(10deg) brightness(105%) contrast(107%);
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
/*Marquee tekst effect*/
.marquee-text-effect {
    display: inline-flex !important;
    overflow: hidden;
    }
@keyframes marquee-text-effect {
    0% { transform:translateX(0%);}
    100% { transform:translateX(-100%);}
    }
.marquee-text-effect .content-text {
    display: inline-flex;
    justify-content: space-around;
    }
.marquee-text-effect .content-text > * {
    display: inline-block;
    padding: 0 10px;
    white-space: nowrap;
    }
/*2025 styles*/
* {
    overflow-wrap: break-word;
    hyphens: manual;
    }
.wrap-content-block {
		max-width:800px;
    margin:0 auto;
    }

/*.ba-section.casesectie {padding: 0.9375rem 3.75rem !important;}
.ba-section.casesectie p {font-size: 23px !important; line-height: 40px !important; }
.casesectie .ba-row.row-fluid {padding: 0px 0px 0px 60px!important; margin: 0px!important;}*/

/**Grey**/
body.grey .logo img {
	filter: invert(13%) sepia(84%) saturate(7326%) hue-rotate(321deg) brightness(97%) contrast(104%);
    }
body._grey .hoofdmenu li a {
    color:var(--color-4) !important;
    }
body.grey .hoofdmenu li a::before {
	background-color:var(--color-4) !important;
    }
body._grey .hoofdmenu li.active {
    border-bottom:2px solid var(--color-4) !important;
    }
.grey {
	background:var(--color-8) !important;
    }
.grey h1, .grey h2, .grey h3, .grey h4, .grey h5, .grey h6, .grey p, .grey i, 
.grey .ba-image-item-title , .grey .ba-image-item-description, .grey .ba-feature-description, .grey .knop a span, .grey .ba-item-breadcrumbs * {
  color:var(--color-4) !important;
    }
.grey .ba-feature-box {
    --shadow-color: var(--color-4) !important;
    }
.grey .link .ba-feature-box:hover {
  	background:var(--color-4) !important;
}
.grey .link .ba-feature-box:hover * {
  	color:var(--color-8) !important;
	}
.grey .knop a::before {
    background-color:var(--color-4) !important;
    }
.grey .tags a {
    pointer-events:none;
	color:var(--color-4) !important;
    --shadow-color: var(--color-4) !important;  
    }
/**Yellow**/
body._yellow .logo img, .logo_footer img {
	filter: invert(13%) sepia(84%) saturate(7326%) hue-rotate(321deg) brightness(97%) contrast(104%);
    }
body._yellow .hoofdmenu li a {
    color:var(--color-5) !important;
    }
body._yellow .hoofdmenu li a::before {
	background-color:var(--color-5) !important;
    }
body._yellow .hoofdmenu li.active {
    border-bottom:2px solid var(--color-5) !important;
    }
body._yellow .hamburger-menu .ba-button-wrapper a { 
		background-color:var(--color-5) !important;
  	color:var(--color-4) !important;
		--shadow-color: var(--color-5) !important;	
	}
.yellow {
	background:var(--color-4) !important;
    }
.yellow h1, .yellow h2, .yellow h3, .yellow h4, .yellow h5, .yellow h6, .yellow p, .yellow i,
.yellow .ba-image-item-title, .yellow .ba-image-item-description, .yellow .ba-feature-description, .yellow .knop a span, .yellow .ba-item-breadcrumbs * {
    color:var(--color-5) !important;
    }
.yellow .ba-feature-box {
    --shadow-color: var(--color-5) !important;
    }
.yellow .link .ba-feature-box:hover {
  	background:var(--color-5) !important;
}
.yellow .link .ba-feature-box:hover * {
  	color:var(--color-4) !important;
	}
.yellow .knop a::before {
    background-color:var(--color-5) !important;
    }
.yellow .tags a {
    pointer-events:none;
	color:var(--color-5) !important;
    --shadow-color: var(--color-5) !important;  
    }
/**Orange**/
body._orange .logo img {
	filter: invert(84%) sepia(87%) saturate(414%) hue-rotate(7deg) brightness(104%) contrast(101%);
    }
body._orange .hoofdmenu li a {
    color:var(--color-4) !important;
    }
body._orange .hoofdmenu li a::before {
	background-color:var(--color-4) !important;
    }
body._orange .hoofdmenu li.active {
    border-bottom:2px solid var(--color-4) !important;
    }
body._orange .hamburger-menu .ba-button-wrapper a { 
		background-color:var(--color-4) !important;
  	color:var(--color-2) !important;
		--shadow-color: var(--color-4) !important;	
	}
.orange {
	background:var(--color-2) !important;
    }
.orange h1, .orange h2, .orange h3, .orange h4, .orange h5, .orange h6, .orange p, .orange i,
.orange .ba-image-item-title , .orange .ba-image-item-description, .orange .ba-feature-description, .orange .knop a span, .orange .ba-item-breadcrumbs * {
  color:var(--color-4) !important;
    }
.orange .ba-feature-box {
    --shadow-color: var(--color-4) !important;
    }
.orange .link .ba-feature-box:hover {
  	background:var(--color-4) !important;
}
.orange .link .ba-feature-box:hover * {
  	color:var(--color-2) !important;
	}
.orange .knop a::before {
    background-color:var(--color-2) !important;
    }
.orange .tags a {
    pointer-events:none;
	color:var(--color-4) !important;
    --shadow-color: var(--color-4) !important;  
    }
/**BLUE**/
body._blue .logo img {
	filter: brightness(0) saturate(100%) invert(95%) sepia(65%) saturate(6098%) hue-rotate(86deg) brightness(103%) contrast(103%);
    }
body._blue .hoofdmenu li a {
    color:var(--color-3) !important;
    }
body._blue .hoofdmenu li a::before {
	background-color:var(--color-3) !important;
    }
body._blue .hoofdmenu li.active {
    border-bottom:2px solid var(--color-3) !important;
    }
body._blue .hamburger-menu .ba-button-wrapper a { 
		background-color:var(--color-3) !important;
  	color:var(--color-7) !important;
		--shadow-color: var(--color-3) !important;	
	}
.blue {
	background:var(--color-7) !important;
    }

.blue h1, .blue h2, .blue h3, .blue h4, .blue h5, .blue h6, .blue p, .blue i,
.blue .ba-image-item-title , .blue .ba-image-item-description, .blue .ba-feature-description, .blue .knop a span, .blue .ba-item-breadcrumbs * {
  color:var(--color-3) !important;
    }
.blue .ba-feature-box {
    --shadow-color: var(--color-3) !important;
    }
.blue .link .ba-feature-box:hover {
  	background:var(--color-3) !important;
	}
.blue .link .ba-feature-box:hover * {
  	color:var(--color-7) !important;
	}
.blue .knop a::before {
    background-color:var(--color-3) !important;
    }
.blue .tags a {
    pointer-events:none;
	color:var(--color-3) !important;
    --shadow-color: var(--color-3) !important;  
    }
/**PURPLE**/
body._purple .logo img {
	filter: invert(84%) sepia(87%) saturate(414%) hue-rotate(7deg) brightness(104%) contrast(101%);
    }
body._purple .hoofdmenu li a {
    color:var(--color-4) !important;
    }
body._purple .hoofdmenu li a::before {
	background-color:var(--color-4) !important;
    }
body._purple .hoofdmenu li.active {
    border-bottom:2px solid var(--color-4) !important;
    }
body._purple .hamburger-menu .ba-button-wrapper a { 
		background-color:var(--color-4) !important;
  	color:var(--color-1) !important;
		--shadow-color: var(--color-4) !important;	
	}
.purple {
	background:var(--color-1) !important;
    }
.purple h1, .purple h2, .purple h3, .purple h4, .purple h5, .purple h6, .purple p, .purple i,
.purple .ba-image-item-title , .purple .ba-image-item-description, .purple .ba-feature-description, .purple .knop a span, .purple .ba-item-breadcrumbs * {
    color:var(--color-4) !important;
    }
.purple .ba-feature-box {
    --shadow-color: var(--color-4) !important;
    }
.purple .link .ba-feature-box:hover {
  	background:var(--color-4) !important;
}
.purple .link .ba-feature-box:hover * {
  	color:var(--color-1) !important;
	}
.purple .knop a::before {
    background-color:var(--color-1) !important;
    }
.purple .tags a {
    pointer-events:none;
	color:var(--color-4) !important;
    --shadow-color: var(--color-4) !important;  
    }
/**GREEN**/
body._green .logo img {
    filter: invert(7%) sepia(100%) saturate(7156%) hue-rotate(241deg) brightness(119%) contrast(125%);
    }
body._green .hoofdmenu li a {
    color:var(--color-7) !important;
    }
body._green .hoofdmenu li a::before {
		background-color:var(--color-7) !important;
    }
body._green .hoofdmenu li.active {
    border-bottom:2px solid var(--color-7) !important;
    }
body._green .hamburger-menu .ba-button-wrapper a { 
		background-color:var(--color-7) !important;
  	color:var(--color-3) !important;
		--shadow-color: var(--color-7) !important;	
	}
.green {
		background:var(--color-3) !important;
    }
.green h1, .green h2, .green h3, .green h4, .green h5, .green h6, .green p, .green i,
.green .ba-image-item-title , .green .ba-image-item-description, .green .ba-feature-description, .green .knop a span, .green .ba-item-breadcrumbs * { 
  	color:var(--color-7) !important;
    }
.green .ba-feature-box {
    --shadow-color: var(--color-7) !important;
    }
.green .link .ba-feature-box:hover {
  	background:var(--color-7) !important;
}
.green .link .ba-feature-box:hover * {
  	color:var(--color-3) !important;
	}
.green .knop a::before {
    background-color:var(--color-7) !important;
    }
.green .tags a {
    pointer-events:none;
	color:var(--color-7) !important;
    --shadow-color: var(--color-7) !important;  
    }
/**PINK**/
body._pink .logo img {
	filter: invert(84%) sepia(87%) saturate(414%) hue-rotate(7deg) brightness(104%) contrast(101%);
    }
body._pink .hoofdmenu li a {
    color:var(--color-4) !important;
    }
body._pink .hoofdmenu li a::before {
	background-color:var(--color-4) !important;
    }
body._pink .hoofdmenu li.active {
    border-bottom:2px solid var(--color-4) !important;
    }
body._pink .hamburger-menu .ba-button-wrapper a { 
		background-color:var(--color-4) !important;
  	color:var(--color-5) !important;
		--shadow-color: var(--color-4) !important;	
	}
.pink {
	background:var(--color-5) !important;
    }
.pink h1, .pink h2, .pink h3, .pink h4, .pink h5, .pink h6, .pink p, .pink i,
.pink .ba-image-item-title , .pink .ba-image-item-description, .pink .ba-feature-description, .pink .knop a span, .pink .ba-item-breadcrumbs * {
  color:var(--color-4) !important;
    }
.pink .ba-feature-box {
    --shadow-color: var(--color-4) !important;
    }
.pink .link .ba-feature-box:hover {
  	background:var(--color-4) !important;
}
.pink .link .ba-feature-box:hover * {
  	color:var(--color-5) !important;
	}
.pink .knop a::before {
    background-color:var(--color-4) !important;
    }
.pink .tags a {
    pointer-events:none;
	color:var(--color-4) !important;
    --shadow-color: var(--color-4) !important;  
    }
/*Hamburger menu*/
.hamburger-menu-content {
    height:80vh;
	}
/*Video homepage*/
.video-hero-caption {
	z-index:9999 !important;		
    }
.video-hero {
  	z-index:99 !important;
	}
/*Underline anim*/
.footer h6,
.hoofdmenu li a,
.hamburger-menu a span,
.footermenu .vertical-menu .main-menu .nav > li,
.knop a span,
.blog-post-plugin .ba-blog-post-title a {
    position: relative;
    display:table;
    }
.footer h6::before,
.hoofdmenu li a::before,
.hamburger-menu a span::before,
.footermenu .vertical-menu .main-menu .nav > li::before,
.knop a::before,
.blog-post-plugin .ba-blog-post-title a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -3px;
    left: 0;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: top left;
    transition: transform 0.6s ease;
    }
.hoofdmenu li a:hover::before,
.hamburger-menu a span:hover::before,
.footermenu .vertical-menu .main-menu .nav > li:hover::before,
.knop a:hover::before,
.blog-post-plugin .ba-blog-post-title a:hover::before {
    transform: scaleX(1);
    }
/*Blog post plugin*/
.blog-post-plugin .ba-blog-post-content {
    padding:0 !important;
    }
@media only screen and (min-width: 1025px) { 
	.blog-post-plugin .ba-grid-layout {
        margin-left: -30px;
        margin-right: -30px;
	   }
	.blog-post-plugin .ba-grid-layout .ba-blog-post {
        width: calc((100% / 2) - 120px) !important;
        margin: 60px;
        }
    }
/*standaard knop*/
.knop a {
	position:relative;
    display:block;
    }
.knop a i {
    padding-left:0px;
	transition:0.6s;
    }
.knop a:hover i {
	padding-left:15px;
    }
/*kruimelpad*/
.ba-item-breadcrumbs {
    pointer-events:none;
    }
/*toepassingenbox*/
.usp-list .ba-feature-box {
    flex-direction:row-reverse !important;
    margin-top: 7px !important;
    margin-bottom:7px;
    }
/*animatie voor toepassingenbox met klikbare links*/
.link .ba-feature-list-layout .ba-feature-box .ba-feature-image-wrapper {
		margin-right:15px;
  	margin-top:3px;
}
.link .ba-feature-list-layout .ba-feature-box:hover .ba-feature-image-wrapper {
    margin-right: 0px;
  	transition: 0.6s ease;
		}
/*Logo slider*/
@keyframes ltr {
    from {
        transform: translateX(0);
        }
    to {
        transform: translateX(-100%);
        }
    }
.logos, .logosnoblend {
    overflow: hidden;
    padding: 30px 0px;
    white-space: nowrap;
    position: relative;
    }
.logos:before, .logos:after {
    position: absolute;
    top: 0;
    content: '';
    width: 50px;
    height: 150px;
    z-index: 2;
    }
.logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(153,153,153,0), rgb(153, 153, 153));
    }
.logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(153,153,153,0), rgb(153, 153, 153));
    }

@media only screen and (max-width: 9999px) { 
	.logo_items img {
    height: 100px !important;
  	padding:0 10px;
    }
  .ltr {
    width:200vw;
    display: inline-block;
    animation: 30s ltr infinite linear;
  	}
}
@media only screen and (max-width: 1025px) { 
	.logo_items img {
    height: 75px !important;
    border:0px solid white !important;
  	padding:0 0px;
    }
    .ltr {
    width:500vw;
    display: inline-block;
    animation: 20s ltr infinite linear;
  	}
  .case-section {
 	 	width:100%;
    max-width:800px;
    margin:0 auto;
  	}
}

.logos-sto img {
	
  	padding:0 25px;
		}
/*GRIDS*/
.grid-500 {
    max-width:500px;
    width:100%;
    }
.gri {
	width:100%;
    margin:0 auto !important;
    }
.d-1620, .grid-1620 {
	max-width:1620px;
    }
.d-1380, .grid-1380 {
	max-width:1380px;
    }
.d-1200, .grid-1200 {
	max-width:1200px;
    }
.d-1100, .grid-1100 {
	max-width:1100px;
    }
.d-1000, .grid-1000 {
	max-width:1000px;
    }
.d-900, .grid-900 {
	max-width:900px;
    }
.d-800, .grid-800 {
	max-width:800px;
    }
.d-700, .grid-700 {
	max-width:700px;
    }
.d-600, .grid-600 {
	max-width:600px;
    }
.d-500, .grid-500 {
	max-width:500px;
    }
.d-300, .grid-300 {
	max-width:300px;
    }
/**FOOTER**/
.footermenu .vertical-menu .main-menu .nav > li::before {
    background-color:var(--color-5) !important;
    }
.footer .bno-logo img {
    filter: brightness(0) saturate(100%) invert(13%) sepia(99%) saturate(5988%) hue-rotate(321deg) brightness(97%) contrast(104%);
    }