@charset "utf-8";
/* CSS Document */
/* Mobile phones: */
*, *::before, *::after {box-sizing: border-box;}

html,
html * {
	padding: 0;
	margin: 0;
}

body {
/*	background: url("../images/BG-ADS.png") no-repeat;	*/
/*	background-color:rgba(41,28,20,1.00); 				*/
/*	background-size: 120%;								*/
}


h1 {
    font-family: Museo;
    font-weight: 700;
/*	font-size: 4vw;	*/
    letter-spacing: 0.75px;
    color: rgba(255,255,255,0.70);
	padding-bottom: 1%;
}
h2 {color:rgba(0,150,175,0.8);}
h3 {
	font-family: Museo;
    font-weight: 100;
	font-size: 7.5vw;
	color:rgba(161,219,229,1);
}
h4 { padding: 0% 0% 1% 0%; color: rgba(161,219,229,0.8); font-family: Museo; font-weight: 300; font-size: 4.5vw;}
h5 { text-align: left; padding-bottom: 3%; color: rgba(161,219,229,0.8); font-family: Museo; font-weight: 300; font-size: 4vw;}
p {font-family: Museo-Sans; font-weight: 300; color:rgba(0,60,75,1.00); text-align: left; padding-bottom: 3%; font-size: 16px;}
.white {color:rgba(255,255,255,1.00);}
.darkblue {color: rgba(0,150,175,1.00);}
.notwhite {color:rgba(236,214,191,1.00);}
strong {font-weight: 500; color: rgba(0,121,143,1);}
u 	{ text-underline-offset: 0.5vw; text-decoration-thickness: 0.1vw;  }
.left {text-align: left;}
.link {text-decoration: none;}
.link:visited {text-decoration: none;}
a:visited {text-decoration: none; color: rgba(255,255,255,0.80)}
button {
    cursor: pointer;
	padding: 0px 20px;
	border: none;
	border-radius: 7.5px;
	background: rgba(2,150,175,0.8);
	color: rgba(255,255,255,0.8);
	font-family: Museo;
	font-weight: 700;
	font-size: 16px;
	height: 2em;
	margin: 10px 0;
	transition: 0.7s ease-in-out;
}
button:hover {
    background: rgba(255,255,255,0.8);
	color: rgba(2,150,175,0.8);
	transition: 0.5s ease-in-out;
}

.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	font-family: Museo;
	font-weight: 100;
	overflow-x: hidden;
	position: relative;
	/*background-image: url("../images/BG-ADS.png");*/
	background-image: url("../images/BGclouds.png");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center top; 
	background-color:rgba(92,112,116,1.0); 
	background-size: 120%;
}
.container2 {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	font-family: Museo;
	font-weight: 100;
	overflow-x: hidden;
	position: relative;
}
.name {
	color: rgba(255,255,255,0.3);
	font-family:Museo;
	font-weight: 100;
	font-size: 3.25vw;
	text-align: left;
	float: left;
	margin-top: 15px;
	margin-left: 25px;
	letter-spacing: 1px;
}

#logo-container{ 
	align-content: center;
	width: 100%;
	height: 250px;
	/*animation: floatLogo 12s infinite;*/
}
@keyframes floatLogo {  
	0%			{translate: 5px 0px;	rotate: -1deg; animation-timing-function: ease-out;}
	/*12.5%		{translate: 0% -1%;	rotate: -1deg;}*/ 
	25% 		{translate: 0px -20px;	rotate: 0deg; animation-timing-function: ease-in;}
	/*37.5%		{translate: 0% -1%;	rotate: 0deg;	}*/
	50% 		{translate: -5px 0px;	rotate: 1deg; animation-timing-function: ease-out;}
	/*62.5%		{translate: 0% 1%;	rotate: 1deg;}*/
	75% 		{translate: 0px 20px;	rotate: 0deg; animation-timing-function: ease-in;}
	/*87.5%		{translate: 0% 1%;	rotate: 0deg;}*/
	100%		{translate: 5px 0px;	rotate: -1deg; animation-timing-function: linear;}
}
.style-logo{
	width: 115%;
	translate: -9%;
	z-index: 200;
	
}


