:root {
/* Kleurenpalet */
    --wit: #FFFCFC;
    --roze: #ffdfdf;
    --zwart: #3C4446;
    --grijs: #CDD5DA;
    --licht: rgba(0, 153, 153, .2);
    --donker: rgb(0, 128, 128);
    --shadow: 3px 3px 3px var(--roze); 
}
body {
    font-size: .8em;
    font-family: 'Poppins', sans-serif;
    background-color: var(--wit);
    color: var(--zwart);
}
.img {
    max-width: 100%;
}
h1 {
    font-family: 'Montserrat', sans-serif;
    color: var(--donker);
    font-size: 1.5em;
}
h2 {
    font-family: 'Montserrat', sans-serif;
    color: var(--donker);
}
h3 {
    font-family: 'Poppins', sans-serif;
    color: var(--donker);
}
/*Home-page*/
/* Header */
header {
    max-width: 100%;
    margin: 0;
    background-color: var(--donker);
}
/*logo*/
.logo {
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-decoration: none;
}
.logo h2 {
    color: var(--wit);
    text-align: center;
    padding: .5em;
    margin: 0;  
    font-size: 1.5em;
}
.logo strong {
        font-family: poppins;
        color: hotpink;
        font-weight: bolder;
        font-size: 1em;
    }
/*menu*/
nav ul {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
nav ul li {
    list-style-type: none;
    position: relative;
    top: .2em;
    flex: 1;
    text-align: center;
    margin: .5em auto 0;
}
nav ul li:hover {
    padding-block-end: 4em;
}
nav ul li a {
    padding: .5em;
    display: block;
    text-decoration: none;
    color: var(--wit);
    font-size: 1em;
}
nav ul li a:hover{
    background-color: var(--zwart);
    border-radius: 8px;
}
nav ul li:hover ul {
    display: flex;
    flex-direction: column; 
}
nav ul li a.current{
    color: hotpink;
    font-weight: bold;
}
.submenu ul {
    display: none;
    position: absolute;
    flex-direction: column;
    padding: 0;
    margin-block-start: .5em;
}
.submenu ul li {
    background-color: var(--donker);
    border-width: 1px 1px 0px 1px; 
    border-block-end: 1px dashed var(--roze);
    border-radius: 4px;
    width: 8em;
    padding: .3em;
    font-size: 1em;
    color: var(--wit);
    text-align: left;
    margin: auto;
}
/*.submenu ul li:last-of-type {
      border-width: 1px;
}*/
.submenu ul li a {
    text-decoration: none;
    margin: 0;
}
.submenu:hover ul {
    border-radius: 8px; 
}
.submenu ul li:hover{
    padding-block-end: 0;
    margin: 0;
}
/*.submenu ul li a:hover {
    background-color: var(--zwart);
    border-radius: 8px;
}*/
.submenu ul li a.current{
    color: hotpink;
}
.roze {
    width: 100%;
    height: .3em;
    background-color: var(--roze);
}
.fa-sort-down {
    color: var(--wit);
    float: right;
    margin: .5em .2em.1em;
}
/* Header-foto */
.heading {
    box-sizing: border-box;
    display:block;
    width: 100%;
    background-color: var(--roze);
}
.heading img {
    width: 100%;
    margin: 0 auto;
}
/* Pictogrammen */
.picto {
    display: grid;
    grid-column-gap: 1em;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 2em;
}
.picto > div {
    display: grid;
    grid-template-rows: 2fr;
    box-sizing: border-box;
    padding: 0;
    margin-block-end: 1em;
    text-align: center;
}
.picto > div > a > i {
    display: inline-block;
    padding: .5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    border-block-end: 2px solid var(--roze);
    color: var(--donker);
    font-size: 2em;
}
.picto > div > a {
    text-decoration: none;
    padding: 1.3em;
}
.picto > div > a > p {
    text-align: center;
    padding: 0;
    margin-block-end: 0;
    color: darkgray;
}
.picto > div > i:hover {
    border-block-end: 2px solid var(--donker);
}
.picto > div:hover {
    background-color: var(--roze); 
}
.zoom {
    display: block;
    box-sizing: border-box;
    margin: 0 1em;
}
#back > a {
    text-decoration: none;
    color: hotpink;   
}
#back {
    width: 15em;
    text-align:center;
    box-shadow: var(--shadow);
    margin: 3em 0;
    border-block-end: 1px solid var(--roze);
    padding: .5em;
}
/*index.html*/
.container {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    margin-block-end: 1em;
    padding: 0;
}
.content {
    margin-block-end: 1.5em;
    padding:0 2em;
    }
