@media screen and (max-width: 1600px){
    #portret{
        transform: scale(95%);
        margin-top: 0;
    }
}

@media screen and (max-width: 1080px){
    #portret{
        transform: scale(85%);
        margin-top: 0;
    }
    #overMij{
    grid-template-columns: 2fr 1fr;
    }
}

@media screen and (min-width: 1600px){
    #portret{
        transform: scale(60%);
        margin-top: 0;
    }

@media screen and (min-height: 1050px){
    #portret{
        transform: scale(50%);
        margin-top: 0;
    }
}
}

/*nav clean look*/
@media screen and (max-width: 1017px) {
    nav{
        width: 99vw;
        padding: 0 0.5vw;
    }
    nav ul{
        padding: 0 0em;
    }
    #navTitel{
        display: none;
    }    
}

/*homepage tablet*/
@media screen and (max-width: 1080px){
    h1{
        font-size: 37px;
    }
    h2{
        font-size: 22px;
    }
    h3{
        font-size: 18px;
    }
    p{
        font-size: 16px;
    }
    
    #titel{
        grid-template-columns: auto max-content auto;
    }

    #overMij{
        grid-template-columns: 60% auto;
        margin: auto;
        width: 100%;
        gap: 2em;
        padding: 0;
    }
    #overMijLinks{
        margin: 0.5em;
    }
    .overMijOnderwerp button{
        font-size: 16px;
    }

    #voor{
        animation: voor 0s;
    }
    #achter{
        animation: achter 0s;
    }

    #techniek{
        padding: 2em 0.5em;
    }
    #techniekOnderwerpen{
        grid-template-columns: 1fr 1fr;
        gap: 1.5em;
    }
    .kaart{
        padding: 0.7em;
    }
    #kaart img{
        width: 1em;
    }
    #extraLogos{
        overflow: scroll;
        gap: 2.5em;
        justify-content: left;
        margin-left: 2em;
    }
    .logoMetTekst p{
        width: max-content;
    }

    #topWerken{
        gap: 3em;
    }
    .topWerkIcoon{
        width: 5em;
        height: 5em;
        margin-top: 1em;
    }
    .topWerk:hover  .informatie{
        display: none;
    }
    .topWerk:hover  img{
        opacity: 1;
    }
}



/* navigatie*/
@media screen and (max-width: 740px){
    nav{
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    nav > a{
        margin-top: 1em;
    }
    nav > ul{
        flex-direction: column;
        text-align: center;
        gap: 0em;
        margin: 0 0 2em 0;
    }
    nav > li{
        margin: 0;
    }
    nav li a{
        margin: 0;
    }


    .hamburger img{
        position: absolute;
        top: 1em;
        right: 1em;
    }
    .hamburger{
        display: block;
    }
    #navigatie{
        display: none;
    }
    #navTitel{
        display: none;
    }
}

/*homepage mobile*/
@media screen and (max-width: 500px){
    h1{
        font-size: 21px;
    }
    h2{
        font-size: 18x;
    }
    h3{
        font-size: 16px;
    }
    p{
        font-size: 14px;
    }


    header{
        margin-top: 3.5em;
        margin-bottom: 20vh;
    }

    #carouselIndex{
        margin-left: -4em;
    }
    #eersteAfbeelding{
        display: none;
    }
    #tweedeAfbeelding{
        display: block;
    }

    #titel{
        grid-template: '.';
        margin-top: 2em;
        text-align: center;
    }
    #showcase{
        font-size: 19px;
    }
    #naam{
        font-size: 28px;
    }
    .lijn{
        margin-top: 0;
    }
    #break{
        margin: 0 0 3em 0;
    }
    #break p{
        font-size: 16px;
        padding: 0.3em 0;
        overflow-x: scroll;
    }
    #break p::-webkit-scrollbar{
        display: none;
    }


    #techniekOnderwerpen{
        grid-template-columns: auto;
    }
    .techniekProgramIcoon{
        height: 2em;
    }
    .kaart h3{
        font-size: 16px;
    }
    #extraLogos{
        margin-left: 0;
    }


    #topWerken{
        gap: 3em;
    }
    .topWerkIcoon{
        width: 4.5em;
        height: 4.5em;
        margin-top: 1em;
    }
    .topWerk:hover  .informatie{
        display: none;
    }
    .topWerk:hover  img{
        opacity: 1;
    }
        .topWerk iframe{
        width: 21em;
        height: 11.81em;
    }



    footer{
        padding: 0.5em;
        margin-top: 0;
    }
    .beweging{
        padding: 1em;
        width: 90%;
    }
    .contact{
        width: 90%;
    }

    #contactTitel img{
        width: 1.6em;
    }
    #contactKnoppen a{
        width: 85%;
        font-size: 14px;
    }
    #contactKnoppen img{
        height: 2em;
    }
}