header {
	vertical-align: top;
	text-align: center;
	width: 100%;
}
/* Hamburger menu -- https://youtu.be/dAIVbLrAb_U?si=P2BCoJRh9bCN41t6 -- */
:root {
	--bar-width: calc(var(--hamburger-height) * 1.5);
	--bar-height: 4px;
	--hamburger-gap: 5px;
	--hamburger-margin: 0.5rem;
	--foreground: rgba(255,255,255,0.6);
	--background: none /*rgba(151,227,234,0.4)*/;
	--animation-timing: 200ms ease-in-out;
	--hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
	--hamburger-width: calc(var(--hamburger-height) * 1.41421356237);
}
.hamburger-menu {
	
	display: flex;
	flex-direction: column;
	gap: var(--hamburger-gap);
	width: max-content;
	position: absolute;
	top: 15px;
	right: 15px;
	background: var(--background);
	z-index: 667;
	cursor: pointer;
}
.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
	content: "";
	width: var(--bar-width);
	height: var(--bar-height);
	background-color: var(--foreground);
	border-radius: 9999px;
	transform-origin: right center;
	transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing), background-color var(--animation-timing);
}
.hamburger-menu input {
	appearance: none;
	padding: 0;
	margin: 0;
	outline: none;
	pointer-events: none;
}
.hamburger-menu:has(input:checked)::before{
	rotate: -45deg;
	width: var(--hamburger-width);
	translate: 0 calc(var(--bar-height) / -2);
	background-color: white;
}
.hamburger-menu:has(input:checked)::after{
	rotate: 45deg;
	width: var(--hamburger-width);
	translate: 0 calc(var(--bar-height) / 2);
	background-color: white;
}
.hamburger-menu input:checked {
	opacity: 0;
	width: 0px;
}
.sidebar{
	transition: translate var(--animation-timing);
	translate: 100%;
	position: absolute;
	right: 0px;
	padding: 0.5em 2em ;
	padding-top: calc(var(--hamburger-height) + 1rem);
	background: rgba(0,150,175,0.5);
	color: var(--foreground);
	width: 100%;
	height: 100%;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 500;
	max-width: 600px;

}
#sidebar{
	display: block;
	transition: translate var(--animation-timing);
	translate: 0%;
	position: absolute;
	right: 0px;
	padding: 5em 10%;
	margin-top: 3em;
	background: rgba(151,227,234,0.7);
	color: rgba(56,40,24,1.00);
	width: 100%;
	height: 86%;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 500;
	font-family: Museo-sans;
    font-weight: 100;
	
}
.sidebar-items {
	float: none;
	color: rgba(255,255,255,1.00);
	text-align: left;
    margin: 0;
    vertical-align: top;
    font-family: Museo-sans;
    font-weight: 100;
	font-size: 16px;
	max-width: 600px;
	min-height: 200px;
 
}
.sidebar-items h1 {
	color: #fff;
	font-family: Museo-sans;
    font-weight: 500;

}
.sidebar-items #contact {
	float: none;
	width: inherit;
	margin: 0;
	padding: 0;
	border: 0;
	height: 100%;
}
.sidebar-items fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	
}
.sidebar-items input  {
	border: 1px solid rgba(255,255,255,0.80);
	background: rgba(255,255,255,0.2);
	width: 100%;
	padding: 10px;
	margin: 10px 0 ;
	box-shadow: none;
	height: 40px;
	border-radius: 7.5px;
}
.sidebar-items textarea {
	height: 100px;
 	border: 1px solid rgba(255,255,255,0.80);
	background: rgba(255,255,255,0.2);
	width: 100%;
	padding: 10px;
	margin: 10px 0 ;
	box-shadow: none;
	border-radius: 7.5px;
}
.sidebar-items ::placeholder {color: rgba(255,255,255,1.00); font-family: Museo-sans; font-weight: 100; letter-spacing: 1px; font-size: 16px; }
.sidebar-items button[type="submit"] { 
	width: 200px;
	height: 30px;
	background: rgba(2,150,175,0.8);
	color: rgba(255,255,255,0.8);
	border-radius: 7.5px;
	font-size: 16px;
	margin: 10px 0 ;
	transition: 0.7s ease-in-out;
}
.sidebar-items button[type="submit"]:hover {
    background: rgba(255,255,255,0.8);
	color: rgba(2,150,175,0.8);
	transition: 0.5s ease-in-out;
}

.hamburger-menu:has(input:checked) + .sidebar {
	translate: 0;
}



nav {
    float: right;
    text-align: center;
    margin-right: 15px;
    margin-top: 15px;
    vertical-align: top;
    font-family: Museo;
    font-weight: 500;
    font-size: 3.25vw;
	display: none;
	}


header nav ul {
	list-style: none;
	float: right;
}
nav ul li {
	float: left;
	text-align: right;
	margin-right: 5px;
	letter-spacing: 1px;
	/*	transition: all 0.3s ease-out;	*/
}
nav ul li a {
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	border-radius: 20px;
	border: 1px solid;
	padding: 0.1em 1em 0.1em 1em;
	border-color: rgba(255,255,255,0.0);
}
nav ul li:hover a {
	color: rgba(255,255,255,1);
	border-color: rgba(255,255,255,0.6);			
}