.content h2 {
    color: var(--donker);
    font-family: 'Montserrat', sans-serif;
}
.anchor {
    background-color:var(--roze);
    border: 0;
    border-radius: 8px;
    font-size: 1em;
    padding: .4em;
    text-align: center;
    width: 25%
}
.anchor a {
    color: var(--donker);
    text-decoration: none;
}
/*Fotogalerij*/
.galerij {
    box-sizing: border-box;
    padding: 0 2em 1em;
    margin-block-start: 0;
    border-block-start: 2px solid var(--grijs);
    border-block-start: 2px solid var(--grijs);
 
}
.galerij h2 {
    padding: .5em 0 0;
    color: var(--donker);
}
.galerij > .kleurverloop {
    margin-inline-left: 1.5em;
}
.media a img {
    width: 100%;
    height: auto;
}
.media img{
    width: 100%;
    height: auto;
    margin: 1.5em auto;
}
/*Gekleurde vlakken*/
.gekleurd-vlak {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    margin: 1em 0;
    background-color: var(--roze);
}
.gekleurd-vlak img{
    max-width: 90%;
    margin: 1em 1em 0;
}
.link {
    font-size: .8em;
    text-align: center;
    background-color: var(--wit);
    padding: .5em .4em;
    margin: .5em auto;
    width: 40%;
    border-radius: 8px;
    border: 1px solid var(--donker);
}
button {
    display: block;
    font-size:.8em;
    text-align: center;
    color: var(--donker);
    background-color: var(--wit);
    cursor: pointer;
    padding: .4em;
    margin: .5em auto;
    width:35%;
    border-radius: 8px;
    border: 1px solid var(--donker);
}
.kleur {
    grid-row: 1 / 2;
    margin: .5em 2em 1.5em;
}
.tekst {
    margin: 0 1em 1em;
}
.tekst h3 {
    text-align: center;
    color: var(--donker);
}
#icon {
    display:inline;
}
.tekst a {
    display: block;
    text-decoration: none;
    color: var(--donker);
}
.andersom {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    margin: 1em 0;
    background-color: var(--roze);
}
.andersom img {
    width: 90%;
    margin: 1em 1em 0;
}
/* Profiel*/
.persoonlijk {
    box-sizing: border-box;
    padding: 1em 1em 0;
    margin-block-end: 0;
}
.persoonlijk p:nth-last-child(1) {
    margin-block-end: 0;
}
.persoonlijk h2 {
    margin: .5em 0;
}
.kleurverloop {
    width: 50%;
    height: 3px;
    margin-top: 0;
    background: var(--roze);
}
.persoonlijk ul {
    text-align: start;
    padding-inline-start: 7em;
}
.persoonlijk .fa-ul{
    padding-inline-start: 3em;
}
.persoonlijk img {
    max-width: 100%;
    }
