/*Tekst Opmaak*/
a {
  font-family: "Montserrat";
  text-decoration: none; /*Geen onderlijn*/
  color: white;
}

li {
  padding-bottom: 5px; /*Zorgt voor ruimte tussen list op de CV pagina*/
}

ul {
  list-style-type: square; /*Opsomming met vierkante blokjes*/
}

.broodtekst {
  margin: 0 auto; 
  padding-left: 7px; /*7 pixels ruimte vanuit links*/
  padding-bottom: 15px; /*Ruimte tussen tekst*/
  font-family: "Montserrat";
}

.subKop {
  font-family: "Montserrat-Bold";
  font-size: 50px; /*Grootte van tekst*/
  margin: 0 auto; /*Zorgt voor verticale, gecentreerde tekst*/
  color: #2e2e2e;
  padding-bottom: 20px;
}

.opsomtekst {
  margin: 0 auto; 
  font-size: 16px; /*Grootte van tekst*/
  padding-left: 7px; /*7 pixels ruimte vanuit links*/
  padding-bottom: 15px; /*Ruimte tussen tekst*/
  font-family: "Montserrat";
}

h1 {
  font-family: "Montserrat-Bold";
  font-size: 60px; /*Grootte van tekst*/
  margin: 0 auto; /*Zorgt voor verticale, gecentreerde tekst*/
  color: #2e2e2e;
}

h2 {
  font-family: 'Montserrat-Bold';
  font-size: 23px; /*Grootte van tekst*/
  margin: 0 auto; /*Zorgt voor verticale, gecentreerde tekst*/
  padding-left: 7px; /*7 pixels ruimte vanuit links*/
  color: #2e2e2e;
}

h3 {
  font-family: "Montserrat";
  font-style: italic; /*Italic betekend schuine tekst*/
  margin: 0 auto; /*Zorgt voor verticale, gecentreerde tekst*/
}

h5{
  font-family: "Montserrat";
  font-size: 105%; /*Grootte van tekst*/
  padding-left: 7px; /*7 pixels ruimte vanuit links*/
}

/*Navigatie Bar*/

.logo { 
width: 35px; /*Afmeting Logo*/
height: 35px; /*Afmeting Logo*/
padding-top: 12px; /*12 pixels ruimte vanuit boven*/
padding-left: 10px; /*10 pixels ruimte vanuit links*/

}

.topnav {
    max-width: 100%;
    overflow-y: scroll; /*Wat overloopt wordt weg gehaald*/
    background-color: #2e2e2e; /*Achtergrond kleur*/
    border-top-left-radius: 5px; /*Afronding van hoeken*/
    border-top-right-radius: 5px; /*Afronding van hoeken*/
    height: auto;
  }
  
  .topnav a {
    float: right; /*Houdt de Navigatie rechts van de pagina*/
    display: block; /*Geeft aan dat de navigatie in blokken moet staan*/
    color: #f2f2f2; /*Kleur van de tekst*/
    text-align: center; /*Tekst gecentreerd*/
    padding: 14px 16px; /*Geeft ruimte tussen woord en block*/
    text-decoration: none; /*Geen onderlijn*/
    font-size: 23px; /*Grootte van tekst*/
    transition: 0.3s; /*Zorgt voor een verloop van kleur als je hovert of eraf gaat*/
  }
  
  .topnav a:hover {
    background-color: #2e2e2e; /*Echte kleur*/
    background-color: #1b1b1b;; /*Hover kleur*/
    transition: 0.5s; /*Zorgt voor een verloop van kleur als je hovert of eraf gaat*/
  }
  
  .topnav a.active { 
    background-color:#ddd; /*Witte kleur als active pagina*/
    color: #2e2e2e; /*Teskt kleur*/
    font-family: "Montserrat-Bold"; /*Als je op die pagina bent is de tekst dikgedrukt*/
  }

  .topnav a.active:hover {
    background-color:#ececec; /*Kleur switch tijdens hover over actieve pagina*/
    color: #2e2e2e; /*Tekst kleur*/
    font-family: "Montserrat-Bold"; 
  }
  

/*Image SlideShow*/

.slide-wrapper {
    max-width: 100%; /*Afbeelding schaalt mee met de breedte van de site*/
}

