/* style*/
html {
    scroll-behavior: smooth;
}

/*General style*/
body{
margin: 0;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
line-height: 1.6;
background-color: white;
font-size: 16px;

}
/*=========================================================================
    navigation section 
========================================================================== */

/*=========================================================================
    animation button navigation
========================================================================== */
#siteHeader li a:active,#siteHeader li a:hover{
    color: black;
    background: white;
    border-radius: 3px;
    padding: 7px 13px;
    transition: 0.5s;
}



/*Xiao Qian text style verplaatsing van de logo en text*/
.Logo img{
  width: 40px;
  margin-left: 10px;
 }
 /*Margin ruimte tussen tekst en logo*/
a .Text{
    margin-left: 58px;
    margin-top: -32px;
}
.card .Logo{
    margin-top: 13px;
}
/*Purple line gone*/
#siteHeader .card a{
    text-decoration: none;
    color: white;
}

/*Navbar style*/
nav ul li a{
  
    font-weight: bold;
}
ul li{
    display: inline;
}
/*Geen paarse lijn meer*/
ul li a{
    text-decoration: none;
    margin: 10px;
}

#siteHeader{
    position: fixed;
    top:0;
    left: 0;
    width:100%;
}

/*--------------Grid systeem navigation---------------------*/
#siteHeader .container {
    display: grid;
    grid-template-columns: repeat(12 ,1fr);
    grid-gap: 16px;
    background-color: black;
    max-width: 1240px;
    margin: 0 auto;

}
#siteHeader .container .card:nth-child(1){
    grid-column-start: 1;
    grid-column-end: 4;
}
#siteHeader .container .card:nth-child(2){
    grid-column-start:5;
    grid-column-end: 13;
    text-align:right;
}
/*=========================================================================
    home hero section 
========================================================================== */
#home{
    height: 650px;
    background-image: url(images/heroimage.jpg);
    background-size: cover;
    max-width: 1240px;
    margin: 0 auto;

}
#home .container a{
    text-align: center;
    background-color: rgb(0, 0, 0);
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 45%;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
    border: none;
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    text-decoration: none;
    padding-left: 25px;
    padding-right: 25px;
}

/*animation*/
#home a:active,#home a:hover{
    background: white;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 3px;
    color: black;
    transition: 0.5s;
    text-align: center;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 45%;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/*img hero*/
#home .container .card img{
    min-width: 200px;
    width: 82%;
    margin-left: 180px;
}

/*=========================================================================
    demo reel grid and section
========================================================================== */
#Demo-reel .container{
    display: grid;
    grid-template-columns: repeat(12 ,1fr);
    grid-template-rows: 100px;
    grid-gap: 16px;
    max-width: 1240px;
    margin: 0 auto;
    height: 500px;
    background-color: black;
    border-top-left-radius: 250px;
    border-top-right-radius: 250px;
}
#Demo-reel .card{
    grid-column-start: 4;
    grid-column-end: 9;
}
#Demo-reel .container .card h2{
    color: white;
    font-size: 50px;
    grid-column-start:8;
    grid-column-end: 10;
    text-align: center;
    margin-left: 85px;
}
#Demo-reel .card video{
    max-width: 115%;
   margin-left: 15px;
   margin-top: 38px;
   border-radius: 10px;

}

/*=========================================================================
    grid systeem work section
========================================================================== */
/*Structure*/
#sectionGallery{
    padding: 2rem 0;
    max-width: 1240px;
    margin: 0 auto;
}
#sectionGallery .container h2{
    font-size: 50px;
}
#sectionGallery .container:nth-child(1){
    padding: 1rem;
   
}
#sectionGallery .container:nth-child(2){
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(12 ,1fr);
    grid-gap:16px;
}
#sectionGallery .card:nth-child(1){
    grid-column-start: 1;
    grid-column-end: 5;
}
#sectionGallery .card:nth-child(2){
    grid-column-start: 5;
    grid-column-end: 9;
}
#sectionGallery .card:nth-child(3){
    grid-column-start: 9;
    grid-column-end: 13;
}
#sectionGallery .container:nth-child(2){
    margin-left: 32px;
}
/* Visual design cards*/    
#sectionGallery .container{
    text-align: center;
}
/*Cards*/
#sectionGallery .card img{
    display: block;
    max-width: 80%;
    height: auto;
    object-fit: cover;
}