nav ul li.activated a {
	color: rgba(255,255,255,1);
	border-color: rgba(255,255,255,0.6);			
}


#navmain	{
    position: relative;
	z-index: 300;
	width: 100%;
	translate: 0px -200%;
	}

		#navmain > ul > li {
			display: inline-block;
			color: rgba(10,159,183,0.80);	
			padding-left: 3%;
			padding-right: 3%;
		}
		
/*			#navmain > ul > li:last-child   */
/*			{								*/
/*				padding-right: 10em;		*/
/*			}								*/

			#navmain > ul > li > a,
			#navmain > ul > li > span
			{
				display: inline-block;
				padding: 0.2em 1em;
				letter-spacing: 1px;
				text-decoration: none;
				font-family: Museo;
    			font-weight: 500;
				font-size: 4.5vw;
				border-radius: 40px;
				border: 2px solid;
				border-color: rgba(10,159,183,.0);
				color: rgba(10,159,183,0.80);	
				transition: 0.2s ease-in-out;
			}


			#navmain > ul > li > a:hover
			{
				border-radius: 40px;
				border: 2px solid;
				border-color: rgba(10,159,183,0.6);
				color: rgba(10,159,183,0.8);	
				transition: 0.5s ease-in-out;
			}

			#navmain li.nm-active a
			{
				border-radius: 40px;
				border: 2px solid;
				border-color: rgba(10,159,183,0.6);
				color: rgba(10,159,183,0.8);
			
			}
/* content */
.intro { 
	width: 100%;
	padding: 10px 7.5% 20px;
	margin: 0 0;
	display: flex;
	flex-wrap: wrap;
}

.intro h3 {column-count: 1; column-span: all;}
.intro h4 {flex-basis: 100%;}
.intro h5 {flex-basis: 100%;}
.intro ul li {
	list-style:"✓";
	margin-left: 20px;
	padding-left: 10px;
	text-align: left;
	font-family: Museo-sans;
}
.intro li::marker {color: rgba(161,219,229,1); }
.intro strong {
	color: rgba(161,219,229,1);
	font-weight: 300;
	font-family: Museo;
}
.intro p {
	color:rgba(236,214,191,1.00);
	font-weight: 100;
	display: flex;
}
	#darkbggradient {background: linear-gradient(rgba(41,28,20,0), rgba(41,28,20,0.3));}
	#darkbg {background: rgba(41,28,20,0.3); }
	.intro .col-i-2 { flex-basis: 100%; padding: 10px 10px 10px 0px; text-align: left;}
	.intro .col-i-3 { padding: 0px 5px 0px 0px;}

