/* ----------------------------------------------------------- */
/* CUSTOM STYLES
Containers & Sections & GRID
-------------------------------------------------------------- */
#containerIntro{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 80px;
    grid-gap: 50px;
}

.item-1{
    grid-column: 2/3;
    margin-top: 100px;
}

.item-2{
    grid-column: 3/7;
    margin-top: 300px;
}

#containerCat{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 5px;
    padding: 10px 100px 10px 100px;
}

#containerCat img{
    width: 90%;
    margin-top: 25px;
    border-radius: 10px;
}

.item-3{
    grid-column: 1;
    text-align: center;
    background-color: rgb(144, 225, 86);
    border-radius: 20px;
    margin: 50px;
}

.item-4{
    grid-column: 2;
    text-align: center;
    background-color: rgb(144, 225, 86);
    border-radius: 20px;
    margin: 50px;
}



#containerCV{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px;
    grid-gap: 10px;
    padding: 100px 260px 100px 270px;
}

.item-5{
    grid-column: 1;
    grid-row: 1/2;
    width: 240px;
}

.item-6{
    grid-column: 1;
    grid-row: 2/3;
    width: 240px;
}

.item-7{
    grid-column: 1;
    grid-row: 3/4;
    width: 240px;
}

.item-8{
    grid-column: 2;
    grid-row: 1/2;
    margin-top: 40px;
    width: 240px;
}

.item-9{
    grid-column: 2;
    grid-row: 3/4;
    width: 240px;
}

.displayPaginaContainer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 10px;
    padding: 20px;
}

.displayPaginaImg1{
    grid-column: 4;
    grid-row: 1;
    width: 100%;
}

.displayPaginaImg2{
    grid-column: 1;
    grid-row: 2;
    width: 100%;
}

.displayPaginaImg3{
    grid-column: 2;
    grid-row: 2;
    width: 100%;
}

.displayPaginaImg4{
    grid-column: 3;
    grid-row: 2;
    width: 100%;
}

.displayPaginaImg5{
    grid-column: 4;
    grid-row: 2;
    width: 100%;
}

.displayPaginaTekst{
    grid-column: 1/4;
    grid-row: 1;
    width: 100%;
}

/* ----------------------------------------------------------- */
/* NAV
-------------------------------------------------------------- */
#navigatie{
    background-color: rgb(255, 255, 255);
    height: 50px;
    width: 100%;
    position: fixed;
    box-shadow: 0px 5px 0px #1717170a ;
}

nav{
    float: right;
    margin: 15px;
    margin-right: 200px;
}

#logoNavigatie{
    margin-left: 200px;
    margin-top: 15px;
    offset-position: 190px 190px;
    overflow: visible;
}

#algemeenLogo{
    width: 150px;
}




/* ----------------------------------------------------------- */
/* FONTS
-------------------------------------------------------------- */
h1,h2,h4,h5,h6{
    font-family: 'Oswald', sans-serif;
    font-weight:bold;
    margin-top: 10px;
}

#algemeenAchtergrond h1 {
    text-align: center;
    margin: 45px 0 0 0;
    font-size: 16pt;
}



p,a,li{
    font-family: 'Oswald', sans-serif;
    font-weight:300;
    font-size:14pt;
    margin: 10px;
}

p{
    margin-bottom:20px;
}

a{
    color:rgb(21, 136, 62);
    transition:all ease .2s;
    text-decoration: none;
    font-weight: 400;
}

a:hover{
    color:rgb(220, 37, 37);
}

h3{
    font-family: 'Oswald', sans-serif;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight:400;
}

/* ----------------------------------------------------------- */
/* AFBEELDINGEN 
-------------------------------------------------------------- */
#introductieAchtergrond{
    background-image: url(../assests/background.png);
    height: 700px;
    width: 100%;
    padding: 45px 0;
}

#profielFoto{
    width: 500px;
}

#profielFotoCV{
    width: 240px;
}

#algemeenAchtergrond{
    background-image: url(../assests/background.png);
    height: 70px;
    width: 100%;
    padding: 45px 0;
}



/* ----------------------------------------------------------- */
/* FOOTER 
-------------------------------------------------------------- */
#footerA{
    background-image: url(../assests/background.png);
    width: 100%;
    height: 100px;
}

.footerClass{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    padding: 30px;
}

.footerTekst{
    grid-column: 2/6;
}

.footerEmail{
    grid-column: 9;
}

.footerSpotify{
    grid-column: 10;
}

.footerInstagram{
    grid-column: 11;
}

#emailLogo{
    width: 40px;
}

#spotifyLogo{
    width: 40px;
}

#instagramLogo{
    width: 40px;
}