#sectionGallery .container .card a{
    background-color: rgb(0, 0, 0);
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
    border: none;
    padding: 3px;
    border-radius: 10px;
    margin-right: 76px;
    padding-left: 30px;
    padding-right: 29px;
    margin-bottom: 20px;
    text-decoration: none;
   
}
#sectionGallery .container .card a:hover{
   background-color: white;
   color: black;
   
}

/*=========================================================================
    about section with grid
========================================================================== */

#About .container{
    display: grid;
    grid-template-columns: repeat(12 ,1fr);
    grid-template-rows: 200px;
    grid-gap:16px;
    max-width: 1240px;
    margin: 0 auto;
   
}
#About .container h2{
    grid-column-start: 6;
    grid-column-end: 8;
    font-size: 50px;
    text-align: center;
}
#About .card img{
    grid-column-start: 1;
    grid-column-end: 4;
    display: block;
    max-width: 360%;
    height: auto;
    object-fit: cover;
    border-radius: 10%;
    margin-top: -64px;
}
#About .card h2{
    position: absolute;
    margin-left: 258px;
    font-size: 20px;
    margin-top: -63px;
}
#About .card p{
    position: absolute;
    margin-top: -21px;
    margin-left: 154px;
    font-size: 16px;
    padding-right: 72px;

   
}
#About .card:nth-child(4) h2{
    margin-left: 49px;
    margin-top: 88px;
}
#About .card:nth-child(5) ul li{
   background-color: black;
   border-radius: 20px;
   color: white;
   font-size: 20px;
   padding:0px 20px;
}
#About .card:nth-child(5){
   grid-column-start: 4;
   grid-column-end: 10;
   margin-top: -103px;

}
#About .container:nth-child(3) .card:nth-child(1) img{
    max-width: 30%;
    grid-column-start: 1;
    grid-column-end: 3;
    margin-left: 67px;
    margin-top: 0px;

    
}
#About .container:nth-child(3) .card:nth-child(2) img{
    max-width: 19%;
    grid-column-start: 1;
    grid-column-end: 3;
    margin-top: -38px;


    
   
}
#About .container:nth-child(3) .card:nth-child(3) img{
   max-width: 19%;
   grid-column-start: 1;
   grid-column-end: 3;
 margin-left: -173px;
   margin-top: -38px;
}
   
#About .container:nth-child(3) .card:nth-child(1){
    grid-column-start: 4;
    grid-column-end: 6;
    margin-top: -38px;
}
#About .container:nth-child(3) .card:nth-child(2){
    grid-column-start: 6;
    grid-column-end: 9;
}
#About .container:nth-child(3) .card:nth-child(3){
    grid-column-start: 9;
    grid-column-end: 12;
}
#About .container:nth-child(4) h2{
    grid-column-start: 5;
    grid-column-end: 9;
    font-size: 33px;
    margin-right: -26px;

}


/*=========================================================================
    Footer
========================================================================== */

#Footer a{
    color: white;
    text-decoration: none;
}
/*Postion mijn email*/
#Footer .container:nth-child(1) .card:nth-child(3){
    grid-column-start: 1;
    grid-column-end: 5;
    margin-top: 13px;
}


#Footer .container{
    display: grid;
    grid-template-columns: repeat(12 ,1fr);
    grid-gap:16px;
    height: 153px;
    background-color: black;
    max-width: 1240px;
    margin: 0 auto;
}
/*Lets connect*/
#Footer .card:nth-child(1){
    grid-column-start: 7;
    grid-column-end: 12;
    margin-left: -147px;
    font-size: 50px;
    font-weight: bold;
}
/*Button contact*/
#Footer .container:nth-child(2) .card:nth-child(1) a{
    background-color: white;
    border-radius: 10px;
    color: black;
    font-size: 20px;
    text-align: center;
    padding: 8px;
    padding-left: 15px;
    padding-right: 15px;
}
/*animation button contact*/
#Footer .container:nth-child(2) .card:nth-child(1) a:active,#Footer .container:nth-child(2) .card:nth-child(1) a:hover{
    background: rgb(0, 0, 0);
    border-radius: 3px;
    padding: 7px 13px;
    color: rgb(255, 255, 255);
    transition: 0.5s;
}

