*{
	margin: 0;
	padding: 0;
}

html {
	font-family: "Open Sans", Tahoma, sans-serif;
	font-size: 115%;
	line-height: 1.5;
	color: white; 
	scroll-behavior: smooth;
}

body {
	width: 100%;
	height: 100%;
	background-color: #52809f;
	overflow-y: scroll;
	display: block;
}

a {
	text-decoration: none;
	color: skyblue;
}

a.blokLink {
	color: white;
}

#backButton {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	z-index: 9999;
	padding: 1.5em;
	text-align: center;
}

#backButton a p {
	width: 1.75em;
	height: 1.75em;
	color: black;
	font-size: 170%;
	background-color: white;
	border-radius: 50%;
	box-shadow: 0 0 3em 0.1em black;
}

@media (orientation: portrait) {
	#backButton a p {
		font-size: 250%;
	}
}

#mainTop {
	position: fixed;
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: center;
	background-color: #52809f;
	font-size: 90%;
}

#mainTopL img {
	position: fixed;
	top: 0;
	left: 0;
	width: 45%;
	height: 100%;
	object-fit: cover;
}

#mainTopR {
	height: 100%;
	padding: 2% 4% 2% 0;
	text-align: center;
}

@media only screen and (min-width: 1600px) {
	#mainTop {
		font-size: 105%;
	}
}

@media only screen and (min-width: 2400px) {
	#mainTop {
		font-size: 130%;
	}
}


#mainTopR h1 {
	font-size: 250%;
	font-weight: lighter;
	text-shadow: 0.1em 0.1em 0.2em #505050;
	padding-bottom: 0;
	padding-top: 0.5em;
}

#mainTopR h2 {
	font-size: 100%;
	font-weight: lighter;
}

#mainTopR p {
	margin: 1em 0 1em 0;
}

#mainTopR:hover:after {
	content: attr(title);
	display: none;
} 

.intro {
	width: 50%;
}


#mainBottom {
	position: absolute;
	display: block;
	top: 80%;
	background-color: #7d938b;
	box-shadow: 0 -1em 5em rgb(0 0 0 / 50%);
}

@media (orientation: portrait) {
	#mainBottom {
		top: 60%;
	}
}

.blokLinkFix {
	color: white;
}

.blok {
	float: left;
	width: 23%;
	margin: 4% 0% 9% 4%;
	padding: 2.5%;
	border-radius: 3em;
	box-shadow: 0.5em 0 1.5em rgb(0 0 0 / 35%);
}

@media only screen and (max-width: 1500px) {
	.blok {
		width: 26%;
		margin: 1.5% 0% 14% 1.75%;
	}
}

.blok h2 {
	text-align: center;
	font-size: 200%;
	font-weight: lighter;
	text-shadow: 0.1em 0.1em 0.2em #505050;
	margin-bottom: 1em;
}

.blok h3 {
	margin-bottom: 0.1em;

}

.blok h3.buffer{
	margin-top: 2em;
	margin-bottom: 1em;
}

.blok p {
	margin-bottom: 1em;
}

.blok p.buffer {
	padding-top: 2em;
}

.blok li {
	list-style-type: none;
	margin-top: 0;
	margin-bottom: 0.5em;
}

ol.spreken li {
	text-indent: -1.63em;
	margin-left: 1.63em;
}

.blok ol {
	margin: -0.5em 0 -0.5em 0;
}

.centreer {
	text-align: center;
}

#blokSchrijven {background-color:#304b52;}

#blokSpreken {background-color:#52809f;}

#blokStichting {background-color:#3a6458;}





/*subpaginaspecifiek*/

.container {
	width: 100%;
	display: flex;
}

.scrollButton {
	display: inline-block;
	z-index: 9999;
	font-size: 190%;
	width: 1.75em;
	height: 1.75em;
	border-radius: 50%;
	margin: 91% 42% 0% 47%;
	text-align: center;
	text-decoration: none;
    color: black;
	background-color: white;
	box-shadow: 0 0 3em 0.1em black;
}