.content {
	display: flex;
	flex-wrap: wrap;
    background: rgba(0,150,175,0.2);
    width: 100%;
/*	padding: 0% 4%; */
	margin-top: 35px;
	border-radius: 0px;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.content h1 {padding-top: 1.5%; }
.content .col-1 {
	padding: 0% 0.25% 0.5%; 
	flex-basis: 100%;
}
.content .col-3  {	
	margin: 0 0 2%;
	padding: 2% 2% 2%;
	flex-basis: 100%;
	background: rgba(225,240, 255,0.80);
	border-radius: 6px;
}
.col-1 {
	display: inline;
	vertical-align: middle;
}
.content .col-3 .inhoud {   height: 100%; padding: 2%;	}

.blueblock{

	padding: 0.5em 2em ;
	background: rgba(151,227,234,0.8);

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	max-width: 900px;

}
.hero-image {
	max-width: 100%;
	max-height: 250px;
	object-fit: cover;
}
/* image slider */
.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.slides::-webkit-scrollbar-thumb {
  background: rgba(0,150,175,0.8);
  border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
  background: rgba(0,150,175,0.1);
}
.slides > div {
	scroll-snap-align: start;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	margin-right: 50px;
	transform-origin: center center;
	transform: scale(1);
	transition: transform 0.5s;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 100px;
}
.slides > div:target {
/*   transform: scale(0.8); */
}
.image-info {
  color: white;
  padding: 0.75rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,33,36,1);
	background: rgba(0,150,175,0.3);
	
}
.image-info a {
  color: white;

}
.slide-image {
	object-fit: cover;
	max-width: 100%;
	max-height: 100%;
	display: flex;
}
/* Slideshow container */
.mySlides {
	align-content: center;  
	align-items: center;
	justify-content: center;
	display: inline-flex;
	scroll-snap-align: start;
	flex-shrink: 0;
	transform-origin: center center;
	transform: scale(1);
	transition: transform 0.5s;
	position: relative;
}
.slideshow-container, .slideshow-container2, .slideshow-container3 {
 /* max-width: 1000px;*/
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next, .prev2, .next2, .prev3, .next3, .prevB, .nextB {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 14px;
  transition: 0.6s ease;
  user-select: none;
}

/* Position the "prev button" to the left */
.prev, .prev2, .prev3 {
  left: -10%;
  border-radius: 8px 0 0 8px;
}
.prevB { border-radius: 8px 0 0 8px; left: 10px; }
/* Position the "next button" to the right */
.next, .next2, .next3 {
  right: -10%;
  border-radius: 0 8px 8px 0;
}
.nextB { border-radius: 0 8px 8px 0; right: 10px;}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover, .prev2:hover, .next2:hover, .prev3:hover, .next3:hover, .prevB:hover, .nextB:hover {
  background-color: rgba(0,150,175,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot, .dot2, .dot3 {
  display: inline-block;
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 10px 4px;
	text-align: center;
	text-decoration: none;
  background-color: rgba(0,150,175,0.2);
  border-radius: 50%;
  transition: background-color 0.6s ease;
	font-size: 7px;
	font-weight: 500;
	color: #FFFFFF;
	vertical-align: middle;
	align-content: center;
}

.active, .dot:hover, .dot2:hover, .dot3:hover {
  background-color: rgba(0,150,175,0.8);
}


#socialframe {top: 20px; right: 0; position: absolute; width: 120px; display: inline-block;}


.footer{
	color: #fff;
/*	background: rgba(151,227,234,0.4);*/
	background: rgba(0,150,175,0.7);
	padding: 5px 20px;
	margin: 15px 0px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.footer2{
	color: #fff;
	background: rgba(0,150,175,0.7);
	padding: 5px 20px;
	margin: 15px 0px;
	background-image: url("../images/Background-profile.png")
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

#otherlogos{
	display: flex;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
	text-align: left;
}
.otherlogo{
	margin-left: 25px;
	margin-right: 25px;
}

@media only screen and (min-width: 600px) {
	/* For tablets: */
	h1 {font-size: 2.9vw;}
	h3 {font-size: 5vw; padding: 0 0 3px 0; }
	h4 {font-size: 2.9vw; padding: 0 0 2px 0;}
	/*.hamburger-menu	{	display: none;	} 	*/
	/*.sidebar		{	display: none;	} 		*/
	/*.sidebar-items	{	display: none;	} 	*/
	.name		{	font-size: 2.4vw	}
	nav 		{	font-size: 2.4vw;	
					display: inline-block;}
	#navmain	{	translate: 0px -140%;	}
	#navmain > ul > li > a,
	#navmain > ul > li > span
				{	font-size: 3vw;		}
	
	.style-logo {	width: 80%;	padding-right: 3%; translate: 0;}
	.content .col-3 { margin-right: 0%; flex-basis: 100%;}
	.intro { padding: 10px 7.5% 20px; margin: 0 0;}
	.intro .col-i-1 { flex-basis: 100%;}
	.intro .col-i-2 { flex-basis: 50%; padding-right: 6%;}
	.intro .col-i-3 { flex-basis: 50%; padding-right: 0;}
	.content {margin-top: 0px;}
}
@media only screen and (min-width: 768px) {
	/* For desktop: */
	h1 {font-size: 24px;}
	h3 { font-size: 36px;}
	h4 { font-size: 20px;}
	.name		{	font-size: 15px;	}
	nav			{   font-size: 15px;	}
	#navmain	{	translate: 0px -100%;	}

	#navmain > ul > li > a,
	#navmain > ul > li > span
				{	font-size: 20px;		}
	#navmain > ul > li:last-child { padding-right: 2em; }
	.style-logo {	width: 550px;	translate: 0px; }
	.container {	background-size: 100%; translate: 0, -20px; }
	.content .col-3 { margin-right: 2%; flex-basis: 31.33%;}
	.intro .col-i-2 { flex-basis: 50%; padding-right: 4%; text-align: left;}
	.intro .col-i-3 { flex-basis: 50%;}

}
@media only screen and (min-width: 900px) {
	/* For large desktop: */
	.container {	background-size: 100%;}
	H4 {color: rgba(255,255,255,0.90);}
	.style-logo {	width: 550px; translate: -6%;}
	#navmain	{	translate: -3.5% -90%;	}
	#navmain > ul > li > a,
	#navmain > ul > li > span
				{	color: rgba(255,255,255,0.80);	}
	.intro .col-i-2 { flex-basis: 40%; padding-right: 4%; display: table-row;}
	.intro .col-i-3 { flex-basis: 25%; display: table-cell;}
	
}
@supports (scroll-snap-type) {
  .slider > a {
    display: none;
  }
}