/*Position button*/
#Footer .container:nth-child(2) .card:nth-child(1){
    grid-column-start: 8;
    grid-column-end: 12;
    margin-left: -166px;
}
#Footer .card:nth-child(2){
    grid-column-start: 7;
    grid-column-end: 12;
    
}
#Footer .card:nth-child(2) img{
    margin-left: -58px;
    max-width: 19%;
}
#Footer .card:nth-child(3){
    grid-column-start: 1;
    grid-column-end: 5;
    margin-left: 11px;
    margin-top: -62px;
}

#Footer .card:nth-child(3) a:active,#Footer .card:nth-child(3) a:hover{
    background: white;
    border-radius: 3px;
    padding: 7px 13px;
    color: black;
    transition: 0.5s;
}

#Footer .card:nth-child(4) a{
    padding-bottom: 20px;
    font-size: 20px;
    background-color: pink;
}

#Footer .socials{
    grid-column-start: 7;
    grid-column-end: 12;
    margin-right: -90px;
    color: white;
    text-align: right;
}

/*Footer text Instagram & Tiktok hovering*/
#Footer .socials a:active,#Footer .socials a:hover{
    background: white;
    border-radius: 3px;
    padding: 7px 13px;
    color: black;
    transition: 0.5s;
}



/*---------------------Gallery section html-----------------------------------*/

/*=========================================================================
    grid systeem work section
========================================================================== */
/*Structure*/
#Gallery{
    padding: 2rem 0;
    max-width: 1240px;
    margin: 0 auto;
}
#Gallery .container h1{
    font-size: 50px;
}
#Gallery .container:nth-child(1){
    padding: 1rem;
   
}
#Gallery .container:nth-child(2){
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(12 ,1fr);
    grid-gap:16px;
}
#Gallery .card:nth-child(1){
    grid-column-start: 1;
    grid-column-end: 5;
}
#Gallery .card:nth-child(2){
    grid-column-start: 5;
    grid-column-end: 9;
}
#Gallery .card:nth-child(3){
    grid-column-start: 9;
    grid-column-end: 13;
}
#Gallery .container:nth-child(2){
    margin-left: 32px;
}
/* Visual design cards*/    
#Gallery .container{
    text-align: center;
}
/*Cards*/
#Gallery .card img{
    display: block;
    max-width: 80%;
    height: auto;
    object-fit: cover;
}
#Gallery .container .card a{
    background-color: rgb(0, 0, 0);
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
    border: none;
    padding: 3px;
    border-radius: 10px;
    margin-right: 76px;
    padding-left: 30px;
    padding-right: 29px;
    margin-bottom: 20px;
    text-decoration: none;
   
}
#Gallery .container:nth-child(2) h2{
   margin-left: -73px;
}
/*Hover effect*/
#Gallery .container:nth-child(2) a:hover{
    color: black;
    background-color: white
   
}
/*---------------------Datapunten section html-----------------------------------*/
/*Structure*/
#Datapunten{
    padding: 2rem 0;
    max-width: 1240px;
    margin: 0 auto;
    background-color: black;
}
#Datapunten .container h1{
    font-size: 50px;
    color: white;
}
#Datapunten .container:nth-child(1){
    padding: 1rem;
   
}
#Datapunten .container:nth-child(2){
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(12 ,1fr);
    grid-gap:16px;
}
#Datapunten .card:nth-child(1){
    grid-column-start: 1;
    grid-column-end: 5;
}
#Datapunten .card:nth-child(2){
    grid-column-start: 5;
    grid-column-end: 9;
}
#Datapunten .card:nth-child(3){
    grid-column-start: 9;
    grid-column-end: 13;
}
#Datapunten .container:nth-child(2){
    margin-left: 32px;
}
/* Visual design cards*/    
#Datapunten .container{
    text-align: center;
}
/*Cards*/
#Datapunten .card img{
    display: block;
    max-width: 80%;
    height: auto;
    object-fit: cover;
}
#Datapunten .container .card a{
    background-color: rgb(255, 255, 255);
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: rgb(0, 0, 0);
    border: none;
    padding: 3px;
    border-radius: 10px;
    margin-right: 76px;
    padding-left: 30px;
    padding-right: 29px;
    margin-bottom: 20px;
   
}
#Datapunten .container:nth-child(2) h2{
   margin-left: -73px;
   color: white;
}
/*Hover effect*/
#Datapunten .container:nth-child(2) a:hover{
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0)
   
}

