.navbar{
    overflow: hidden;

}

.navbar a{

    float: right;
    color: black;
    text-align: right;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 15px;
    font-family: avenir next;
}

/*Hier staat de opmaak van mijn intro stukje. Ik heb hiervoor een grid gebruikt om mijn elementen een positie te geven 
op mijn pagina. Door de kolommen die ik heb toegevoegd kan ik mijn cards hieraan koppelen.*/

#homepageOvermij{
    background-color: #EFDFED;
    padding: 2rem 0;
    font-family: avenir next;
}


#homepageOvermij .container{
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;

}

/*Door de grid hier op 2 te laten beginnen en op 7 te laten eindigen komt de afbeelding links te staan op de website.
Door met 8 te beginnen en op 12 te eindigen komt de tekst met de knop daarnaast aan de rechterkant van de pagina
te staan.*/

#homepageOvermij .card:nth-child(1){
    grid-column-start: 2;
    grid-column-end: 7;
}

/*De margin top staat voor meer ruimte aan de bovenkant.*/

#homepageOvermij .card:nth-child(2){
    grid-column-start: 7;
    grid-column-end: 12;
    margin-top: 100px;
}

#introtekst{
    font-size: 20px;
}

.overmijknop{
    font-size: 20px;
}

/*Ik heb een margin top aan de knop toegevoegd om meer ruimte te creeren tussen de tekst en de knop.*/
#knop{
    margin-top: 20px;
}

h2{
    font-size: 40px;
    font-family: avenir next;
}

p{
    font-size: 15px;
    font-family: avenir next;
}




#homepageSpecialist{
    padding: 2rem 0;
    font-family: avenir next;
}

/*De margin-left had ik eerst op 60px staan, maar de kop stond niet goed in het midden. Ik heb met de margin left
gespeeld en uiteindelijk heb ik hem op 97px gezet. Nu staat hij in het midden van de pagina.*/

#homepageSpecialist .container:nth-child(1){
    padding: 1rem;
    max-width: 1450px;
    text-align: center;
    font-size: 40px;
    margin-left: 97px;
}

#homepageSpecialist .containerspecialist:nth-child(2){
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
}

#homepageSpecialist .card:nth-child(1){
    grid-column-start: 1;
    grid-column-end: 5;
}

#homepageSpecialist .card:nth-child(2){
    grid-column-start: 5;
    grid-column-end: 9;
}

#homepageSpecialist .card:nth-child(3){
    grid-column-start: 9;
    grid-column-end: 13;
}


.icons{
    width: 100%;
}






#homepageMijnwerk{
    padding: 2rem 0;
    font-family: avenir next;
    background-color: #EFDFED;
}


#homepageMijnwerk .container:nth-child(1){
    padding: 1rem;
    max-width: 1450px;
    text-align: center;
    font-size: 40px;
    margin-left: 97px;
}

#homepageMijnwerk .containermijnwerk:nth-child(2){
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
}

#homepageMijnwerk .card:nth-child(1){
    grid-column-start: 1;
    grid-column-end: 5;
}

#homepageMijnwerk .card:nth-child(2){
    grid-column-start: 5;
    grid-column-end: 9;
}

#homepageMijnwerk .card:nth-child(3){
    grid-column-start: 9;
    grid-column-end: 13;
}

/*De card hieronder is voor de "meer designs" knop. De grid start bij 6 en eindigd bij 8 zodat hij zo ver mogelijk in 
het midden komt. ik heb ook een tekst align center toegevoegd, zodat de knop nog beter in het midden komt te staan*/

#homepageMijnwerk .card:nth-child(4){
    grid-column-start: 6;
    grid-column-end: 8;
    text-align: center;
}

.mijnwerkknop{
    font-size: 20px;
}

#knop_mijnwerk{
    margin-top: 20px;
}

.foto_mijnwerk{
    width: 100%;
}




#homepageCursussen{
    padding: 2rem 0;
    font-family: avenir next;
}

#homepageCursussen .container:nth-child(1){
    padding: 1rem;
    max-width: 1450px;
    text-align: center;
    font-size: 40px;
    margin-left: 97px;
}

#homepageCursussen .container:nth-child(2){
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
}

#homepageCursussen .card:nth-child(1){
    grid-column-start: 1;
    grid-column-end: 4;
}

#homepageCursussen .card:nth-child(2){
    grid-column-start: 4;
    grid-column-end: 7;
}

#homepageCursussen .card:nth-child(3){
    grid-column-start: 7;
    grid-column-end: 10;
}

#homepageCursussen .card:nth-child(4){
    grid-column-start: 10;
    grid-column-end: 13;
}

.cursusafbeelding{
    width: 100%;
}




#siteCalltoaction{
    background-color: #EFDFED;
    padding: 2rem 0;
    font-family: avenir next;
    text-align: center;
    
}

#siteCalltoaction .container:nth-child(1){
    text-align: center;
}

.card a{
    text-align: center;
    text-decoration: none;
    color: black;
}

/* Ik wilde het woord in de contactknop die h3 stond groter maken dan de rest van de tekst daarboven. Ik heb eerst
in css bij h3 de font size aangepast, maar toen veranderde alle andere teksten die in h3 op de website stonden ook
mee. Dat was niet de bedoeling. Ik heb dit opgelost door het woord in de contactknop in html een andere naam te geven
door middel van class = "naam". Ik heb die naam toen in css gezet zoals hieronder te zien is en ik heb toen opnieuw
de font size aangepast.*/

.contactknop{
    font-size: 20px;
}





#siteFooter{
    padding: 2rem 0;
    font-family: avenir next;
}

/* #siteFooter .container:nth-child(1){
    padding: 1rem;
    max-width: 1450px;
    text-align: center;
    font-size: 40px;
    margin-left: 60;
} */

#siteFooter .containerfooter:nth-child(1){
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px;
}

#siteFooter .card:nth-child(1){
    grid-column-start: 2;
    grid-column-end: 5;
}

#siteFooter .card:nth-child(2){
    grid-column-start: 6;
    grid-column-end: 8;
    text-align: center;
}

/*De padding zorgt ervoor dat de tekst meer naar rechts gaat in de grid en dus goed komt te staan op de website.*/

#siteFooter .card:nth-child(3){
    grid-column-start: 9;
    grid-column-end: 11;
    padding-left: 50px;
    text-align: center;
    padding-right: 1px;
}

/*Ik heb het instagram logo een width van 10% gegeven, omdat de afbeelding anders te groot op de pagina staat. Hij stond
eerst op 100% en nam toen de hele grid in beslag.*/ 

.icon{
    width: 10%;
}