.som {
    box-sizing: border-box;
    width: 100%;
    padding: .5px 1em;
    margin: 1em 0 0;
    background-color: var(--roze);
}
.som h3{
    color: var(--donker);
    padding-block-end: 0;
    margin-block-end: 0;
}
.som a {
    margin-inline-start: 96%;
    margin-block-end: 1em;
    font-size: 1.5em;
    color: var(--zwart);
    text-decoration: none;
}
.som > ul > li{
    padding-block-end: .5em;
}
hr {
    border: 1px solid var(--roze);
    background-color: var(--roze);
}
.ingredienten {
    list-style-type: none;
}
.plus {
    padding-inline-start: 95%;
    margin-block-end: .3em;
    border-block-end: 1px solid var(--donker);
}
span {
    font-size: 1em;
    color: var(--donker);
}
.cv {
    width: 100%;
    border-top: 2px solid var(--donker);
    border-block-end: 2px solid var(--donker);
    margin: 0;
    background-color: var(--licht);
}
.profielfoto {
    width: 50%;
    height: 40%;
    margin: 2em auto;
}
.profielfoto img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    margin-block-start: .5em;
    box-shadow: var(--shadow);
}
.naw {
    margin-block-start: auto;
    margin-block-end: auto;
    margin-inline-end: .5em;
}
.naw ul li {
    color: var(--donker);
    padding-inline-start: 3em;
}
.naw i {
    padding-inline-end: 1em;
}
.naw h1 {
    margin-inline-start: 1.5em;
}
/* Cv-startpagina*/
.curriculum{
    display: block;
    background-color: var(--roze);
    padding: .2em 1em .5em;
}
.curriculum h1 {
    margin-inline-start: 1.2em;
}
.curriculum p {
    margin: 0 2em 1em; 
}
.curriculum .fa-ul li {
    margin-inline-start: 2em;
}
.curriculum .fa-ul li a {
    text-decoration: none;
    color: var(--zwart);
    padding: 1em;
}
.fa-check {
    padding-inline-end: .5em;
}
.download {
    position: relative;
    background-color: var(--licht);
    width: 100%;
    min-height: 25vh;
    padding: .5em;
    margin: 3em 0 2em;
}
.download h2 {
    text-align: center;
    padding-block-start: .5em;
    margin-block-start: 1em;
    margin-block-end: .5em;
}
.download p {
    text-align: center;
    margin-block-start: 0;
    margin-block-end: 0;
}
.download .center {
    position: absolute;
    background-color: var(--donker);
    width: auto;
    padding: .7em;
    margin: 0 auto;
    border: none;
    font-size: 1em;
}
.center a {
    text-decoration: none;
    color: var(--wit);
    font-weight:100;
    }
.center {
    margin: 0;
    position: absolute;
    top: 80%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/*Contact*/
#kaart {
    box-sizing: border-box;
    width: 100%;
    height: 40vh;
    margin-block-end: .5em;
}
.intro h1 {
    margin: .5em 0 0;
    padding-block-start: 1em;
    color: var(--donker);
}
.intro a {
    color: var(--donker);
    text-decoration: none;
}
.intro a:hover {
    font-weight: bold;
}
.gegevens {
    width: 80%;
    background-color: var(--roze);
    color: var(--zwart);
    padding: .5em 3em;
    margin: 2em auto;
}
.gegevens p {
    font-size: 1.1em;
}
.info {
    margin: 0;
    padding-inline-end: 0;
    padding-block-end: .5em;
}
.info a {
    color: var(--zwart);
    font-size: 1.1em;
}
.info a:hover{
    color: var(--donker);
}
small > a {
    color: var(--donker);
    text-decoration: none;
    margin-block-end: .5em;
    
}