/*---------------------Photography section html-----------------------------------*/
/*Structure*/
#Datapunten{
    padding: 2rem 0;
    max-width: 1240px;
    margin: 0 auto;
    background-color: black;
}
#Datapunten .container h1{
    font-size: 50px;
    color: white;
}
#Datapunten .container:nth-child(1){
    padding: 1rem;
   
}
#Datapunten .container:nth-child(2){
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(12 ,1fr);
    grid-gap:16px;
}
#Datapunten .card:nth-child(1){
    grid-column-start: 1;
    grid-column-end: 5;
}
#Datapunten .card:nth-child(2){
    grid-column-start: 5;
    grid-column-end: 9;
}
#Datapunten .card:nth-child(3){
    grid-column-start: 9;
    grid-column-end: 13;
}
#Datapunten .container:nth-child(2){
    margin-left: 32px;
}
/* Visual design cards*/    
#Datapunten .container{
    text-align: center;
}
/*Cards*/
#Datapunten .card img{
    display: block;
    max-width: 80%;
    height: auto;
    object-fit: cover;
}
#Datapunten .container .card a{
    background-color: rgb(255, 255, 255);
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: rgb(0, 0, 0);
    border: none;
    padding: 3px;
    border-radius: 10px;
    margin-right: 76px;
    padding-left: 30px;
    padding-right: 29px;
    margin-bottom: 20px;
    text-decoration: none;
   
}
#Datapunten .container:nth-child(2) h2{
   margin-left: -73px;
   color: white;
}
/*Hover effect*/
#Datapunten .container:nth-child(2) a:hover{
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0)
   
}

/*---------------------Photography section html-----------------------------------*/
/*Structure*/
/*Background black*/
#Photography{
    padding: 2rem 0;
    max-width: 1240px;
    margin: 0 auto;
    background-color: black;
    height: 2500px;
}
/*Grid*/
#Photography .container:nth-child(1){
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap:16px;

}
/*Grid Photography*/
#Photography .container:nth-child(1) h1{
    font-size: 50px;
    color: white;
    grid-column-start: 5;
    grid-column-end: 10;
    margin-left: 70px;
}

/*images and structering airpods afbeelding*/

#Photography .container:nth-child(2) img{
  
margin-left: 20px;
    height: auto;
    width: 500px;
    margin-left: 400px;
    border-radius: 10px;
    transition: 0.9s; ;
}
/*Hover animation airpods*/
#Photography .container:nth-child(2) img:hover{
transform: scale(1.1);
z-index: 2;
    }
/*1ste card met text airpods*/
#Photography .container:nth-child(2) .card:nth-child(1){
  color: white;
  text-align: center;
  

}
/*tweede card*/

#Photography .container:nth-child(2) .card:nth-child(2){
    color: white;
   margin-left: -210px;
  
}
/*derde card*/
#Photography .container:nth-child(2) .card:nth-child(3){
    color: white;
   margin-left: 100px;
  
}