.slider {
    display: flex; /*Laat afbeeldingen naast elkaar staan*/
    aspect-ratio: 16 / 9; /*Zet de afbeeldingen in een 16x9 kader*/
    overflow-x: auto; /*Overige van de foto wordt wegehaald*/
    scroll-snap-type: x mandatory; /*Als je scrolt schiet die vast op de volledige foto*/
    scroll-behavior: smooth; /*Soepel scrollen*/
    box-shadow: 0 1.5rem 3rem -0,75rem hsla(0, 0%, 0%, 0.25); /*Klein balkje onderin wat weergeeft bij welke foto je bent*/
    border-bottom-left-radius: 5px; /*Afronding hoeken*/
    border-bottom-right-radius: 5px; /*Afronding hoeken*/
    padding-bottom: 20px;
}

.slider img {
    flex: 1 0 100%; /*Laat 1 afbeelding per keer zien en niet alle 4*/
    scroll-snap-align: start; /*Laat je door de foto's scrollen*/
    object-fit: cover; /*Vult heel het kader*/
    opacity: 99%; /*Lichtdoorlatendheid*/
    transition: ease-in 1.5s; /*1,5 seconden om de opacity te verhogen als een animatie*/
}

.slider img:hover {
    scale: 100.5%; /*Schaalt de afbeelding iets groter*/
    transition: ease-in 1.5s; /*1,5 seconden om de opacity te verhogen als een animatie*/
    opacity: 100%; /*Lichtdoorlatendheid*/
}

/*Over Mij*/

.float-parent-element {
  display: grid; /*Verdeeld de sectie in een grid, op deze manier kan je een sectie makkelijk opdelen*/
  gap: 4px; /*Afstand tussen de 2 secties horzizontale as*/
}

.intro {
  width: 95%; /*Afstand tussen de 2 secties verticale as*/
  padding-left: 10px; /*10 pixels afstand vanaf links*/
}

.portret {
width: 100%; /*Afbeelding altijd 100% de breedte van de sectie waar die instaat*/
max-height: 100%; /*Maximale hoogte als de sectie waar die instaat*/
padding-top: 4px; /*4 pixels afstand vanaf boven*/
}

.portret infographic {
  width: 100%; /*Afbeelding altijd 100% de breedte van de sectie waar die instaat*/
  max-height: 100%; /*Maximale hoogte als de sectie waar die instaat*/
  height: 700px;
  padding-top: 4px; /*4 pixels afstand vanaf boven*/
  }

.projectlogo { /*Logo's die bij mijn portfolio horen*/
  scale: 55%; /*Logo verkleind door de schaal*/
  width: 100%; /*Afbeelding altijd 100% de breedte van de sectie waar die instaat*/
  max-height: 100%; /*Maximale hoogte als de sectie waar die instaat*/
}

.infographic { /*Logo's die bij mijn portfolio horen*/
  scale: 85%; /*Logo verkleind door de schaal*/
  width: 100%; /*Afbeelding altijd 100% de breedte van de sectie waar die instaat*/
  max-height: 50%; /*Maximale hoogte als de sectie waar die instaat*/
}

/*Mijn Werk*/

.card {
  overflow: hidden; /*Rest van de foto wordt weg gelaten*/
  opacity: 95%; /*Lichtdoorlatendheid*/
  transition: ease-in 0.5s; /*0,5 seconden om de opacity te verhogen als een animatie*/
}

.card:hover {
opacity: 100%; /*Lichtdoorlatendheid*/
transition: ease-in 0.5s; /*0,5 seconden om de opacity te verhogen als een animatie*/
scale: 99.8%; /*Kleine schaling naar beneden*/
overflow: hidden; /*Rest van de foto wordt weg gelaten*/
}

.cards {
  grid-column-gap: 4px; /*Ruimte tussen de cards*/
  overflow: hidden; /*Rest van de foto wordt weg gelaten*/
  display: grid; /*Zet de cards op een grid*/
  grid-template-columns: repeat(auto-fit, minmax(200px, 10fr));
}

.card img {
  width: 100%; /*Vult de card met de afbeelding*/
}

/*Footer*/

footer {
  background-color: #2e2e2e; /*Kleur van de footer*/
  display: grid; /*Zet de footer op een grid*/
  grid-template-columns: repeat(auto-fit, minmax(200px, 10fr));
  height: 200px; /*Hoogte van de footer*/
  width: 100%; /*Footer is altijd 100% breed aan de pagina*/
  border-bottom-left-radius: 5px; /*Afgeronde hoeken*/
  border-bottom-right-radius: 5px; /*Afgeronde hoeken*/
}

