* {
	font-family: 'Poppins', sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-y:visible;
}

body 
{
	overflow-y: scroll;
	overflow-x:hidden;
	/*background-image: linear-gradient(to bottom right, #fff, #ddd);*/
}

/* navigatie active-item = bold */
.nav-link.active, .nav-link.active * {
	font-weight:bold !important;
}

.dropdown-item.active {
	background-color:#333; 
	color:#fff;
}

.col_min_hoogte_8, .col_min_hoogte_12, .col_min_hoogte_16, .col_min_hoogte_24, .col_min_hoogte_32 {
	display:inline-block;
}
.col_min_hoogte_8{ height:8rem !important; }
.col_min_hoogte_12{ height:12rem !important; }
.col_min_hoogte_16{ height:16rem !important; }
.col_min_hoogte_24{ height:24rem !important; }
.col_min_hoogte_32{ height:32rem !important; }

#pagina_inhoud {
	display:block;
	max-width:960px !important;
	margin:1rem auto !important;
	padding:1rem !important;
	padding-top:4rem !important;
}

#pagina_navigatie_groot_scherm {
	display:block !important;
	background-color:lime !important;
}

/* kleine schermen */
@media only screen and (max-width: 960px) 
{
	body {
		overflow-x: hidden !important;
	}
	
	#pagina_inhoud:before {
		font-size:3rem !important;
		content:'OVERFLOW-X: HIDDEN !!!';
	}
	
	#pagina_navigatie_groot_scherm {
		/*display:none !important;*/
	}
	
	.col_min_hoogte_8, .col_min_hoogte_12, .col_min_hoogte_16, .col_min_hoogte_24, .col_min_hoogte_32 {
		height:auto !important;
		display:inline-block !important;
		/*width:100%;*/
	}
	
	footer, footer * {
		font-size:0.7rem !important;
	}
	
	#pagina_inhoud {
		width:100% !important;
		/*background-color:#fff !important;*/
		margin:2rem auto !important;
		padding:1rem !important;
		margin-top:4rem !important;
		padding-top:3.2rem !important;
	}
	
	nav {
		box-shadow:4px 16px 32px #333;
		border-bottom:2px solid #0044ff !important;
	}
}


#pagina_navigatie_logo {
	width:128px;
	height:64px;
	display:block;
}
#pagina_navigatie_logo img {
	width:64px !important;
	height:auto;
	float:left;
}

#pagina_navigatie_logo_klein, #pagina_navigatie_logo_klein img {
	width:32px !important;
	height:auto;
	margin:0 !important;
}

#pagina_navigatie {
	background-color:navyblue !important;
	background:#FF0066 !important;
}

#pagina_navigatie_bar{
	background:#ffa100 !important;
}

.border-custom {
	border:2px solid #FF0066 !important;
}
.border-custom-secondary {
	border-color:#330660 !important;
}

.btn {
	font-weight:bold;
	border-radius:0.24rem !important;
	font-weight:normal !important;
}

.btn-custom {
	background-color:#FF0066 !important;
	color:#fff !important;
}

.btn-custom:focus, .btn-custom:hover {
	background-color:#910033 !important;
	color:#fff !important;
	/*border:2px solid #fff !important;*/
}

.btn-custom-secondary {
	background-color:#777 !important;
	color:#fff !important;
}

.btn-custom-secondary:focus, .btn-custom-secondary:hover {
	background-color:#1A2020 !important;
	color:#fff !important;
}

.list-group {
	border:2px solid #FF0066;
	border-radius:0.9rem;
	box-shadow:0 !important;
	outline:none !important;
	font-size:0.8rem !important;
	/*text-transform:uppercase !important;*/
}

.list-group .active, .list-group .active * {
	background-color:#ddd !important;
	font-weight:bold !important;
	border:none !important;
}

.list-group-custom, .list-group-custom * {
	background:#fff !important;
	background-color:#fff !important;
	color:#00befa !important;
	/*border:4px dashed blue;*/
	border-radius:0 !important;
}

.custom-collapse {
	border:4px solid #FF0066;
	outline-width:10px solid #333 !important;
}

.custom-collapse, .custom-collapse * {
	color:#1A2020 !important;
	font-weight:bold !important;
	font-size:0.8rem !important;
	padding:0.5rem !important;
	border:1px solid #FF0066 !important;
}

.custom-collapse:hover, .custom-collapse:focus {
	outline:2px solid #910033 !important;
	border-color:#910033 !important;
	color:#910033 !important;
}

.custom-collapse * {
	border:none !important;
	border-radius:0rem !important;
}

.col {
	padding:2rem !important;
}

.bg-custom {
	background-color:#eee !important;
}

