*                                   { 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                                  { font-family:"Abril Fatface",arial;font-weight:400;font-size:2em;text-align:center; }
h2                                  { color:#fff;background-color:#000;font-family:"Abril Fatface",arial;font-weight:400;text-align:center;font-size:1.5em;padding:10px;margin-bottom:20px; }
h3                                  { color:rgb(9,92,117);font-family:"Abril Fatface",arial;font-weight:400;text-align:center;font-size:1.5em;padding:10px;margin-bottom:20px; }
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#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 .paralax         { text-align:center;width:40%; }
section#klank .paralax img     { position:relative;width:70%;height:auto; }


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


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 .paralax     { width:100%; }
    section#klank .paralax img { width:50%;opacity:1 !important;top:0 !important;  }

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