.kleineKop {
  font-family: "Montserrat-Bold";
}

.linksInfo {
  font-family: "Montserrat";
  color: white; /*Tekstkleur*/
  font-size: 110%; /*Grootte van tekst*/
  text-align: center; /*Zet tekst gecentreerd*/
  padding-top: 20px; /*Ruimte van de top*/
}

.rechtsInfo {
  font-family: "Montserrat";
  color: white; /*Tekstkleur*/
  font-size: 110%; /*Grootte van tekst*/
  text-align: center; /*Zet tekst gecentreerd*/
  padding-top: 20px; /*Ruimte van de top*/
}

a.rechtsInfo {
  text-decoration: none; /*Geen onderlijn zichtbaar*/
  color: #ddd; /*Tekstkleur*/
}

.rechtsInfo a:hover {
  color: #ddd; /*Tekstkleur*/
  transition: all ease 0.2s; /*0,2 seconden overgang als een animatie*/
  text-decoration: none; /*Geen onderlijn zichtbaar*/
}

.linksInfo a:hover {
  color: #ddd; /*Tekstkleur*/
  transition: all ease 0.2s; /*0,2 seconden overgang als een animatie*/
  text-decoration: none; /*Geen onderlijn zichtbaar*/
}

/*Contact Pagina*/

.headercta {
  width: 100%; /*Sectie is altijd 100% breed aan de pagina*/
  height: 300px; /*Hoogte van de sectie*/
  background-color: #2e2e2e; /*Achtergrondkleur*/
  display: grid; /*Zet de header op een grid*/
  grid-template-columns: repeat(auto-fit, minmax(800px, 10fr));
}


.cta {
  color: #ddd; /*Tekstkleur*/
  font-family: "Montserrat-Bold";
  padding-top: 50px; /*50 pixels ruimte van boven*/
  font-size: 80px; /*Grootte van de tekst*/
}

.calltoactionTekst {
  color: #716f71; /*Tekstkleur*/
  font-family: "Montserrat-Bold";
  font-size: 105%; /*Grootte van de tekst*/
  padding-top: 25px; /*25 pixels ruimte van boven*/
}

.contactOpnemen {
  color: #ddd; /*Tekstkleur*/
  font-family: "Montserrat";
  padding-top: 50px; /*50 pixels ruimte van boven*/
  font-size: 24px; /*Tekstkleur*/
}

/*Contact Formulier*/

.contact_us_2 * {
  font-family: "Montserrat";
}

.contact_us_2 .text-blk {
  margin : 0px;
  line-height: 25px;
}

.contact_us_2 .responsive-cell-block {
  min-height: 75px;
}

.contact_us_2 input:focus {
  outline-color: initial;
  outline-style: none;
  outline-width: initial;
}

.contact_us_2 .container-block {
  min-height: 75px;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  display: block;
}

.contact_us_2 .submit-btn:hover {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: #2e2e2e;
}

.contact_us_2 .responsive-container-block {
  min-height: 75px;
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 50px;
  margin-left: auto;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.contact_us_2 .responsive-container-block.big-container {
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 30px;
  position: relative;
  height: auto;
}

.contact_us_2 .responsive-container-block.container {
  position: static;
  min-height: 75px;
  flex-direction: column;
  z-index: 2;
  max-width: 700px;
  margin-top: 120px;
  margin-right: auto;
  margin-bottom: 50px;
  margin-left: auto;
}

.contact_us_2 .container-block.form-wrapper {
  background-color: white;
  max-width: 100%;
  text-align: center;
  padding-top: 50px;
  padding-right: 40px;
  padding-bottom: 50px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px 7px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}

.contact_us_2 .text-blk.contactus-head {
  font-size: 36px;
  line-height: 50px;
  font-weight: 900;
}

.contact_us_2 .text-blk.contactus-subhead {
  color: #9c9c9c;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 50px;
  margin-left: 0px;
}

.contact_us_2 .responsive-cell-block.wk-desk-6.wk-ipadp-6.wk-tab-12.wk-mobile-12 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 26px;
  margin-left: 0px;
  min-height: 50px;
}

