*                                   { margin:0px;padding:0px;outline:none;user-select:none;box-sizing:border-box; }
.onzichtbaar                        { position:fixed;left:-1px;top:-1px;width:0px;height:0px; }

body                                { font-family:"Open Sans",arial;min-height:100vh;font-size:18px; }
h1                                  {  color:rgb(9,92,117);font-family:"Abril Fatface",arial;font-weight:400;font-size:2em; }
h2                                  { color:rgb(9,92,117);font-family:"Abril Fatface",arial;font-weight:400;text-align:center;font-size:1.5em; }
h3                                  { color:rgb(9,92,117);font-family:"Abril Fatface",arial;font-weight:400;text-align:center;font-size:1.5em; }
p                                   { max-width:50%;margin-bottom:20px; }
img                                 { width:25%;height:auto;margin-bottom:20px; }
section                             { min-height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column; }

section#intro #mj                   { animation-name:groei_en_toon;animation-delay:250ms;animation-duration:500ms;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.76,1.86,.77,.86);position:relative;transform:scale(1,-1);clip-path:url(#mj_clipping_pad);-webkit-clip-path:url(#mj_clipping_pad);width:0%;padding-bottom:0%;background-color:#f9f9f9;transition:all linear 500ms; }
section#intro #mj .content          { position:absolute;left:0;top:0;width:100%;height:100%;background-size:cover;transform:scale(1,-1);overflow:hidden; }
section#intro #mj .waves            { animation-name:golven;animation-iteration-count:infinite;animation-delay:500ms;animation-duration:5s;animation-direction:alternate;animation-fill-mode:forwards;position:absolute;left:2200px;top:100%; }
section#intro #mj .waves .top       { animation-name:golfkleur;animation-iteration-count:infinite;animation-delay:500ms;animation-duration:5s;animation-direction:alternate;animation-fill-mode:forwards;width:3000px;height:200px;clip-path:url(#golven); }
.safari section#intro #mj .waves .top   { -webkit-clip-path:none; }

