.home-menu li:first-child ::after {
	background:;
  display:;
  content:"tekst";
  color:black;
}
.invert img {
 	-webkit-filter: invert(1);
   filter: invert(1);
}
header.header {
	min-width:10px;
}
*, html {
	word-break:break-word !important;
}
.icon-menu ul li  {
  display:flex !important;
	flex-direction:column !important;
}
.icon-menu ul li a i {
	display:block;
  width:100% !important;
}
@media (max-width:5000px) {
	.icon-menu ul li a i::before {line-height:1.3rem;padding:5px;}
}
@media (max-width:1440px) {
	.icon-menu ul li a i::before {line-height:1.8rem;padding:2px;}
}
.icon-menu ul li a i::before {
	/*background:var(--color-1);*/
  height:30px;
  width:30px;
  display:inline-block;
}
.wrap-intro {
	max-width:500px;
}
.img-fluid {width:300px !important; height:300px !important;}



/*DRP Brand portal specific styles*/
/*Underline anim*/
.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;
}
.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);
  background-color: #000 /*var(--secondary)*/;
}
/*Blog post plugin*/
.blog-post-plugin .ba-blog-post-content {
    padding:0 !important;
}

/*standaard knop*/
.knop a {
	position:relative;
  display:block;
}
.knop a i {
  padding-left:0px;
	transition:0.6s;
}
.knop a:hover i {
	padding-left:15px;
}

.knopbox a {
	position:relative;
  display:block;
}
.knopbox a i {
  padding-left:0px;
  margin-right:15px !important;
	transition:0.6s;
}
.knopbox a:hover i {
	padding-left:15px;
  margin-right: 0px !important; 
}



.knop-yellow a {position:relative; display:block;}
.knop-yellow a i {padding-left:0px; transition:0.6s;}
.knop-yellow a:hover i {padding-left:15px;}
.knop-yellow a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: var(--color-1);
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.6s ease;}
.knop-yellow a:hover::before {transform: scaleX(1);
  background-color: var(--color-1);}


.knop-pink a {position:relative; display:block;}
.knop-pink a i {padding-left:0px; transition:0.6s;}
.knop-pink a:hover i {padding-left:15px;}
.knop-pink a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: var(--secondary);
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.6s ease;}
.knop-pink a:hover::before {transform: scaleX(1);
  background-color: var(--secondary);}

.knop-blue a {position:relative; display:block;}
.knop-blue a i {padding-left:0px; transition:0.6s;}
.knop-blue a:hover i {padding-left:15px;}
.knop-blue a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: var(--color-6);
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.6s ease;}
.knop-blue a:hover::before {transform: scaleX(1);
  background-color: var(--color-6);}

.knop-lightblue a {position:relative; display:block;}
.knop-lightblue a i {padding-left:0px; transition:0.6s;}
.knop-lightblue a:hover i {padding-left:15px;}
.knop-lightblue a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: var(--color-5);
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.6s ease;}
.knop-lightblue a:hover::before {transform: scaleX(1);
  background-color: var(--color-5);}

.knop-white a {position:relative; display:block;}
.knop-white a i {padding-left:0px; transition:0.6s;}
.knop-white a:hover i {padding-left:15px;}
.knop-white a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: top left;
  transition: transform 0.6s ease;}
.knop-white a:hover::before {transform: scaleX(1);
  background-color: #fff;}


.knop-black a {position:relative; display:block;}
.knop-black a i {padding-left:0px; transition:0.6s;}
.knop-black a:hover i {padding-left:15px;}
.knop-black 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;}
.knop-black a:hover::before {transform: scaleX(1);
  background-color: #000;}



/*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;
}