.contact_us_2 .input {
  width: 96%;
  height: 50px;
  padding-top: 1px;
  padding-right: 15px;
  padding-bottom: 1px;
  padding-left: 15px;
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #eeeeee;
  border-right-color: #eeeeee;
  border-bottom-color: #eeeeee;
  border-left-color: #eeeeee;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  font-size: 16px;
  color: black;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.contact_us_2 .textinput {
  width: 98%;
  min-height: 150px;
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 15px;
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #eeeeee;
  border-right-color: #eeeeee;
  border-bottom-color: #eeeeee;
  border-left-color: #eeeeee;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  font-size: 16px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.contact_us_2 .submit-btn {
  width: 100%;
  background-color: #2e2e2e;
  height: 60px;
  font-size: 20px;
  font-weight: 700;
  color: white;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: outset;
  border-right-style: outset;
  border-bottom-style: outset;
  border-left-style: outset;
  border-top-color: #767676;
  border-right-color: #767676;
  border-bottom-color: #767676;
  border-left-color: #767676;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  cursor: pointer;
}

.contact_us_2 .form-box {
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}

.contact_us_2 .social-media-links {
  width: 250px;
  display: flex;
  justify-content: space-evenly;
  margin-top: 50px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}

.contact_us_2 .link-img {
  width: 30px;
  height: 30px;
}

.contact_us_2 .text-blk.input-title {
  text-align: left;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 10px;
  font-size: 14px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 5px;
  margin-left: 0px;
  color: #9c9c9c;
}

.contact_us_2 ::placeholder {
  color: #dadada;
}

.contact_us_2 .blueBG {
  position: absolute;
  width: 100%;
  left: 0px;
  top: 0px;
  height: 300px;
  background-color: #2e2e2e;
}

/*Media Query Contact Formulier*/

@media (max-width: 768px) {
  .contact_us_2 .submit-btn {
    width: 100%;
  }

  .contact_us_2 .input {
    width: 100%;
  }

  .contact_us_2 .textinput {
    width: 100%;
  }

  .contact_us_2 .container-block.form-wrapper {
    margin-top: 80px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .contact_us_2 .text-blk.input-title {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }

  .contact_us_2 .responsive-container-block.container {
    margin-top: 80px;
    margin-right: 0px;
    margin-bottom: 50px;
    margin-left: 0px;
  }

  .contact_us_2 .container-block.form-wrapper {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .contact_us_2 .text-blk.contactus-head {
    font-size: 30px;
    line-height: 40px;
  }
}

@media (max-width: 500px) {
  .contact_us_2 .container-block.form-wrapper {
    padding-top: 50px;
    padding-right: 15px;
    padding-bottom: 50px;
    padding-left: 15px;
  }

  .contact_us_2 .container-block.form-wrapper {
    margin-top: 60px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .contact_us_2 .responsive-cell-block.wk-ipadp-6.wk-tab-12.wk-mobile-12.wk-desk-6 {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: 0px;
  }

  .contact_us_2 .responsive-container-block {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 35px;
    margin-left: 0px;
  }

  .contact_us_2 .text-blk.input-title {
    font-size: 12px;
  }

  .contact_us_2 .responsive-container-block.container {
    margin-top: 50px;
    margin-right: 0px;
    margin-bottom: 50px;
    margin-left: 0px;
  }

  .contact_us_2 .container-block.form-wrapper {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .contact_us_2 .responsive-container-block.big-container {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
  }

  .contact_us_2 .text-blk.contactus-head {
    font-size: 26px;
    line-height: 34px;
  }

  .contact_us_2 .input {
    height: 45px;
  }
}

/*CV Pagina*/

img {
  width: 100%; /*Image heeft dezelfde breedte als de pagina*/
}

.cvSkills {
  display: grid; /*CV skills staan in een grid*/
  opacity: 98%; /*Lichtdoorlatendheid*/
  grid-column-gap: 30px; /*Afstand tussen cards*/
  grid-row-gap: 40px; /*Afstand tussen cards*/
  padding-bottom: 4px; /*4 pixels vanaf de onderkant omhoog*/
}


.cvTitel {
  font-family: "Montserrat-Bold";
  font-size: 80px; /*Grootte van de tekst*/
  padding-top: 20px; /*20 pixels ruimte van boven*/
  padding-bottom: 20px; /*20 pixels ruimte van onder*/
}

.skills {
  padding-top: 7px; /*4 pixels ruimte van boven*/
  margin-top: 7px;
  background-color: #2e2e2e; /*Kleur van cards*/
  opacity: 100%; /*Lichtdoorlatendheid*/
  width: 100%; /*Skill card heeft dezelfde breedte als de sectie dat die vult van cvSkills*/
  height: auto; /*Hoogte schaalt me als de tekst niet meer past*/
  max-height: auto; /*Hoogte schaalt me als de tekst niet meer past*/
  
}

.skillTitel{
  font-family: "Montserrat-Bold"; 
  color: white; /*Kleur van de tekst*/
  padding-left: 27px; /*27 pixels ruimte vanuit de linker rand*/
}

.opsomming {
  color: white; /*Kleur van de tekst*/
  font-family: "Montserrat";
  white-space: 4px; /*Regel afstand*/
}

/*Project Kleuren*/

.projectkleuren{ 
  display: grid; /*Zet de kleuren op een grid voor schalen*/
  grid-template-columns: repeat(auto-fit, minmax(200px, 10fr));
  width: 100%; /*Vult de sectie waar de kleuren instaan*/
  opacity: 98%; /*Lichtdoorlatendheid*/
  grid-column-gap: 4px; /*4 pixels ruimte tussen kleur vakken*/
}

.projectkleurensolo{ /*Als er maar 1 kleur is*/
  width: 100%;
  max-height: 100%;
  opacity: 98%;
}

.projectkleurensolo :hover{ /*Hover voor de ingezoomde kleur code*/
  opacity: 100%;
  font-size: 110%;
  transition: ease-in 0.5s;
}

.projectkleurenbr{ /*Als er 4 kleuren zijn*/
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 10fr));
  width: 100%;
  max-height: 100%;
  opacity: 98%;
  grid-column-gap: 4px;
}


.projectkleuren :hover{ /*Hover voor de ingezoomde kleur code*/
  opacity: 100%;
  font-size: 110%;
  transition: ease-in 0.5s;
}

.projectkleurenbr :hover{ /*Hover voor de ingezoomde kleur code*/
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 10fr));
  width: 100%;
  max-height: 100%;
  opacity: 98%;
  grid-column-gap: 4px;

}

.kleurcard1{ /*Kleurkaart Choco Kees*/
  background-color: #FBD6C0;
  width: 100%;
  height: 200px;
  transition: ease-in 0.5s;
}

.kleurcard2{ /*Kleurkaart Choco Kees*/
  background-color: #DD7545;
  width: 100%;
  height: 200px;
  transition: ease-in 0.5s;
}

.kleurcard3{ /*Kleurkaart Choco Kees*/
  background-color: #B5502A;
  width: 100%;
  height: 200px;
  transition: ease-in 0.5s;
  
}

.kleurcard1br{ /*Kleurkaart Bioresort*/
  background-color: #107a6b;
  width: 100%;
  height: 200px;
  transition: ease-in 0.5s;
}

.kleurcard2br{ /*Kleurkaart Bioresort*/
  background-color: #2fc17e;
  width: 100%;
  height: 200px;
  transition: ease-in 0.5s;
}

.kleurcard3br{ /*Kleurkaart Bioresort*/
  background-color: #ddeddd;
  width: 100%;
  height: 200px;
  transition: ease-in 0.5s;
}

.kleurcard4br{ /*Kleurkaart Bioresort*/
  background-color: #354547;
  width: 100%;
  height: 200px;
  transition: ease-in 0.5s;
}

.kleurcard1het{ /*Kleurkaart HET*/
  background-color: #e39d9f;
  width: 100%;
  height: 200px;
  transition: ease-in 0.5s;
}

.kleurcard2het{ /*Kleurkaart HET*/
  background-color: #4b414a;
  width: 100%;
  height: 200px;
  transition: ease-in 0.5s;
}

.kleurcard3het{ /*Kleurkaart HET*/
  background-color: #716f71;
  width: 100%;
  height: 200px;
  transition: ease-in 0.5s;
}

.kleurcard1fg{ /*Kleurkaart Osiris*/
  background-color: #CA9E67;
  width: 100%;
  height: 200px;
  transition: ease-in 0.5s;
}

.kleurcode{ /*Opmaak kleurcode*/
  font-family: "Montserrat-Bold";
  color: white;
  padding-left: 10px;
}

/*Showcase Werk*/

.werk { /*Al mijn werk op een grid*/
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 10fr));
  overflow: hidden;
  grid-column-gap: 4px;
  padding-bottom: 4px;
}