#Photography .container:nth-child(2) .card:nth-child(3) h2{
    margin-left: 400px;
  
}
/*Achtergrond kleur wit*/
#Photography .container:nth-child(3){
 background-color: white;
 margin-left: 100px;
 margin-right: 100px;
 border-radius: 10px;
}
/*De DSL en iphone 11 tekst*/
#Photography .container:nth-child(3) p{
    color: black;
    font-size: 16px;
    margin-top: -22px;
    margin-left: 380px;
 }
/*Information tekst*/
 
#Photography .container:nth-child(3) h2{
   color: black;
   text-align: center;
   font-size: 30px;
}
/*---------------------my work section html-----------------------------------*/
/*Structure*/
#mywork{
    padding: 2rem 0;
    max-width: 1240px;
    margin: 0 auto;
    background-color: black;
}
#mywork .container h1{
    font-size: 50px;
    color: white;
}
#mywork .container:nth-child(1){
    padding: 1rem;
   
}
#mywork .container:nth-child(2){
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(12 ,1fr);
    grid-gap:16px;
}
#mywork .card:nth-child(1){
    grid-column-start: 1;
    grid-column-end: 5;
}
#mywork .card:nth-child(2){
    grid-column-start: 5;
    grid-column-end: 9;
}
#mywork .card:nth-child(3){
    grid-column-start: 9;
    grid-column-end: 13;
}
#mywork .container:nth-child(2){
    margin-left: 32px;
}
/* Visual design cards*/    
#mywork .container{
    text-align: center;
}
/*Cards*/
#mywork .card img{
    display: block;
    max-width: 80%;
    height: auto;
    object-fit: cover;
}
#mywork .container .card a{
    background-color: rgb(255, 255, 255);
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: rgb(0, 0, 0);
    border: none;
    padding: 3px;
    border-radius: 10px;
    margin-right: 76px;
    padding-left: 30px;
    padding-right: 29px;
    margin-bottom: 20px;
    text-decoration: none;
   
}
#mywork .container:nth-child(2) h2{
   margin-left: -73px;
   color: white;
}
/*Hover effect*/
#mywork .container:nth-child(2) a:hover{
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0)
   
}
/*---------------------3 cultural posters section html-----------------------------------*/
/*Slideshow carousel*/

.carousel {
    position: relative;
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    margin-top: 100px;
    margin-left: 380px;
}

/*Animation caroussel*/
.carousel:hover{
    transform: scale(1.1);
    z-index: 2;
    transition: 0.9s;
}

.slides {
    display: flex;
    transition:0.5s ease-in-out;
    width: 300%; /* 3 slides */
}
.slide {
   width: 100%;
}
.slide img {
    width: 100%;
}
.navigation {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}
.navigation{
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%);

}
.navigation label{
    height: 5px;
    width: 45px;
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    margin-left: 8px;
    border-radius: 4px;
}
.navigation label:hover{
    background: #000000;
}

input[type="radio"]{
display: none;
}


/* Position the slides based on which radio button is checked */
#btn1:checked ~ .slides {
    margin-left: 0;
}

#btn2:checked ~ .slides {
    margin-left: -100%;
}

#btn3:checked ~ .slides {
    margin-left: -200%;
}

/*Text culturalposters*/
#culturalposters{
 
    max-width: 1240px;
    margin: 0 auto;
    background-color: black;
    height: 1500px;

}
#culturalposters h1{
    color: white;
    font-size: 50px;
    text-align: center;
}

/*Button left and right postion and overlapping picture*/
.slide-right{
    position: absolute;
    top: 50%;
    left: 89%;
}
/*Arrow picture sizing*/
.slide-right img{
    width: 32px;
}

/*text sizing and download etc sizing*/
#culturalposters .container:nth-child(3) p{
    color: white;
    font-size: 16px;
    text-align: left;
    padding: 13px 200px;
    margin-left: 34px;

 
   
}
#culturalposters .container:nth-child(3) h2{
    color: white;
    font-size: 30px;
    text-align: center;

}
#culturalposters .container-card:nth-child(4) h2{
    color: white;
    font-size: 16px;
    text-align: center;
}
#culturalposters .container-card:nth-child(4) a{
    color: white;
    font-size: 30px;
    filter: blur(2px);
    text-decoration: none;
    margin-left: 560px;
 
}
#culturalposters .container-card a:hover{
    background: white;
    padding-left: 10px;
    padding-right: 10px;
    color: black;
    transition: 0.3s;
    margin-left: 540px;
}






