@font-face {font-family: 'FontAwesomeRegular'; src: url(../webfonts/fa-regular-400.ttf) format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'FontAwesomeSolid'; src: url(../webfonts/fa-solid-900.ttf) format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'FontAwesomeBrands'; src: url(../webfonts/fa-brands-400.ttf) format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Lato'; src: url(../webfonts/Lato-Regular.ttf) format('truetype'); font-weight: normal; font-style: normal;}

@font-face {font-family: 'Averta-Light'; src: url(../webfonts/AvertaStd-Light.otf) format('opentype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Averta-Regular'; src: url(../webfonts/AvertaStd-Regular.otf) format('opentype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Averta-Bold'; src: url(../webfonts/AvertaStd-Bold.otf) format('opentype'); font-weight: normal; font-style: normal;}

/* all pages basis */
html {scroll-behavior: smooth;}
html, body {height: 100%;}
:root {
    --color-wit:#fff;
    --color-zwart:#000;
    --color-tekst:#000;
    --color-ons-blauw:#004563;

    --color-ons-groen-a: #13a538;
    --color-ons-groen-b: #88bd24;
    --color-ons-groen-c: #aeca0d; 
    --color-ons-blauw-a: #009fe3;
    --color-ons-blauw-b: #000407;

    --color-basis: #aaa;
    --color-accent: #333; 
    --color-accent-hover: #000;
    --color-accent-rgb:201,115,138;

    --color-wepbutton: #dd4385;
    --font-size: 20px;
    --font-family-light: "Averta-Light", sans-serif;
    --font-family-regular: "Averta-Regular", sans-serif;  
    --font-family-bold: "Averta-Bold", sans-serif;

    --gap-inner-default: 40px;

    --max-outerWrapper: 100%;
    --max-innerWrapper: 1200px;
} 

body {font-family: var(--font-family-light), sans-serif; font-size: var(--font-size); font-style: normal; color: var(--color-tekst); line-height: 1.5em; overflow: hidden; overflow-y: scroll; margin: 0; padding: 0; background: var(--bg-basis) }

.outerwrapper {max-width: var(--max-outerWrapper); margin: 0 auto; overflow: hidden; }
.innerwrapper {max-width: var(--max-innerWrapper);  margin: 0 auto; padding: 0 20px; }
header .innerwrapper {max-width:100%;}
footer .innerwrapper {max-width:100%;}

* {box-sizing: border-box; margin: 0; padding: 0;}
a, .icon {outline: 0;}

.fa-solid {font-family: 'FontAwesomeSolid';}

/* header */
header {position: relative; display: block; width: 100%; height: 120px;}
.logoContainer {position: absolute; z-index: 3; width: 100%; margin-left: 20px; }
.logo {position: absolute; z-index: 2; padding: 20px 20px 20px 0px; left: 15px; background: white; border-radius: 30px;}
.logo img {width: 100%; height: 100%; object-fit: contain;}
.logoTekst {position: absolute; z-index: 2; left: 405px; top: 60px; font-family: var(--font-family-bold); color: var(--color-ons-blauw); font-size: 1.5em;}
.circleContainer{position: absolute; z-index: 2; width: 100%; margin-left: 5px; }
.circle {position: absolute; z-index: 1; display: block; top: 20px; left: 0px; width: 190px; height: 190px; border-radius: 50%; background: white}
.circleLine {position: absolute; z-index: 1; display: block;  border-radius: 50%; border: solid 1px var(--color-wit); background: transparent}
.circleLine.nr2 { top: 20px; left: -30px; width: 240px; height: 240px; border-radius: 50%; }
.circleLine.nr3 { top: -30px; left: -80px; width: 340px; height: 340px; border-radius: 50%; }
.circleLine.nr4 { top: -80px; left: -130px; width: 440px; height: 440px; border-radius: 50%; }
.circleLine.nr5 { top: -130px; left: -180px; width: 540px; height: 540px; border-radius: 50%; }
.circleLine.nr6 { top: -180px; left: -230px; width: 640px; height: 640px; border-radius: 50%; }
.circleLine.nr7 { top: -230px; left: -280px; width: 740px; height: 740px; border-radius: 50%; }
.circleLine.nr8 { top: -280px; left: -330px; width: 840px; height: 840px; border-radius: 50%; }
.circleLine.nr9 { top: -330px; left: -380px; width: 940px; height: 940px; border-radius: 50%; }
.circleLine.nr10 { top: -380px; left: -430px; width: 1040px; height: 1040px; border-radius: 50%; }
.circleLine.nr11 { top: -430px; left: -480px; width: 1140px; height: 1140px; border-radius: 50%; }
.circleLine.nr12 { top: -480px; left: -530px; width: 1240px; height: 1240px; border-radius: 50%; }

.onsjemeer {position:absolute; z-index: 3; right: 50px; top: 0; width: 25vw; max-width: 524px; }
.onsjemeer img {width: 100%; height: 100%; }

section:not(:first-of-type) {position: relative; z-index: 4;}

/* menu */
.mobiel {display: none;}
.menu {position: absolute; left: 432px; top:100px;  width: calc(100% - 432px); height: 60px; z-index: 2; padding: 0 10px; display: flex; align-content: flex-start; background: linear-gradient(to right, var(--color-ons-groen-a), var(--color-ons-groen-b));} 
.menu ul {display: flex; align-self: center; list-style: none; }
.menu ul li {margin: 0 5px; }
.menu li a {font-family: var(--font-family-bold); font-size: 1em; position: relative; font-weight: normal; text-decoration: none; color: var(--color-wit); padding: 0px 5px 2px 5px; white-space: nowrap;}
.menu li a:hover {color: var(--color-ons-blauw)}
.menu li.current a {color:var(--color-ons-blauw); }

.hero {position: relative; z-index: 1; width: 100%; aspect-ratio: 3.5 / 1; min-height: 320px; }
.hero img {width: 100%; height: 100%; object-fit: cover;}
.hero .tekst {position: absolute; z-index: 3; right: 100px; bottom: 50px; font-family: var(--font-family-bold); color: var(--color-wit); font-size: 2em; line-height: 1.5em; text-align: right; }



/* TEKST */
.txt h1 { font-family: var(--font-family-bold);  font-size: calc(var(--font-size) * 2.4); font-weight: normal; line-height: 1.2em; margin: 20px 0; }
.txt h2 { font-family:  var(--font-family-bold);  font-size: calc(var(--font-size) * 1.6); font-weight: normal; line-height: 1em; margin-bottom: 1em; }
.txt h3 {  font-family:  var(--font-family-bold);     position: relative; z-index: 12; color: var(--color-basis); font-size:calc(var(--font-size) * 1); font-weight: normal; letter-spacing: -1px; line-height: 1em; margin: 0px 0 15px 0; padding: 0; width: 100%; }
.txt p { width: 100%; margin-bottom: 0.5em; }
.txt p strong {  font-family:  var(--font-family-bold);  }
.txt td { font-size: 1em; line-height: 1.5em; }
.txt p img { width: 100%; max-width: 100%; height: auto !important; max-height: 50vh; padding: 0; object-fit: contain; }
.tekst p img { width: 100%; max-width: 100%; height: auto !important; max-height: 50vh; padding: 0; object-fit: contain; }
.tekst strong {font-family: "Montserrat-Bold";}
.txt td img { padding: 0; }
.txt a { position: relative; text-decoration:underline; z-index: 3; color: var(--color-accent);  }
.txt a:hover { color: var(--color-tekst); text-decoration:none; }
.txt a > img {width: 200px; aspect-ratio: 1 / 1; object-fit: contain;}

.txt ul { margin: 0; padding: 0 0 1em 0; list-style:none; }
.txt ol { margin: 0; padding: 0; }
.txt ol li { padding: 0; }
.txt i.fa-regular, .txt i.fa-solid, .txt i.fa-brands { display: inline-block; color: var(--color-basis); font-size: 1.5em; }
.txt iframe { width: 100%; aspect-ratio: 3.6 / 2; }
.txt hr { color: transparent; border-top: 5px dotted var(--color-ons-groen-b); margin: 20px 0; }
a.wepButton { position: relative; z-index: 2; text-decoration: none; color: var(--color-wit); background: var(--color-accent); font-size: 1em; font-weight:400; text-transform: none; text-decoration: none; padding: 15px 60px 15px 40px; border-radius: var(--border-radius-small); transition: 0.5s; border: solid 0px var(--color-accent); white-space: nowrap; cursor: pointer; }
a.wepButton:after { position: absolute; content: '\f061'; font-family:'FontAwesomeSolid'; font-size: 15px; top: 15px; padding-left: 10px; color: var(--color-wit); }
a.wepButton:hover { color: var(--color-wit); background: var(--color-basis-licht); border: solid 0px var(--color-basis); transition: 0.5s; text-decoration: none; }
a.wepButton:hover:after { transition: 0.5s; padding-left: 20px; }

/* OPTIES */
/* optie 1 tekst + afbeelding */
.tekstAfbeelding { display: flex; flex-direction: var(--flex-direction-default); gap: var(--gap-inner-default); width: 100%; margin: 0 auto; padding: 0 20px; }
.tekstAfbeelding .tekst { width: var(--default-width-kolom); vertical-align: top; padding:  var(--padding-wide-default); background: var(--color-wit);  }
.tekstAfbeelding .tekst .txt { text-align: left; font-size: 0.7em; line-height: 1.4em }
.tekstAfbeelding .tekst .txt h2 { font-size: calc(var(--font-size) * 1.3);} 
.BodyWorkshops .tekstAfbeelding .tekst .txt p em {font-size: 0.7em; font-style: normal;}
.tekstAfbeelding .afbeelding { z-index: 1; position: relative; width: calc(50% - 10px); padding: 0;  }
.tekstAfbeelding .afbeelding img { position: relative; z-index: 2; width: 100%; height: auto; max-height: 1000px; object-fit:cover; object-position: center center; margin: auto; padding: 0; }
/* optie 2 afbeelding + tekst */
.afbeeldingTekst { display: flex; flex-direction: var(--flex-direction-reverse); gap: var(--gap-inner-default); width: 100%; margin: 0 auto; padding: 0 20px; }
.afbeeldingTekst .tekst { width: var(--default-width-kolom); vertical-align: top; padding: var(--padding-wide-default); background: var(--color-wit) }
.afbeeldingTekst .tekst .txt { text-align: left; font-size: 0.7em; line-height: 1.4em }
.afbeeldingTekst .afbeelding { display: flex; justify-items: center; position: relative; width: calc(50% - 10px); background: var(--color-wit); }
.afbeeldingTekst .afbeelding img { position: relative; z-index: 2; width: 75%; height: auto; margin: auto auto 0 auto; padding: 0; }
/* optie 3 alleen tekst */
.tekstOnly { width:100%; margin: 20px 0; }
.tekstOnly .tekst { display: flex; justify-items: center; align-items: flex-start; padding: 0;  margin: 0 auto; }
.tekstOnly .afbeelding { display: none; }
.tekstOnly .tekst .txt { text-align: center; width: 100%; }
/* optie 4 alleen afbeelding */
.afbeeldingOnly { position: relative; z-index: 1; }
.afbeeldingOnly .tekst { display: none; }
.afbeeldingOnly .afbeelding { position: relative; z-index: 1; width: 100%; min-height: 400px; aspect-ratio: 3 / 1; overflow: hidden; }
.afbeeldingOnly .afbeelding img { width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0; padding: 0; }
.afbeeldingOnly .afbeelding:after { content:''; display: block; width: 40%; height: 100%; position: absolute; z-index: 2; top: 0; left: 60%; background: var(--color-basis); opacity: 0.5 }
/* optie 5 tekst + tekst twee afzonderlijke kolommen */
.tekstTekst { display: flex; flex-direction: var(--flex-direction-default); gap: var(--gap-inner-default); width: 100%; margin: 0 auto; padding: 0 20px; }
.tekstTekst .tekst { width: var(--default-width-kolom); vertical-align: top; padding: var(--padding-wide-default); background: var(--color-wit) }
.tekstTekst .tekst .txt { text-align: left; }
/* optie 6 [blokken] tekst +  tekst + tekst drie afzonderlijke kolommen */
.tekstTekstTekst { display: flex; flex-direction: row; gap: var(--gap-inner-default); flex-wrap: wrap; width: 100%;  max-width: 1200px; margin: 0 auto; padding: 0; }
.tekstTekstTekst .tekst { position: relative; z-index: 2; flex-grow: 1; width: 300px; vertical-align: top;background: var(--color-wit); border-radius: 20px;  z-index: 1;
    background:linear-gradient(to right, var(--color-ons-groen-a), var(--color-ons-groen-b)); border-radius: 20px; }

.tekstTekstTekst .tekst .txt { position: relative; z-index: 3; height: calc(100% - 20px); padding: 10px; margin: 10px; background: var(--color-wit); border-radius: 15px;} 
.tekstTekstTekst .tekst .txt h2 {  font-weight: normal; line-height: 1em; margin-bottom: 1em; font-size: calc(var(--font-size) * 1.3); color: var(--color-ons-groen-a); display: block; width: 100%;} 


footer { position: relative; width: 100%; min-height: 200px; margin-top: 100px; background: linear-gradient(to right, var(--color-ons-blauw-a), var(--color-ons-blauw-b)); border-bottom: solid 1px transparent;}
footer .logoContainer {position: absolute; top: -100px; }
footer .circleContainer {position: absolute; top: -100px; }
footer .txt {margin: 100px 0; color: var(--color-wit)}
footer .txt a {color: var(--color-wit); text-decoration: none;}
footer .txt a:hover {color: var(--color-ons-groen-c);}
.txt i.fa-regular, .txt i.fa-solid, .txt i.fa-brands {  color: var(--color-wit); }
.txt i.fa-regular:hover, .txt i.fa-solid:hover, .txt i.fa-brands:hover {  color: var(--color-ons-groen-c); }

@media screen and (max-width: 1300px){
    .onsjemeer { right: -20px; }
}
@media screen and (max-width: 1200px){
    .onsjemeer {display: none }
}
@media screen and (max-width: 900px){
    .logoContainer {margin-left: -5px;}
    .logo { width: 40vw; min-width: 250px; padding: 20px 20px 20px 15px; left: 0px; border-radius: 30px;}
    .logoTekst {position: relative; z-index: 2; left: 40vw; top: 80px; font-size: 1em;}
    footer .logoTekst {top: 40px}
    .circle {display: none; }
    .circleLine { margin: -50px auto auto -100px;  }
	/* menu mobiel */
	.menu {position: absolute; z-index: 120; top: -100vh; right: unset; left: 0; transition: all 600ms ease-in-out;}
	.menu.open {position: fixed; top: 0; left: 0px; transition: all 600ms ease-in-out; }
	.menu ul {overflow: hidden; position: absolute; left: 0; top: 0; z-index: 10000; text-decoration: none; list-style: none; width: 100vw; height: 100vh; 
		display: flex; flex-direction: column; justify-content: flex-start; margin: 0; padding: 20vw 20px; background:var(--color-ons-blauw); }
	.menu li a {position: relative; font-size: 6vw; line-height: 3em; text-decoration: none; padding: 0; font-weight: 400;}
    .menu li a:hover {color: var(--color-ons-blauw-a)}
    .menu li.current a {color:var(--color-ons-blauw-a); }

	.mobiel {display: block;position: absolute; z-index: 130; top: 0px; right: 0px; }
	.icon {display: block;position: absolute; z-index: 130; top: 0px; right: 0px;  border: 0; margin: 0; height: 90px; width: 70px; border-radius: 50%; cursor: pointer;}
	.icon span {display: block; height: 3px; width: 36px; position: absolute; left: 5px; -webkit-transition: -webkit-transform 0.3s; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
	.icon span:first-child {top: 32px;}
	.icon span:nth-child(2) {top: 42px;}
	.icon span:last-child {top: 52px;}
    	.icon--transparent {background-color: transparent;}
	.icon--transparent span {background-color: var(--color-ons-groen-b);}
    .icon--active {position: fixed;}
	.icon--active span:first-child {-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 37px; background-color: var(--color-wit);}
	.icon--active span:last-child {-webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; top: 37px; background-color: var(--color-wit);}
	.icon--active span:nth-child(2) {opacity: 0;}
	.icon--button {border-radius: 10px;}
	.icon--square {border-radius: 0;}
	.icon-transition {-webkit-transition: -webkit-transform 0.3s; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
}

@media screen and (max-width: 650px){
    :root {    --font-size: 16px;}
    header { height: 100px;}
    .logo {min-width: 180px; height: 75px; padding: 0 0 0 0px; left: 0px; border-radius: 30px;}
    .logoTekst {left: 11px; top: 75px;font-size: 3vw;}
    footer .logoTekst {top: 75px}
    .hero .tekst { right: 20px; bottom: 20px;  font-size: 1.5em; }
    .txt a > img {width: 28vw; aspect-ratio: 1 / 1; object-fit: contain;}
}