.werksolo img{ /*Voor solo werk zonder grid*/
  width: 100%;
  opacity: 95%;
  transition: ease-in 0.5s;
}

.werksolo img:hover{ 
  width: 100%;
  opacity: 100%;
  transition: ease-in 0.5s;
}

.werk img{ /*Afbeelding opmaak*/
  opacity: 95%;
  transition: ease-in 0.5s;
  width: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  grid-column-gap: 4px;
}

.werk img:hover { /*Afbeelding opmaak Hover*/
  opacity: 100%;
  transition: ease-in 0.5s;
  overflow-x: hidden;
  overflow-y: hidden;
}


/* Responsive */
@media (min-width: 290px) {
  .cards { grid-template-columns: repeat(1, 1fr); }
  .float-parent-element { grid-template-columns: repeat(1, 1fr); }
  .headercta { grid-template-columns: repeat(1, 1fr); }
  .projectkleuren { grid-template-columns: repeat(1, 1fr); }
  .projectkleurenbr { grid-template-columns: repeat(1, 1fr); }
  .werk { grid-template-columns: repeat(1, 1fr); }
  .cvSkills { grid-template-columns: repeat(1, 1fr); }
  .broodtekst {font-size: 200%;}
  .topnav a {font-size: 460%;}
  .logo {scale: 170%; padding-left: 20px; padding-top: 15px;}
  footer {font-size: 120%; height: auto; text-align: center; grid-template-columns: repeat(1, 1fr);}
  .headercta { grid-template-columns: repeat(1, 1fr); }
  .videoNieuwsbegrip {height: 600px; width:380px;}
}