/*---------------------Cursus1 section html-----------------------------------*/
/*Structure*/
#Cursus1{
    padding: 2rem 0;
    max-width: 1240px;
    margin: 0 auto;
    background-color: black;
}
#Cursus1 .container h1{
    font-size: 50px;
    color: white;
}
#Cursus1 .container:nth-child(1){
    padding: 1rem;
   
}
#Cursus1 .container:nth-child(2){
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(12 ,1fr);
    grid-gap:16px;
}
#Cursus1 .card:nth-child(1){
    grid-column-start: 1;
    grid-column-end: 5;
}
#Cursus1 .card:nth-child(2){
    grid-column-start: 5;
    grid-column-end: 9;
}
#Cursus1 .card:nth-child(3){
    grid-column-start: 9;
    grid-column-end: 13;
}
#Cursus1 .container:nth-child(2){
    margin-left: 32px;
}
/* Visual design cards*/    
#Cursus1 .container{
    text-align: center;
}
/*Cards*/
#Cursus1 .card img{
    display: block;
    max-width: 80%;
    height: auto;
    object-fit: cover;
}
/*Hover animatie*/
#Cursus1 .container:nth-child(2) .card img:hover{
   transform: scale(1.1) ;
   transition: 0.9s;
   z-index: 2;
}

#Cursus1 .container:nth-child(2) h2{
   margin-left: -73px;
   color: white;
}


/*---------------------Contact section html-----------------------------------*/

#contact{
    background-color: rgb(0, 0, 0);
    width: 1240px;
    margin: 0 auto;
  
    align-items: center;
    display: grid;
    grid-template-columns: repeat(12 ,1fr);
    grid-gap:16px;
    height: 600px;
}
/*Contact form text call out*/
#contact .contact-form{
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    grid-column-start: 1;
    grid-column-end: 5;
    text-align: center;
}
/*De contact formulier met contact en submit etc*/
#contact form{
    grid-column-start: 7;
    grid-column-end: 11;
    background-color: white;
    border-radius: 20px;
    height: 304px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
   
}
#contact input[type=submit]{
    text-decoration: none;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: rgb(0, 0, 0);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: -4px;
}
/*Hover animation*/
#contact input[type=submit]:hover{
    background-color: white;
    color: black;
}
/*Opmaak contact text en paragraph*/
.contact-form h1{
    font-size: 50px;
}
.contact-form p{
    font-size: 16px;
    margin-top: -55px;
}
#contact textarea{
    border-radius: 4px;
    margin: 186px 0px 8px 0px;
    margin-top: 20px;
    height: 166px;
}
/*---------------------Thank you section html-----------------------------------*/
/*Background picture*/
#Background{
background-color: black;
max-width: 1240px;
margin: 0 auto;

}
/*Text thank you*/
#Thank-you h1{
    color: white;
    font-size: 50px;
    text-align: center;
    margin-top: 313px;

}
/*Button home page*/
#Thank-you .container:nth-child(2) a{
    color: black;
    text-decoration: none;
    margin-left: 570px;
    background-color: white;
    border-radius: 4px;
    padding: 5px 5px;
    font-weight: bold;
    
}
/* hover animation voor de buton*/
#Thank-you .container:nth-child(2) a:hover{
background-color: black;
color: white;

}

/*---------------------Animation text I'm a designer section html-----------------------------------*/
/*Achtergrond kleur en de plaatsing van de tekst en de lengte van de screen*/
#Back-ground{
    justify-content: center;
    display: flex;
    align-items: center;
    height: 800px;
    width: auto;
}

   
/*Font tekst ''next''*/
#Back-ground .container a{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
    text-decoration: none;
}