@media only screen and (max-width: 1200px) {
	.scrollButton {
		margin-top: 115%;
	}
}


@media (orientation: portrait) {
	.scrollButton {
		display: none;
	}
}

.MainL {
	display: block;
	position: relative;
	background-color: #7d938b;
	width: 50%;
	height: calc(50vw * 1/1);
	aspect-ratio: 1/1;
	float: left;
	box-shadow: -5px 5px 50px #505050;
}

.mainR {
	display: block;
	position: relative;
	background-color: #52809f;
	width: 50%;
	height: calc(50vw * 1/1);
	aspect-ratio: 1/1;
	float: left;
	box-shadow: -5px 5px 50px #505050;
}

@media only screen and (max-width: 1200px) {
	.mainL {
		height: calc(50vw * 1.3/1);
	}
	.mainR {
		height: calc(50vw * 1.3/1);
	}
}

@media (orientation: portrait) {
	.mainL {
		height: calc(50vw * 1.3/1);
	}
	.mainR {
		height: calc(50vw * 1.3/1);
	}
}

.mainL img {
	display: inline-block;
	width: 100%;
	height: 100%;
	float: left;
	object-fit: cover;
}

.mainR img {
	display: inline-block;
	width: 100%;
	height: 100%;
	float: left;
	object-fit: cover;
}


.textContainer {
	margin: 0;
	margin-top: -12%;
	position: absolute;
	top:60%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding: 0 2.5em 0 2.5em;
	max-height: calc(50vw * 1/1);
	overflow: auto;
	scrollbar-width: none;
}

@media only screen and (max-width: 1200px) {
	.textContainer {
		max-height: calc(50vw * 1.23/1);
		margin-top: -12%;
		padding-top: 0;
		padding-bottom: 0;
	}
}

@media (orientation: portrait) {
	.textContainer {
		max-height: calc(50vw * 1.23/1);
		margin-top: -12%;
		padding-top: 0;
		padding-bottom: 0;
	}
}

.textContainer h1 {
	font-size: 170%;
	font-weight: lighter;
	text-shadow: 1px 1px 15px #505050;
	padding-bottom: 0.5em;
}

.textContainer h2{
	font-size: 150%;
	font-weight: lighter;
	text-shadow: 1px 1px 15px #505050;
}

.textContainer h2.buffer {
	text-align: center;
	margin-top: 1.5em;
	padding-bottom: 0.5em;
}

.textContainer p {
	line-height: 135%;
}


@media only screen and (min-width: 1600px) {
	.textContainer {
		font-size: 125%;
	}
}



.textContainer p:last-of-type {
	padding-bottom: 1em;
}

.textcontainer p.buffer {
	padding-top: 1em;
}

.textcontainer p.bufferB {
	padding-bottom: 1em;
}

.textContainer ul {
	padding: 1em 0 1em 1em;
}












#footer.main {
	position: absolute;
	display: block;
	bottom: -5em;
}

#footer.subFooter {
	position: sticky;
	display: inline-block;
	bottom: -10em;
}

#footer {
	background-color: #21323e;
	height: 10em;
	width: 100%;
	bottom: 0;
	text-align: center;
    font-family: "Helvetica", sans-serif;
    font-size: 80%;
}

#footer p {
	width: 32.5%;
	float: left;
	padding: 2em 0 2em 0;
}

#footer p:last-of-type {
	padding-right: 0px;
}

#footer p.socials {
	font-size: 150%;
}

#footer p.socials a img {
	object-fit: fill;
	display: inline-block;
	height: 2.2em;
	width: 2.2em;
	vertical-align: middle;
}

#footer p.contact {
    text-align:right;
    padding-right: 2%;
}

#footer a {
    text-decoration: none;
    color: white;
}

#footer a:link {
    text-decoration: none;
    color: white;
}