@media (min-width: 300px) {
  .cards { grid-template-columns: repeat(1, 1fr); }
  .float-parent-element { grid-template-columns: repeat(1, 1fr); }
  .headercta { grid-template-columns: repeat(1, 1fr); }
  .projectkleuren { grid-template-columns: repeat(1, 1fr); }
  .projectkleurenbr { grid-template-columns: repeat(1, 1fr); }
  .werk { grid-template-columns: repeat(1, 1fr); }
  .cvSkills { grid-template-columns: repeat(1, 1fr); }
  .broodtekst {font-size: 200%;}
  .topnav a {font-size: 360%;}
  .logo {scale: 170%; padding-left: 20px; padding-top: 15px;}
  footer {font-size: 110%; height: auto; text-align: center; grid-template-columns: repeat(1, 1fr);}
  .headercta { grid-template-columns: repeat(1, 1fr); }
  .videoNieuwsbegrip {height: 400px; width:480px;}
}

@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(1, 1fr); }
  .float-parent-element { grid-template-columns: repeat(1, 1fr); }
  .headercta { grid-template-columns: repeat(2, 1fr); }
  .projectkleuren { grid-template-columns: repeat(1, 1fr); }
  .projectkleurenbr { grid-template-columns: repeat(1, 1fr); }
  .werk { grid-template-columns: repeat(1, 1fr); }
  .cvSkills { grid-template-columns: repeat(1, 1fr); }
  .broodtekst {font-size: 120%;}
  .topnav a {font-size: 230%;}
  .logo {scale: 150%; padding-left: 20px; padding-top: 15px;}
  footer {font-size: 110%; height: auto; text-align: center; grid-template-columns: repeat(1, 1fr);}
  .headercta { grid-template-columns: repeat(1, 1fr); }
  .videoNieuwsbegrip {height: 500px; width:580px;}
}

@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(1, 1fr); }
  .float-parent-element { grid-template-columns: repeat(1, 1fr); }
  .headercta { grid-template-columns: repeat(2, 1fr); }
  .projectkleuren { grid-template-columns: repeat(1, 1fr); }
  .projectkleurenbr { grid-template-columns: repeat(1, 1fr); }
  .werk { grid-template-columns: repeat(1, 1fr); }
  .cvSkills { grid-template-columns: repeat(1, 1fr); }
  .topnav a {font-size: 120%;}
  .logo {scale: 120%; padding-left: 20px; padding-top: 7px;}
  footer {font-size: 100%; height: auto; text-align: center; grid-template-columns: repeat(1, 1fr);}
  .headercta { grid-template-columns: repeat(1, 1fr); }
  .videoNieuwsbegrip {height: 600px; width:680px;}
}