/*Next button vierkant*/
#Back-ground .container{
    background-color: rgb(0, 0, 0);
    position: absolute;
    border-radius: 10px;
    margin-top: 400px;
    padding-left: 20px;
    padding-right: 20px;
}
/*Hover animation op de button*/
#Back-ground .container:hover{
    transform: scale(1.1); /*Zoom in van de afbeelding*/
    transition: 0.9s;
    z-index: 2;
}

/*Hover animatie op de button next*/
#Back-ground .container a:hover{
    background-color: black;
    color: white;
    transition: 0.5s;
    
}

/*---------------------Animation text I'm a designer section html-----------------------------------*/
/*Tekst moco museum*/
#moco-museum .container:nth-child(1) h1{
    color: white;
    font-size: 50px;
    text-align: center;
}
/*Achtergrond*/
#moco-museum{
    background-color: black;
    max-width: 1240px;
    margin: 0 auto;
    height: 1800px;
}
/*Container grid*/
#moco-museum .container:nth-child(2){
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap:16px;
}
#moco-museum .container:nth-child(2) .card:nth-child(2){
   grid-column-start: 7;
   grid-column-end: 10;
}
#moco-museum .container:nth-child(2) .card:nth-child(2) img{
width: 150%;
margin-left: 7px;
}
/*Hovering animation wanneer op de afbeelding klikken*/
#moco-museum .container:nth-child(2) .card:nth-child(2) img:hover{
transform: scale(1.1); /*Zoom in van de afbeelding*/
transition: 0.9s;
z-index: 2;
}
/*Moco museum 2de spread*/
/*Grid systeem*/
#moco-museum .container:nth-child(2) .card:nth-child(1){
    grid-column-start: 1;
    grid-column-end: 4;
 }

#moco-museum .container:nth-child(2) .card:nth-child(1) img{
    width: 150%;
    margin-left: 60px;
}
#moco-museum .container:nth-child(2) .card:nth-child(1) img:hover{
    transform: scale(1.1); /*Zoom in van de afbeelding*/
    transition: 0.9s;
    z-index: 2;
}

/*Tekst description*/
/*Tekst aanpassingen en download groote*/
#moco-museum .container:nth-child(3) p{
    color: white;
    font-size: 16px;
    text-align: left;
    padding: 13px 200px;
    margin-left: 34px;
}
/*De description tekst*/
#moco-museum .container:nth-child(3) h2{
    color: white;
    font-size: 30px;
    text-align: center;

}
/*Downloud here the proces tekst*/
#moco-museum .container-card:nth-child(4) h2{
    color: white;
    font-size: 16px;
    text-align: center;
    margin-top: 50px;
}
/*De link tekst*/
#moco-museum .container-card:nth-child(4) a{
    color: white;
    font-size: 30px;
    filter: blur(2px); /*Wazige blur effect*/
    text-decoration: none;
    margin-left: 560px; /*Ruimte aan de linkerkant, plaatsing tekst*/
 
}
/*Animatie hover effect wanneer op de Downloud button*/
#moco-museum .container-card a:hover{
    background: white;
    padding-left: 10px;
    padding-right: 10px;
    color: black;
    transition: 0.3s;
    margin-left: 540px;
}
/*Proces afbeelding plaatsing*/
#moco-museum .container:nth-child(3) .card:nth-child(2) img{
    width: 80%;
    margin-left: 123px;
    border-radius: 10px;
}
/*Hover animatie*/
#moco-museum .container:nth-child(3) .card:nth-child(2) img:hover{
    transform: scale(1.1); /*Zoom in van de afbeelding*/
    transition: 0.9s;
    z-index: 2;
}

/*---------------Ik en interactieve media en producten*------------------------*/
/*Background*/
#media-producten{
    background-color: black;
    max-width: 1240px;
    margin: 0 auto;
    height: 1800px;

}
/*Tekst groote Interactieve media en producten*/
#media-producten .container:nth-child(1) h1{
    color: white;
    font-size: 50px;
    text-align: center;
}
/*De afbeelding grid*/
#media-producten .container:nth-child(2){
    display: grid;
    grid-template-columns: repeat(12 ,1fr);
    grid-gap:16px;

}
#media-producten .container:nth-child(2) .card{
    grid-column-start: 3;
    grid-column-end: 6;

}