.bg-custom-secondary {
	background-color:#ffaecc !important;
}

.feather-custom-16{
	text-decoration:none !important;
	width:16px;
	height:auto;
}

.feather-custom-icon {
	width:70px !important;
	height:70px !important;
	padding:2px !important;
	border-radius:12px;
	display:block;
	
	box-shadow:-4px 4px 2px #333;
	margin:0 8px 16px 0 !important;
	overflow-x: visible !important;
	z-index:2;
}


.feather-custom-icon, .feather-custom-icon * {
	color:#fff !important;
	text-decoration:none !important;
}

.feather-custom-icon i * {
	color:#333 !important;
	border:10px dashed red !important;
}

.feather-icon {
	display:block;
	width:45px;
	height:45px;
	margin:0;
	padding:0;
	margin-top:10px;
	margin-left:10px;
	color:#fff !important;
}


.feather-custom-icon:nth-child(even){
	background-image: linear-gradient(to bottom left, darkgreen, lightgreen, green);
	color:#fff !important;
}

.feather-custom-icon:nth-child(odd){
	background-image: linear-gradient(to top right, #FF0066, #1A2020);
	color:#fff !important;
}

.feather-icon:hover, .feather-icon:focus {
	color:#fff !important;
	
}
.feather-custom-icon:nth-child(odd):hover, .feather-custom-icon:nth-child(odd):focus {
	box-shadow:8px 8px 2px #333;
	background-image: linear-gradient(to top right, #FF0033, #FF0099);
}

.feather-custom-icon:nth-child(even):hover, .feather-custom-icon:nth-child(even):focus {
	box-shadow:8px 8px 2px #333;
	background-image: linear-gradient(to top, darkgreen, lightgreen);
	text-shadow:#333 8px 8px 16px !important;
}



.custom-icon-heading:nth-child(odd), .custom-icon-heading:nth-child(odd) * {
	color:#1A2020 !important;
	display:block !important;
	height:auto !important;
	margin:-48px 0 0 64px !important;
	border:2px dashed red;
	overflow:visible !important;
	font-size:15px !important;
	font-weight:bold !important;
	text-shadow:#333 1px 1px 1px !important;
	font-transform:uppercase !important;
	color:#fff !important;
	background-color:#ffa100;
}
/*
.custom-icon-heading:before {
	content:"'";
}
.custom-icon-heading:after {
	content:"'";
}
*/

.custom-icon-heading {
	padding-left:1rem;
	padding-top:0.5rem;
	color:#1A2020 !important;
	height:auto !important;
	margin-left:64px;
	margin-top:-32px;
	width:320px !important;
	overflow:visible !important;
	font-size:120% !important;
	font-weight:bold !important;
	text-shadow:#333 1px 1px 1px !important;
	text-transform:uppercase;
	color:#ddd !important;
	text-align:left;
	transform: rotate(-2deg);
	display:block;
	margin-bottom: 1000px !important;
	
	position:relative !important;
	animation-name: animatieTest;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	z-index:1;
}


@keyframes animatieTest {
	0%   {background-color:#ff0070; left:0px; top:0px;}
	50%   {background-color:#ff0066; left:5px; top:0px;}
	100%   {background-color:#FF0060; left:0px; top:0px;}
}


.typewriter h2 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .25em solid #FF0066; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: 1; /* Adjust as needed */
  animation: 
    typing 1.5s steps(100, end),
    blink-caret .25s step-end infinite;
	width:150%;
	background:#00befa;
	margin-bottom:4rem;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 150% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #FF0060; }
}
/*

.feather-custom-icon:nth-child:(even){
	background-image: linear-gradient(to bottom, darkgreen, lightgreen) !important;
}

.feather-custom-icon:nth-child:(even){
	 background-image: linear-gradient(to bottom, brown, orange);
}
.feather-custom-icon:nth-child(odd){
	background-image: linear-gradient(to bottom, darkgreen, lightgreen);
}
.feather-custom-icon a *, .feather-custom-icon a {
	color:#fff !important;
	border:4px dashed red;
}

*/

.link-custom{
	text-decoration:none;
}
.link-custom:hover, .link-custom:focus {
	text-decoration:underline;
}

p { color:#444 !important; }

h1, h2, h3, h4, h5 {
	color:#1A2020 !important;
}

h1 {
	display:inline-block !important;
	background-color:#FF0066 !important;
	color:#FFF !important;
	padding:0.32rem 0.64rem;
	text-transform:uppercase;
}

h6 {
	color:#FF0066 !important;
	font-weight:bold !important;
	font-size:1.1rem !important;
}


code {
	display:block;
	padding:0.64rem !important;
	margin:0.64rem 0 !important;
	border-radius:0.32rem !important;
	/*cursor:pointer !important;*/
	background-color:#1A2020 !important;
	border:1px solid #aaa !important;
	color:#FFCC00 !important;
	font-family:"Lucida Console";
	font-size:0.72rem;
	/*font-weight:bold;*/
	/*box-shadow:#777 2px 2px 4px;*/
	/*overflow:scroll-x !important;*/
}

#pagina_inhoud a:not(.btn, .alert-link) {
	color:#FF0066 !important;
}

#pagina_inhoud a:not(.btn):hover, #pagina_inhoud a:not(.btn):focus {
	color:#910033 !important;
}

.alert, .alert * {
	background-color:#FF0066 !important;
	color:#fff !important;
	background:#70bb80 !important;
	color:#006810 !important;
}

.alert-info, .alert-info * {
	background-color:lightblue !important;
	border:1px solid blue !important;
	color:darkblue !important;
}

.alert-warning, .alert-warning * {
	background-color:#FFEBCD !important;
	border:1px solid brown !important;
	color:brown !important;
}

.alert-success, .alert-success * {
	background-color:lightgreen !important;
	border:1px solid darkgreen !important;
	color:darkgreen !important;
}


.alert button *,.alert button {
	background:#ffa100 !important;
	color:#ffa100 !important;
	width:0.24rem;
	height:0.24rem;
	color:#333;
	display:none;
}

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

Bootstrap 5 (originele) carousel wijzigingen

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

.carousel {
	width:100%;
	height:480px;
	/*overflow:hidden;*/
	border:1px solid #333;
	border-radius:0.32rem;
	margin:1rem auto;
}

.carousel-control-next, .carousel-control-prev {
	/*background-color:purple !important;*/
	width:15%;
	height:100%;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
}

.slide_captions {
	width:0.64rem !important;
	height:0.64rem !important;
	background-color:#ff0033 !important;
	margin:0 0.64rem 0 0 !important;
	opacity:0.25 !important;
	border-radius:100% !important;
}

.slide_captions:hover, .slide_captions:focus, .slide_captions.active {
	width:0.96rem !important;
	height:0.96rem !important;
	background-color:#ffa100 !important;
	margin:-.16rem 0.64rem 0 0 !important;
	opacity:0.75 !important;
}

.carousel-indicators {
	positon:absolute;
	width:100%;
	height:64px;
	left:0rem;
	top:256px;
	
	background-color:#333;
	z-index:10000;
	
	opacity:0.75;

	margin:0;
	padding:0;
}

.carousel-caption {
	position:relative !important;
	top:0rem !important;
	left:0rem !important;
	margin:0rem;
	padding:0rem;
}

.carousel-caption p {
	font-size:0.8rem;
	color:#fff !important;
}

.carousel-caption h5 {
	color:#FF0066 !important;
	text-transform:uppercase;
	font-weight:bold;
	font-size:1rem;
}

.carousel-item {
	 /*transition: transform 0.5s ease;*/
}
.carousel-item img {
	width:auto;
	height:320px !important;
	 /*transition: transform 0.5s ease;*/
}
.carousel-btn{
	/*border:4px dashed lime;*/
}

.carousel-item img {
	width:100% !important;
	height:auto !important;
}


/* COMMENTS ???
*('<!--'):before {
  content: '<!--';
  color: lime !important;
}

('-->'):after {
  content: '-->';
  color: lime !important;
}*/

/*h1 {
	text-transform:uppercase;
	background-color:#FF0066 !important;
	color:#fff !important;
	display:inline-block !important;
	padding:0 0.5rem;
}*/

/* allways responsive ?!! => NOG TESTEN */
.table-responsive {
	overflow-x:auto !important;
}

.loading-custom {
	
}

.loading-bg-custom {
	background-color:#333 !important;
}

#pagina_preloader {
	background-image: linear-gradient(to bottom right, #fff, #ddd) !important;
	display:block !important; 
	z-index:9999 !important;
	position:fixed;
	top:30% !important;
	left:35% !important;
	width:30% !important;
	height:20% !important;
	margin:0 !important;
	padding:0 !important;
	border:2px solid #FF0066 !important;
	border-radius: 0.4rem !important;
	cursor:wait !important;
}

#pagina_preloader * {
	z-index: 9999 !important;
}

#pagina_preloader .btn {
	margin:4rem;
	width:60% !important;
	margin-left:20% !important;
	margin-top:10% !important;
}

#pagina_preloader_bg {
	position:fixed;
	top:0;
	left:0;
	
	width:100%;
	height:100%;
	z-index:9998 !important;
	background-color:#000 !important;
	opacity:0.7 !important;
}