@charset "utf-8";
/* CSS Document */
/* Mobile phones: */
*, *::before, *::after {box-sizing: border-box;}
html, body {
	min-height: 100%;
	height: 100%;
	background-color:rgba(131,152,152,1.00); 
	
}
html,
html * {
	padding: 0;
	margin: 0;
	scroll-behavior: smooth;
}

		body {
			/*	background: url("../images/BG-ADS.png") no-repeat;	*/
			/* background-color:rgba(174,232,157,1.00); 			*/	
			/*	background-size: 120%;								*/
		}
		header {
			display: block;
			vertical-align: top;
			text-align: center;
			width: 100%;
		}


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: 4vw;}
.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 {text-decoration: none; color: rgba(255,255,255,0.80); transition: 0.5s ease-in-out;}
a:hover {text-decoration: none; color: rgba(255,255,255,1.0); transition: 0.5s ease-in-out;}
a:visited {text-decoration: none; color: rgba(255,255,255,0.80); transition: 0.5s ease-in-out;}
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%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	font-family: Museo;
	font-weight: 100;
	overflow-x: hidden;
	position: relative;
	background-image: url("../images/BGclouds2.png");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center top;  
	background-size: 100%;
	min-height: 100dvh;
		}
.container2 {
	width: 100%;
	height: 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;
	height: 1.7vw;	
	position: relative;
	z-index: 20;
	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 -15px;	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 15px;	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;
	}

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


.pdf-mobile .pdf-link {
	display: inline-block;
	padding: 0.75em 1.5em;
	background: rgba(2,150,175,0.8);
	color: #fff;
	border-radius: 7.5px;
	font-family: Museo;
}
.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;
}



#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;
}