/*Afbeelding groote resizen*/
#media-producten .container:nth-child(2) img{
    width:300%;
    margin-left: -50px;
}
/*Animatie van de afbeelding wanneer op hoveren*/
#media-producten .container:nth-child(2) img:hover{
transform: scale(1.1); /*Zoom in van de afbeelding*/
transition: 0.9s;
z-index: 2;
}
/*Tekst description*/
/*Tekst aanpassingen en download groote*/
#media-producten .container:nth-child(3) p{
    color: white;
    font-size: 16px;
    text-align: left;
    padding: 13px 200px;
    margin-left: 34px;
}
/*De description tekst*/
#media-producten .container:nth-child(3) h2{
    color: white;
    font-size: 30px;
    text-align: center;

}
/*Downloud here the proces tekst*/
#media-producten .container-card:nth-child(4) h2{
    color: white;
    font-size: 16px;
    text-align: center;
    margin-top: 50px;
}
/*De link tekst*/
#media-producten .container-card:nth-child(4) a{
    color: white;
    font-size: 30px;
    filter: blur(2px); /*Wazige blur effect*/
    text-decoration: none;
    margin-left: 560px; /*Ruimte aan de linkerkant, plaatsing tekst*/
 
}
/*Animatie hover effect wanneer op de Downloud button*/
#media-producten .container-card a:hover{
    background: white;
    padding-left: 10px;
    padding-right: 10px;
    color: black;
    transition: 0.3s;
    margin-left: 540px;
}
/*grid systeem van de 2 afbeeldingen naast elkaar*/
#media-producten .container:nth-child(5){
    display: grid;
    grid-template-columns: repeat(12 ,1fr);
    grid-gap:16px;
}
/*De laptop afbeelding grid */
#media-producten .container:nth-child(5) .card:nth-child(1){
grid-column-start: 3;
grid-column-end: 4;
   
 
}
/*De laptop afbeelding groote*/
#media-producten .container:nth-child(5) .card:nth-child(1) img{
    width: 400px;
    margin-top: 300px;
}
/*De telefoon afbeelding grid*/
#media-producten .container:nth-child(5) .card:nth-child(2){
   grid-column-start: 4;
   grid-column-end: 6;
}
/*De telefoon afbeelding groote */
#media-producten .container:nth-child(5) .card:nth-child(2) img{
   width: 400px;
   margin-left: 57px;
   margin-top: 40px;
}
/*Animatie beide afbeeldingen*/
#media-producten .container:nth-child(5) .card:nth-child(1) img:hover{
transform: scale(1.1); /*Zoom in van de afbeelding*/
transition: 0.9s;
z-index: 2;
  
}
#media-producten .container:nth-child(5) .card:nth-child(2) img:hover{
transform: scale(1.1); /*Zoom in van de afbeelding*/
transition: 0.9s;
z-index: 2;
}
/*Shop Achtergrond*/
#Shop{
    background-color: white;
    max-width: 1240px;
    margin: 0 auto;
    height: 1000px;
}
/*CHU_STUDIO groote tekst*/
#Shop h1{
    color: black;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 50px;
    text-align: center;
    margin-top: 70px;
}
/*---------------Cursus 3 datapunten------------------------*/
#Cursus-3{
    background-color: white;
}

#Cursus-3 .card h1{
margin-top: 81px;
    font-size: 50px;
    margin-left: 200px;
}

#Cursus-3 .button a{

    color: black;
    margin-left: 201px;
    font-size: 30px;
    font-weight: bold;
}
/*---------------Cursus 4 datapunten------------------------*/
#Cursus-4 .card h1{
    margin-top: 81px;
    font-size: 50px;
    margin-left: 200px;
}

#Cursus-4 .button a{
    color: black;
    margin-left: 201px;
    font-size: 30px;
    font-weight: bold;
}