section#intro #mj .waves .bottom    { animation-name:golfkleur;animation-iteration-count:infinite;animation-delay:500ms;animation-duration:5s;animation-direction:alternate;animation-fill-mode:forwards;width:3000px;height:1810px;margin-top:-10px; }
section#intro .informatie           { display:none; }
@keyframes groei_en_toon            { from { filter:blur(100px);width:0%;padding-bottom:0%;background-color:#f5f5f5; } to { filter:blur(0px);width:30%;padding-bottom:30%;background-color:#e9e9e9; } }
@keyframes golven                   { from { left:-2200px;top:100%; } to { left:0px;top:calc(0% - 100px); } }
@keyframes golfkleur                { from { background-color: rgb(58,199,255); } to { background-color:rgb(9,92,117); } }
section#intro .scrollen                     { position:absolute;bottom:75px;left:calc(50% - 20px); }
section#intro .scrollen .pijl               { position:absolute;width:40px;height:10px;opacity:0;transform:scale(0.3);animation:scrollpijlen 2s ease-out infinite; }
section#intro .scrollen .pijl:first-child   { animation:scrollpijlen 2s ease-out 666ms infinite; }
section#intro .scrollen .pijl:nth-child(2)  { animation:scrollpijlen 2s ease-out 1333ms infinite; }
section#intro .scrollen .pijl:before,
section#intro .scrollen .pijl:after         { content:'';position:absolute;top:0;height:100%;width:50%;background:rgb(9,92,117); }
section#intro .scrollen .pijl:before        { left:0;transform:skewY(30deg); }
section#intro .scrollen .pijl:after         { right:0;width:50%;transform:skewY(-30deg); }
@keyframes scrollpijlen                     { 25%  {opacity:1; } 33.3% { opacity:1;transform:translateY(15px); } 66.6% { opacity:1;transform:translateY(30px); } 100% { opacity:0;transform:translateY(45px) scale(0.5); } }

section#hoofdtekst                  { background-color:rgb(9,92,117);color:#fff;min-height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:row; }
section#hoofdtekst .tekst           { width:40%;padding-right:10%; }
section#hoofdtekst .tekst p         { max-width:100%; }
section#hoofdtekst .tekst h1        { font-size:6em;margin-bottom:0.5em; }
section#hoofdtekst .paralax         { text-align:center;width:40%; }
section#hoofdtekst .paralax img     { position:relative;width:70%;height:auto; }


section#klank                       { position:relative;background-color:#222;color:#fff;min-height:100vh;flex-direction:row;overflow:hidden; }
section#klank .tekst                { width:50%;margin-left:40%; }
section#klank .tekst p              { max-width:100%; }
section#klank .tekst img            { width:50%;height:auto; }
section#klank .tekst h2             { text-align:left;font-size:4em;margin-bottom:0.25em;background-color:transparent;padding:0px; }
section#klank .video                { overflow:hidden;text-align:center;position:absolute;left:0px;bottom:0px;height:100%;width:50%; }
section#klank .video video          { height:100%;width:auto;bottom:0px; }


section#klankletter                 { position:relative;background-color:rgb(9,92,117);color:#fff;min-height:100vh;flex-direction:row-reverse;overflow:hidden; }
section#klankletter .tekst          { width:60%;margin-right:40%;padding-left:10%; }
section#klankletter .tekst p        { max-width:100%; }
section#klankletter .tekst h2       { text-align:left;font-size:4em;margin-bottom:0.25em;background-color:transparent;padding:0px; }
section#klankletter .afbeelding     { background:url("../images/MJtongklankruimte zw.jpg") center center no-repeat;background-size:cover;overflow:hidden;text-align:center;position:absolute;right:0px;bottom:0px;height:100%;width:30%; }

section#klankoefening               { position:relative;background-color:rgb(37, 37, 37);color:#fff;padding:100px 0px;flex-direction:column;overflow:hidden; }
section#klankoefening .tekst        { max-width:50%;text-align:center;margin:0px auot; }
section#klankoefening .tekst p      { max-width:100%; }
section#klankoefening .tekst a      { color:rgb(24, 135, 168) !important;text-decoration:underline; }
section#klankoefening .tekst a:hover  { color:rgb(9,92,117) !important;text-decoration:none; }
section#klankoefening .tekst h2     { text-align:center;font-size:4em;margin-bottom:0.25em;background-color:transparent;padding:0px; }

section#beleving                    { position:relative;background-color:#000;color:#fff;min-height:100vh;flex-direction:row-reverse;overflow:hidden; }
section#beleving .tekst             { width:60%;margin-left:40%;padding-right:10%; }
section#beleving .tekst p           { max-width:100%; }
section#beleving .tekst h2          { text-align:left;font-size:4em;margin-bottom:0.25em;background-color:transparent;padding:0px; }
section#beleving .afbeelding        { background:url("../images/kat_zw.png") center center no-repeat;background-size:cover;overflow:hidden;text-align:center;position:absolute;left:0px;bottom:0px;height:100%;width:30%; }


footer                              { min-height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column; }
footer h3                           { font-size:3.5em;color:rgb(9,92,117); }  
footer p                            { font-size:1.5em; }  
footer p a                          { color:rgb(24, 135, 168) !important;text-decoration:underline; }
footer p a:hover                    { color:rgb(9,92,117) !important;text-decoration:none; }



@media only screen and (max-width: 1150px) {
    body                            { font-size:14px; }
    p                               { max-width:75%;margin-bottom:15px; }

    footer h3                       { font-size:3.5em; }
    footer p                        { font-size:1.25em; }
}


@media only screen and (max-width: 1000px) {
    p                               { margin-bottom:10px; }
    img                             { width:50% !important;height:auto !important; }

    section#intro #mj               { transform:scale(2.25,-2.25); }

    section#hoofdtekst              { padding:25px;min-height:0vh;flex-direction:column; }
    section#hoofdtekst .tekst       { text-align:center;width:100%;padding-right:0%; }
    section#hoofdtekst .tekst p     { max-width:100%; }
    section#hoofdtekst .tekst h1    { text-align:center;font-size:3em; }
    section#hoofdtekst .paralax     { width:100%; }
    section#hoofdtekst .paralax img { width:50%;opacity:1 !important;top:0 !important;  }

    section#klank                   { min-height:0vh;flex-direction:column; }
    section#klank .tekst            { padding:25px;text-align:center;width:100%;margin:0px; }
    section#klank .tekst p          { max-width:100%; }
    section#klank .tekst h2         { text-align:center;font-size:3em; }
    section#klank .video            { position:static;width:100%; }
    section#klank .video video      { width:100%;height:auto;position:static; }

    section#klankletter             { min-height:0vh;flex-direction:column; }
    section#klankletter .tekst      { text-align:center;width:100%;padding:25px;margin:0px; }
    section#klankletter .tekst h2   { text-align:center;font-size:3em; }
    section#klankletter .afbeelding { position:static;width:100%;height:100vh; }

    section#klankoefening               { padding:25px; }
    section#klankoefening .tekst        { max-width:100%; }
    section#klankoefening .tekst p      { max-width:100%; }
    section#klankoefening .tekst h2     { font-size:3em; }

    section#beleving                { min-height:0vh;flex-direction:column; }
    section#beleving .tekst         { text-align:center;width:100%;padding:25px;margin:0px; }
    section#beleving .tekst h2      { text-align:center;font-size:3em; }
    section#beleving .afbeelding    { position:static;width:100%;height:100vh; }

    footer                          { text-align:center;min-height:0vh;padding:25px; }
    footer h3                       { font-size:2em; }
    footer p                        { font-size:1em; }
}