/*werkpagina mobile*/
@media screen and (max-width: 500px){
    #werkHeader{
        margin-top: 5em;
    }
    
    .carousel video, .carousel iframe, .carousel img{
        height: 11.25em;
    }
    .carousel video, .carousel iframe{
        width: 20em;
    }

    .werken{
        align-items:flex-start;
    }
    
    .werkTitel{ 
        width: 100%;
        padding: 1em 0;
        margin-top: 1.5em;
    } 

    .werkTitel h2{ 
        width: 90%;
        text-align: center;
        font-size: 16px;
    } 
    .werkTitel h3{
        font-size: 14px;
    }
    .werkIcoon{
        width: 3em;
        height: 3em;
        left: 0em;
        top: -3em;
    }

    .werkBox{
        margin: 0;
        height: max-content;
    }

    .werk{
        scroll-snap-type: x mandatory;
        gap: 0.7em;
        height: 29em;
        margin: 0 1em;
    }

    .werk > div{
        scroll-snap-align: start;
        max-width: 83vw;
        padding-left: 0.5em;
        overflow: hidden;
    }
    .intro{
        max-width: 83vw;
        text-align: center;
    }
    .introTitel{
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .intro video, .intro iframe{
        width: 16em;
        height: 9em;
        margin: 0;
        padding: 0;
    }

    .subTekst{
        max-width: 83vw;
    }

    .ontwerpvraag{
        margin: 0 0 0 0.7em;
    }

    .tekstVakGroot{
        max-width: 100vW;
        max-height: 28em;
        overflow: scroll;
    }

    .tvmImg{
        grid-template-columns: auto;
        gap: 0;
        width: 83vw;
        height: max-content;
    }
    .tvmImg p{
        max-width: 82vw;
    }

    .requirements{
        width: 83vw;
    }
    .requirements ul{
        padding: 0;
    }

    .quote1{
        margin-left: 0;
    }

    .imgOverlap img{
        margin: 0.1em 0;
        transform: translate(0,0);
    }

    .imgOverlap img:nth-child(2){
        transform: translate(0,0);
    }

    .imgOverlap img, .imgNaast img, .imgEen img, .imgEen video, .imgEen iframe{
        max-width: 83vw;
        height: auto;
    }
    .imgOverlap, .imgNaast, .imgEen{
        width: 83vw;
        height: auto;
        max-height: 29em;
    }
    .imgNaast img, .imgNaast video, .imgNaast iframe{
        width: 40vw;
    }


    #echtTeGroot{
        font-size: 14.5px;
    }

    #ecoVrede .imgOverlap img{
        width: 75vw;
        margin-left: 4vw;
    }
    #ecoVrede .imgNaast{
        flex-direction: column;
    }
    #ecoVrede .imgNaast img{
        width: 45vw;
        margin-left: 19vw;
    }
    .groteImg{
        display: flex;
        justify-content: center;
    }
    .groteImg img, .groteImg video{
        height: 25em;
        width: min-content;
    }


    #projectenDiv{
        width: 95%;
    }
    #sideTitel{
        position: sticky;
        top: 0;
    }
    .sideProject{
        width: 20em;
        height: 18em;
    }
    .sideProject:nth-child(even){
        transform: rotate(0deg);
    }
    .sideProject:nth-child(odd){
        transform: rotate(0deg);
    }
    .sideProject h3{
        margin: 2em 0 0 0;
        font-size: 14px;
    }
    .sideProject iframe, .sideProject img{
        width: 17.4em;
        height: 9.6em;
    }


    #mPuzzel iframe{
        height: 16.6em;
        width: 8em;
    }
    #mPuzzel .voorkant{
        flex-direction: row;
        gap: 0.7em;
        padding: 0.7em;
    }
}



@media screen and (min-width: 1600px){
    header{
        height: 65vh;
    }
    :root{
    --headerIframeHeight: 33em;
    }
    :root {
    --topwerkIframeWidth: 39em;
    }
    .contact{
        width: 30%;
    }

}

@media screen and (max-width: 900px){
    #overMijRechts{
        display: none;
    }
    #overMij{
        grid-template-columns: 1fr;
    }
}