@media (min-width: 1000px) {
  .float-parent-element { grid-template-columns: repeat(1, 1fr); }
  .headercta { grid-template-columns: repeat(2, 1fr); }
  .projectkleuren { grid-template-columns: repeat(3, 1fr); }
  .projectkleurenbr { grid-template-columns: repeat(2, 1fr); }
  .werk { grid-template-columns: repeat(1, 1fr); }
  .cvSkills { grid-template-columns: repeat(1, 1fr); }
  .topnav a {font-size: 125%;}
  .logo {scale: 120%; padding-left: 20px; padding-top: 7px;}
  footer {font-size: 100%; height: auto; text-align: center; grid-template-columns: repeat(1, 1fr);}
  .headercta { grid-template-columns: repeat(1, 1fr); }
  .videoNieuwsbegrip {height: 700px; width:980px;}
}

@media (min-width: 1200px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .float-parent-element { grid-template-columns: repeat(2, 1fr); }
  .headercta { grid-template-columns: repeat(2, 1fr); }
  .projectkleuren { grid-template-columns: repeat(3, 1fr); }
  .projectkleurenbr { grid-template-columns: repeat(2, 1fr); }
  .werk { grid-template-columns: repeat(1, 1fr); }
  .cvSkills { grid-template-columns: repeat(2, 1fr); }
  .topnav a {font-size: 125%;}
  .logo {scale: 120%; padding-left: 20px; padding-top: 8px;}
  footer {font-size: 100%; height: auto; text-align: center; grid-template-columns: repeat(1, 1fr);}
  .headercta { grid-template-columns: repeat(1, 1fr); }
  .videoNieuwsbegrip {height: 800px; width:980px;}
}

@media (min-width: 1400px) {
  .videoNieuwsbegrip {height: 800px; width:980px;}
}


@media (min-width: 1500px) {
  .werk { grid-template-columns: repeat(1, 1fr); }
  .cvSkills { grid-template-columns: repeat(2, 1fr); }
  .broodtekst {font-size: 140%;}
  .topnav a {font-size: 125%;}
  .logo {scale: 120%; padding-left: 20px; padding-top: 8px;}
  footer {font-size: 100%; height: auto; text-align: center; grid-template-columns: repeat(2, 1fr);}
  .headercta { grid-template-columns: repeat(2, 1fr); }
  .videoNieuwsbegrip {height: 900px; width:1260px;}
}

@media (min-width: 1700px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .float-parent-element { grid-template-columns: repeat(2, 1fr); }
  .headercta { grid-template-columns: repeat(2, 1fr); }
  .projectkleuren { grid-template-columns: repeat(3, 1fr); }
  .projectkleurenbr { grid-template-columns: repeat(4, 1fr); }
  .werk { grid-template-columns: repeat(3, 1fr); }
  .cvSkills { grid-template-columns: repeat(2, 1fr); }
  .broodtekst {font-size: 140%;}
  .topnav a {font-size: 125%;}
  .logo {scale: 120%; padding-left: 20px; padding-top: 8px;}
  footer {font-size: 100%; height: auto; text-align: center; grid-template-columns: repeat(2, 1fr);}
  .headercta { grid-template-columns: repeat(2, 1fr); }
  .videoNieuwsbegrip {height: 900px; width:1660px;}
}

@media (min-width: 1900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .float-parent-element { grid-template-columns: repeat(2, 1fr); }
  .headercta { grid-template-columns: repeat(2, 1fr); }
  .projectkleuren { grid-template-columns: repeat(3, 1fr); }
  .projectkleurenbr { grid-template-columns: repeat(4, 1fr); }
  .werk { grid-template-columns: repeat(3, 1fr); }
  .cvSkills { grid-template-columns: repeat(2, 1fr); }
  .broodtekst {font-size: 140%;}
  .topnav a {font-size: 130%;}
  .logo {scale: 120%; padding-left: 20px; padding-top: 8px;}
  footer {font-size: 100%; height: auto; text-align: center; grid-template-columns: repeat(2, 1fr);}
  .headercta { grid-template-columns: repeat(2, 1fr); }
  .videoNieuwsbegrip {height: 1000px; width:1960px;}
}

@media (min-width: 1950px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .float-parent-element { grid-template-columns: repeat(2, 1fr); }
  .headercta { grid-template-columns: repeat(2, 1fr); }
  .projectkleuren { grid-template-columns: repeat(3, 1fr); }
  .projectkleurenbr { grid-template-columns: repeat(4, 1fr); }
  .werk { grid-template-columns: repeat(3, 1fr); }
  .cvSkills { grid-template-columns: repeat(2, 1fr); }
  .broodtekst {font-size: 140%;}
  .topnav a {font-size: 130%;}
  .logo {scale: 120%; padding-left: 20px; padding-top: 8px;}
  footer {font-size: 100%; height: auto; text-align: center; grid-template-columns: repeat(2, 1fr);}
  .headercta { grid-template-columns: repeat(2, 1fr); }
  .videoNieuwsbegrip {height: 1000px; width:1960px;}
}