/* Formulier*/
form {
    margin-block-start: 1em;
}
input[type=text], [type=tel], [type=email], textarea{
    width: 100%;
    padding: 12px;
    border: 2px solid var(--donker);
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
    background-color: var(--licht);
}
label {
    padding: 12px 12px 12px 0;
    display: inline-block;
    font-family: 'Actor';
    font-size: 1.3em;
    color: var(--zwart);
}
/* submit button */
input[type=submit] {
    background-color: var(--donker);
    color: var(--wit);
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding: 5px;
    margin: 1em auto 0;
    border: 2px solid var(--donker);
    border-radius: 4px;
    cursor: pointer;
    float: right;
}
/*placeholdertext*/
::placeholder{
    color: var(--zwart);
    font-style: oblique;
}
/* Formulier container */
.formulier {
  border-radius: 5px;
  background-color: var(--wit);
  padding: 20px;
}
.formulier h2 {
    color: var(--donker);
    padding-block-end: .6em;
    margin: 0;
}
/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-block-start: 6px;
}
/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-block-start: 6px;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.formulier p {
    font-family: 'Actor', sans-serif;
    font-size: 1em;
    color: var(--donker);
}
/*vaardigheden*/
.grafiek {
    margin: 0 2em;
    border-block-end: 2px solid var(--grijs);
}
.hard-skills {
    width: 100%;
    padding: 0 1em .5em;
    margin-block-end: .5em;    
}
.hard-skills h2 {
    color: var(--donker);
    grid-column: 1 / 3;
    margin-block-start: 0;
    margin-block-end: .3em;
}
.hard-skills ul {
    list-style-type: none;
    padding-inline-start: 0;
}
.hard-skills li{
    padding: .2em;
}
.ster {
    color: var(--donker);
}
.hard-skills > .kleurverloop {
    grid-column: 1 / 3;
    width: 9em;
    margin-block-end: .5em;
}
.hard-skills > .anchor{
    width: 6em;
    margin-block-start: 1em;
}
.skills {
    width: 100%;
    padding: 0 1em .5em;
    margin-block-end: .5em;    
}
.skills h2 {
    color: var(--donker);
    margin-block-start: 0;
    margin-block-end: .3em;
}
.skills .fa-ul {
    margin: 1em 0 0;
    padding: 0 0 1em 1.5em;
    color: var(--zwart);
}
.skills > .anchor {
    width: 6em;
}
.soft {
    margin: 2em;
}
.soft h1 {
    color: var(--donker);
}
.soft h2 {
    font-size: 1.2em;
    color: var(--donker);
    margin-block-end: 0;
}
.soft p::first-letter {
    color: pink;
    font-size: 1.2em;
}
.trefwoord {
    box-sizing: border-box;
    width: 80%;
    margin: 2em auto;
}
.trefwoord > img {
    box-sizing: border-box;
    max-width: 100%;
}
/*werkervaring*/
.pijl {
    margin: 4em 2em 2.5em;
}
table {
    box-sizing: border-box;
    margin: 1em .5em;
    border-collapse: collapse;
    width: 100%;
}
td {
    width: 100%;
}
th {
    font-weight: bold;
    border-block-end: 2px solid var(--roze);
    width: 100%;
    text-align: start;
}
.uitleg {
    padding-inline-start: 1.5em;
    padding-inline-end: .5em;
}
blockquote {
    box-sizing: border-box;
    background-color: var(--licht);
    margin: .5em 2em;
    padding: 1em 1em .5em;
    font-size: 1.2em;
}
cite {
    padding-inline-start: 6em;
}
/*Opleidingen*/
thead {
    margin-block-start: 1em;
}
.diploma {
    padding: .5em 1.5em;
    color: var(--donker);
}
.uitleg {
    padding-block-end: 1em;
}
.uitleg ul {
    padding-block-end: 0;
    margin: 0 0 .5em;
}
.uitleg ul li {
    list-style-type: disc;
}
.onder {
    color: var(--donker);
    font-style:italic;
}
/* Projecten*/
.layout {
    border-block-start: 2px solid var(--grijs);
}
.project {
        width: 80%;
        padding: 1em;
        position: relative;
        right: 1em;
        margin: 1em;
}
.project img { 
        width: 100%;
}
.slider {
    position: absolute;
    top: 1em;
    left: 6em;
    width: 70%;
    height: 80%;
    padding:1.5em;
    background-color: var(--roze);
    transition: all .5s ease;
    margin: 1em 0 2em;
}
.slider a {
    text-decoration: none;
    color: var(--zwart);
}
.slider h3 {
    font-size: 1em;
    color: rgba(0, 153, 153,.8);
    padding-block-end: .5em;
    margin: 0;
}
.streep {
    width: 50%;
    height: 3px;
    margin: 0 0 1em;
    background: var(--wit);
}
.slider p{
    font-size: .9em;
    color: var(--zwart);
}
.slider ul {
    margin-inline-start: 2em;
}
.slider ul li {
    color: var(--zwart);
    font-size: .9em;
}
.slider ul li a {
    text-decoration: none;
    color: var(--zwart);
}
.slider ul li i {
    padding-inline-end: .3em;
}
strong {
    color: rgba(0, 153, 153,.8);
}
/*Footer*/
.wrapper {
    box-sizing: content-box;
    display: grid;
    width: 100%;
    margin-block-start: 0;
}
footer {
    box-sizing: border-box;
    background-color: var(--donker);
    display: grid;
    grid-template-columns: 1.3fr 2fr 1fr;
    padding: 1em 1.5em .5em;
}
footer h2 {
    color: var(--grijs);
    font-size: 1.2em;
    font-weight:900;
    margin: 0 0 .5em;
}
footer ul {
    margin:0 0 1em;
    padding-inline-start: 0em;
}
footer ul li {
    list-style-type: none;
    color: var(--wit);
    padding: 0;
    margin: 0;
}
footer ul li a {
    text-decoration: none;
    color: var(--wit);
}
.volg ul li a i{
    margin: 0 75%;
}
.bold {
    font-weight: bold;
    color: var(--wit);
    font-size: 1em;
}
.copyright {
    grid-column:1 / 4;
    color: var(--wit);
    text-align: center;
    text-shadow: 0px 1px .5px rgb(165, 165, 165);
    border-block-start: solid 2px var(--roze);
    padding-block-start: .5em;
    padding-block-end: 0;
}
/* Formulier Responsive */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-block-start: 0;
  }
}
/*Mediaquery 768px*/
@media screen and (min-width: 768px) and (max-width: 1439px) {
    body {
        font-size: 1em;
    }
    header {
        width: 100%;
        height: 4em;
        display: grid;
        grid-template-columns: 35% 65%;
    }
    .logo {
        width: 100%;
        height: 4em;
    }
    .logo h2 {
        margin: 1em;
        font-size: 1em;
    }
    nav {
        grid-column: 2 / 3;
        padding-block-start: 0;
        margin-inline-end: 1em;
    }
    nav ul li {
        width: 3em;
        font-size: 1.2em;
    }
    .submenu ul li{
        width: 8em;
    }
    .submenu ul li a {
        width: 8em;
    }
    .picto {
        width: 75%;
        margin: 0 auto 1em;
    }
    .anchor { 
        width: 35%;
    }
    .zoom {
        width: 85%;
        margin: 0 auto;
    }
    .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .galerij h2{
        padding: .2em 0;
    }
    .media {
        box-sizing: border-box;
        margin: 0 auto;
    }
    .media a img{
        width: 32%;
    }
    .media .video {
        display: inline-block;
        width: 49%;
    }
    .gekleurd-vlak {
        display: grid;
        box-sizing: border-box;
        grid-row-gap: 1em;
        grid-template-columns: repeat(2, 1fr);
    }
    .gekleurd-vlak a {
        display: inline-grid;
        width: 100%;
    }
    .gekleurd-vlak a img {
        width: 85%;
        padding: .5em;
        margin: auto;
        grid-column: 1 / 2;
    }
    .gekleurd-vlak .tekst{
        grid-column: 2 / 3;
        margin-inline-start: 0;
    }
    .tekst h3 {
        text-align: start;
        padding: 0;
        margin: .2em 0;
    }
    .link {
        width: 45%;
        margin-inline-start: 0;
    }
    button {
        width: 45%;
        margin-inline-start: 0;
    }
    .andersom {
        display: grid;
        grid-gap: 1em;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
    }
    .andersom .tekst {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .andersom a {
        display: inline-grid;
        width: 100%;
    }
    .andersom a img {
        width: 85%;
        padding: .5em;
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        margin: auto;
    }
    .heading img {
        display: block;
        width: 100%;
        max-height: none;
        margin: 0 auto;
    }
    .tekst{
        margin: 1em;
        padding: 1.5em;
        text-align: start;
}
    .persoonlijk {
        box-sizing: border-box;
        width: 80%;
        min-height: 90%;
        padding: 2em;
        margin-inline-end: auto;
        margin-inline-start: auto;
        margin-block-end: 0;
}
    .som {
        width: 75%;
        margin: 2em auto;
    }
    .curriculum .fa-ul li {
        margin-inline-start: 4em;
    }
    .download h2 {
        padding-block-start: .5em;
        font-size: 2em;
    }
    .download p {
        padding-block-start: .5em;
        font-size: 1.4em;
    }
    .download .center {
        font-size: 1.5em;
    }
    .cv {
        width: 100%;
        display: grid;
        grid-template-columns: 10% 25% 55% 10%;
        grid-gap: 2em;
        margin: 0 auto;
    }
    .profielfoto {
        grid-column: 2 / 3;
        width: 100%;
        height: auto;
    }
    .profielfoto img {
        margin: 1em;
    }
    .naw {
        grid-column: 3 / 4;
    }    
    .info {
        margin-inline-end: auto;
        margin-inline-start: auto;
        padding: 0 0 .5em 1em;
        
    }
   /*vaardigheden*/
    .grafiek {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        box-sizing: border-box;
        max-width: 100%;
        margin: 0 2em;
        }
    .hard-skills .anchor{
        margin-block-start: 4em;    
    }
    .hard-skills ul {
        font-size: 1em;
    }
    .skills > .fa-ul {
        font-size: 1em;
    }
    .hard-skills .anchor {
        margin-block-start: auto;
        margin-block-end: .5em;
    }
    .skills .anchor {
        margin-block-start: auto;
        margin-block-end: .5em;
    }
    /*Projecten*/
    .layout {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 3em;
        box-sizing: border-box;
        margin: 0;
    }
    .project {
        width: 100%;
        position: relative;
        right: 2.5em;
        margin-inline-end: 1em;
}
    .project img { 
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0;
}
    .slider {
        position: absolute;
        left: 2.5em;
        width: 80%;
        height: 90%;
        padding: 1.5em;
        margin: 0;
}
    .slider a {
        text-decoration: none;
        color: var(--zwart);
    }
    .slider h3 {
        font-size: 1.2em;
        margin: 0;
    }
    .slider p{
        font-size: 1em;
    }
    .slider > p >i {
        padding-inline-end: .2em;
    }
    cite {
    padding-inline-start: 18em;
}
    /*contact*/
    .gegevens {
        box-sizing: border-box;
        width: 90%;
        margin: 1em auto;
    }
}
/*Mediaquery 1440px*/
@media screen and (min-width: 1440px) {
    body {
        font-size: 1.2em; 
    }  
    header {
        width: 100%;
        height: 4em;
        display: grid;
        grid-template-columns: 35% 65%;
    }
    .logo {
        width: 100%;
        height: 3.8em;
    }
    .logo h2 {
        margin: .7em;
        font-size: 1.3em;
    }
    .logo strong {
        font-family: poppins;
        color: hotpink;
        font-weight: bolder;
        font-size: 1em;
    }
    nav {
        grid-column: 2 / 3;
        padding-block-start: 0;
        margin-inline-end: 1em;
    }
    nav ul li {
        width: 3em;
        font-size: 1.2em;
    }
    .submenu ul li{
        width: 8em;
    }
    .picto {
        width: 70%;
        margin: 1em auto 1.5em;
    }
    .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 0 4em;
    }
    .galerij {
        padding: 0 0 .5em;
        margin: 0 4em;
    }
    .galerij h2 {
        text-align: start;
        padding: .5em 0 0;
    }
    .media {
        display: flex;
        flex-direction: row;
    }
    .media a {
        width: 19%;
        margin: .5%;
    }
    .media img {
        width: 100%;
    }
    .kleur {
        box-sizing: border-box;
        display: grid;
        grid-column-gap:.5em;
        grid-template-columns: repeat(3, 1fr);
        padding: 0;
        margin-inline-end: 4em;
        margin-inline-start: 4em; 
    }
    .tekst {
        text-align: left;
        padding: 0 1.5em;
    }
    .tekst h3 {
        text-align: start;
    }
    .link {
        width: 45%;
    }
    footer {
        padding: 1em 2em .5em;
    }
/* profiel*/
    .heading img {
        display: block;
        width: 100%;
        max-height: none;
        margin: 0 auto;
    }
    .persoonlijk {
        box-sizing: border-box;
        width: 80%;
        min-height: 90%;
        padding: 2em;
        margin-inline-end: auto;
        margin-inline-start: auto;
        margin-block-end: 0;
}
    .som {
        width: 75%;
        margin: 2em auto;
    }
    .cv {
        width: 100%;
        display: grid;
        grid-template-columns: 10% 25% 55% 10%;
        grid-gap: 2em;
        margin: 0 auto;
    }
    .profielfoto {
        grid-column: 2 / 3;
        width: 100%;
        height: auto;
        margin: 1em;
    }
    .profielfoto img {
        width: 75%;
        margin: 1em;
    }
    .naw {
        grid-column: 3 / 4;
    } 
/*vaardigheden*/
    .grafiek {
        box-sizing: border-box;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 0 auto;
        }
    .hard-skills{
        width: 100%;
        margin:1em auto;
    }
    .hard-skills h2 {
        color: var(--donker);
        margin-block-start: 0;
        margin-block-end: .3em;
        font-size: 2em;
    }
    .hard-skills ul {
        margin-block-start: 1em;
        padding: 0 0 0 .5em;
        font-size: 1.3em;
    }
    .hard-skills .anchor {
        margin-block-start: .5em;
    }
    .skills {
        width: 100%;
        margin: 1em auto;   
        }    
    .skills h2 {
        color: var(--donker);
        margin-block-start: 0;
        margin-block-end: .3em;
        font-size: 2em;
    }
    .skills ul {
        margin-block-start: 1em;
        padding: 0 0 0 .5em;
        color: var(--donker);
        font-size: 1.3em;
    }
    .skills > ul> li {
        margin: .5em 2em 0;
    }
    .skills .anchor {
        margin-block-start: .5em;
    }
    .curriculum .fa-ul li {
        margin-inline-start: 4em;
    }
    .download h2 {
        font-size: 1.6em;
    }
    .download p {
        font-size: 1.4em;
    }
    .download .center {
        font-size: 1.2em;
    }
    cite {
        padding-inline-start: 32em;
    }

/*    projecten*/
    .layout {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 2em;
        box-sizing: border-box;
        margin: .5em;
    }
    .project {
        width: 80%;
        padding: 1em;
        position: relative;
        left: .5em;
        margin: 1em;
}
    .project img { 
        width: 100%;
}
    .slider {
        box-sizing: border-box;
        position: absolute;
        top: 2em;
        right:.5em;
        width: 100%;
        height: 100%;
        padding: 1.5em 1em;
}
    .slider h3 {
        font-size: 1.2em;
        margin: 0;
    }
    .slider p{
        font-size: 1.1em;
        margin: .5em;
    }
    .slider ul li {
        font-size: 1.1em;
    }
    .project:hover .slider {
        left: 15%;
    }
    .info {
        margin-inline-start: 2em;
    }
    #kaart {
        height: 50vh;
    }
    .zoom {
        width: 75%;
        margin: 0 auto;
    }
}