/* ----------------------------------------------------------- */
/* FORM 
-------------------------------------------------------------- */
.formulierSection{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    margin: 30px 0px 30px 0px;
}

#formulier{
    grid-column: 2;
    background-color: rgb(144, 225, 86);
    border-radius: 20px;
    padding: 20px;
}

input{
    width: 50%;
}

input[type=submit]{
    font-family: 'Oswald', sans-serif;
    background-color: #ffffff;
    border: none;
    width: 120px;
    color:rgb(21, 136, 62);
    padding: 12px 27px;
    margin: 20px 0px 5px 0px;
    border-radius: 10px;
    font-weight:bold;
}




/* ----------------------------------------------------------- */
/* EXTRA (meerendeels querys)
-------------------------------------------------------------- */
.button{
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    width: 90px;
    height: 27px;
    text-align: center;
}



@media (max-width: 900px) {
    #containerIntro{
        grid-template-columns: 1fr;
    }

    .item-1 {
        grid-column: 1;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }

    .item-2 {
        grid-column: 1;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }
    
    #profielFoto {
        width: 300px;
    }
}

@media (max-width: 500px) {
    #profielFoto {
        width: 200px;
    }

    .item-2 {
        margin-top: 200px;
    }
}

@media (max-width: 900px) {
    #logoNavigatie {
        margin-left: 20px;
    }

    #algemeenLogo{
        width: 120px;
    }

    #navigatie {
        height: 40px;
    }
    
    nav {
        margin-right: 20px;
        margin-top: 10px;
    }

    nav a {
        font-size: 12pt;
        margin: 2px;
    }
}


@media (max-width: 775px) {    
    #containerCat {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        padding: 0px 0px 0px 0px;
    }

    .item-3 {
        grid-row: 1;
        grid-column: 1;
    }

    .item-4 {
        grid-row: 2;
        grid-column: 1;
    }
}



@media (max-width: 900px) {
    #profielFotoCV {
        width: 190px;
        margin-top: 20px;
    }
    #containerCV {
        grid-template-columns: 1fr;
        grid-template-rows: 240px;
        grid-gap: 5px;
        padding: 8px;
    }

    #containerCV p {
        font-size: 11pt;
    }

    .item-5{
        grid-column: 1;
        grid-row: 1;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 190px;
    }
    
    .item-6{
        grid-column: 1;
        grid-row: 2;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 190px;
    }
    
    .item-7{
        grid-column: 1;
        grid-row: 3;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 240px;
    }
    
    .item-8{
        grid-column: 1;
        grid-row: 4;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        width: 240px;
    }
    
    .item-9{
        grid-column: 1;
        grid-row: 5;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 240px;
    }
}


@media (max-width: 700px){
    .footerClass{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr 1fr;
        padding: 20px;
    }
    
    .footerTekst{
        grid-column: 1/4;
        grid-row: 2;
        font-size: smaller;
        justify-self: center;
    }
    
    .footerEmail{
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
    }
    
    .footerSpotify{
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }
    
    .footerInstagram{
        grid-column: 3;
        grid-row: 1;
        justify-self: center;
    }
    
    #emailLogo{
        width: 30px;
    }
    
    #spotifyLogo{
        width: 30px;
    }
    
    #instagramLogo{
        width: 30px;
    }   
}









/*
var $_GET = {result.html};
if(document.location.toString().indexOf('?') !== -1) {
    var query = document.location.toString().replace(/^.*?\?/, '').replace(/#.*$/, '').split('&');

    for(var i=0, l=query.length; i<l; i++) {
       var aux = decodeURIComponent(query[i]).split('=');
       $_GET[aux[0]] = aux[1].replace('+', ' ');
    }
}   
















/* ----------------------------------------------------------- */
/* #containerCV{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 10px;
}

.item-5{
    grid-column: 2/3;
    grid-row: 1/2;
    background-color: blue;
}

.item-6{
    grid-column: 2/3;
    grid-row: 2/3;
    background-color: bisque;
}

.item-7{
    grid-column: 2/3;
    grid-row: 3/4;
    background-color: rgb(49, 193, 36);
}

.item-8{
    grid-column: 3/4;
    grid-row: 1/2;
    background-color: rgb(193, 36, 141);
}

.item-9{
    grid-column: 3/4;
    grid-row: 3/4;
    background-color: rgb(167, 193, 36);
}


#containerCV{
    grid-column: repeat (4, 1fr);
    grid-row: repeat (6, 1fr);
    grid-gap: 10px;
}

#containerCVLinks .card:nth-child(1){
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
}

#containerCVLinks .card:nth-child(2){
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
}

#containerCVLinks .card:nth-child(3){
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
}
-------------------------------------------------------------- */