@media (min-width: 1989px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .float-parent-element { grid-template-columns: repeat(2, 1fr); }
  .headercta { grid-template-columns: repeat(2, 1fr); }
  .projectkleuren { grid-template-columns: repeat(3, 1fr); }
  .projectkleurenbr { grid-template-columns: repeat(4, 1fr); }
  .werk { grid-template-columns: repeat(3, 1fr); }
  .cvSkills { grid-template-columns: repeat(2, 1fr); }
  .broodtekst {font-size: 140%;}
  .topnav a {font-size: 130%;}
  .logo {scale: 120%; padding-left: 20px; padding-top: 8px;}
  footer {font-size: 100%; height: auto; text-align: center; grid-template-columns: repeat(2, 1fr);}
  .headercta { grid-template-columns: repeat(2, 1fr); }
  .videoNieuwsbegrip {scale: 100%;}
  .videoNieuwsbegrip {height: 1000px; width:1960px;}
}

/*Print Media*/

@media print {
.topnav, footer, .cvTitel {
  display: none;
}

}

/*Responsive Contact Form*/

.wk-desk-1 {
  width: 8.333333%;
}

.wk-desk-2 {
  width: 16.666667%;
}

.wk-desk-3 {
  width: 25%;
}

.wk-desk-4 {
  width: 33.333333%;
}

.wk-desk-5 {
  width: 41.666667%;
}

.wk-desk-6 {
  width: 50%;
}

.wk-desk-7 {
  width: 58.333333%;
}

.wk-desk-8 {
  width: 66.666667%;
}

.wk-desk-9 {
  width: 75%;
}

.wk-desk-10 {
  width: 83.333333%;
}

.wk-desk-11 {
  width: 91.666667%;
}

.wk-desk-12 {
  width: 100%;
}

@media (max-width: 1024px) {
  .wk-ipadp-1 {
    width: 8.333333%;
  }

  .wk-ipadp-2 {
    width: 16.666667%;
  }

  .wk-ipadp-3 {
    width: 25%;
  }

  .wk-ipadp-4 {
    width: 33.333333%;
  }

  .wk-ipadp-5 {
    width: 41.666667%;
  }

  .wk-ipadp-6 {
    width: 50%;
  }

  .wk-ipadp-7 {
    width: 58.333333%;
  }

  .wk-ipadp-8 {
    width: 66.666667%;
  }

  .wk-ipadp-9 {
    width: 75%;
  }

  .wk-ipadp-10 {
    width: 83.333333%;
  }

  .wk-ipadp-11 {
    width: 91.666667%;
  }

  .wk-ipadp-12 {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .wk-tab-1 {
    width: 8.333333%;
  }

  .wk-tab-2 {
    width: 16.666667%;
  }

  .wk-tab-3 {
    width: 25%;
  }

  .wk-tab-4 {
    width: 33.333333%;
  }

  .wk-tab-5 {
    width: 41.666667%;
  }

  .wk-tab-6 {
    width: 50%;
  }

  .wk-tab-7 {
    width: 58.333333%;
  }

  .wk-tab-8 {
    width: 66.666667%;
  }

  .wk-tab-9 {
    width: 75%;
  }

  .wk-tab-10 {
    width: 83.333333%;
  }

  .wk-tab-11 {
    width: 91.666667%;
  }

  .wk-tab-12 {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .wk-mobile-1 {
    width: 8.333333%;
  }

  .wk-mobile-2 {
    width: 16.666667%;
  }

  .wk-mobile-3 {
    width: 25%;
  }

  .wk-mobile-4 {
    width: 33.333333%;
  }

  .wk-mobile-5 {
    width: 41.666667%;
  }

  .wk-mobile-6 {
    width: 50%;
  }

  .wk-mobile-7 {
    width: 58.333333%;
  }

  .wk-mobile-8 {
    width: 66.666667%;
  }

  .wk-mobile-9 {
    width: 75%;
  }

  .wk-mobile-10 {
    width: 83.333333%;
  }

  .wk-mobile-11 {
    width: 91.666667%;
  }

  .wk-mobile-12 {
    width: 100%;
  }
}