@media screen and (max-width: 4000px) {

    html,
	body{ 
		padding: 0;
		margin: 0px;
		font-family: 'Rubik', sans-serif;
        font-weight: 300;
		font-size: 19px;
        line-height: 152%;
		font-optical-sizing: auto;
		color: var(--white); 
		background-color: var(--grey-bg);
		max-width: 100%;
    	overflow-x: hidden;
	}

    .centered{
        margin: 0 auto;
        width: 91vw;
        max-width: 1340px;
        transition: all 100ms;
    }

    .centered-wide{
        margin: 0 auto;
        width: 91.6vw;
        margin-top: 125px;
    }
    
    .centered-1,
    .centered-1-tight{
        margin: 0 auto;
        width: 51vw;
        min-width: 770px;
        max-width: 820px;
        min-height: 90vh;
        margin-top: 125px;
    }
    .centered-1-tight{
        min-height: auto;
    }
    
    .centered-2{
        margin: 0 auto;
        width: 94.6vw;
        min-height: 90vh;
        margin-top: 118px;
    }

    .centered-3,
    .centered-3-tight{
        margin: 0 auto;
        width: 86.6vw;
        max-width: 1500px;
        min-height: 68vh;
        margin-top: 20vh;
    }
    
    .centered-3-tight{
        min-height: 0;
        margin-top: 0;
    }


    .floating-head{
        position: absolute;
        top: 180px;
        left: 8.8vw;
        z-index: 0;
        display: block;
    }

    .border-top{
        border-top: 1px solid var(--border-color);
    }

    .bisque{
        color: var(--bisque);
    }

    .slant{
        font-style: italic;
    }

    .padding-dienst{
        padding: 3.2vw;
    }

    .rounded-box{
        border-radius: 12px;
    }

    .accent,
    .accent-light,
    .accent-thin{
        color: var(--accent1);
    }
    .accent-light{
        font-family: 'Rubik', sans-serif;
        font-weight: 200;
    }
    .accent-thin{
        font-family: 'Rubik', sans-serif;
        font-weight: 200;
    }

    .dim{
        opacity: 0.7;
    }

    .author{
        font-size: 17px;
        font-weight: 600;
    }

    .quotation{
        font-size: 32px;
        line-height: 22px;
    }

    h1{
        margin: 0;
        padding: 5.4vh 0 0 0;
        font-family: 'Rubik', sans-serif;
        font-weight: 300;
        font-size: 32px;
        line-height: 105%;
        letter-spacing: -0.015em;
        text-transform: none;
        opacity: 0.9;
        transition: all 120ms ease;
    }
    
    h2,
    h2.small{
        margin: 0;
        padding: 0;
        font-family: 'Rubik', sans-serif;
        font-weight: 600;
        font-size: 55px;
        line-height: 105%;
        letter-spacing: -0.043em;
        text-transform: uppercase;
    }
    h2.small{
        font-size: 34px;
    }
    h2.home{
        font-size: 62px;
    }
    
    h3,
    h3.accent{
        margin: 0;
        padding: 0;
        font-family: 'Rubik', sans-serif;
        font-weight: 600;
        font-size: 23px;
        letter-spacing: -0.024em;
        text-transform: uppercase;
        line-height: 130%; 
    }
    h3.accent{
        color: var(--accent1);
    }

    .menu{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: flex;
        z-index: 99;
        background-color: var(--grey-bg);
        font-size: 1.5vw;
        letter-spacing: -0.024em;
        color: var(--white);
        border-bottom: 0px solid var(--grey-shade);
    }

    .menu .location{
        width: 50vw;
        padding: 2.4vh 5.2vw;
    }

    .menu .contact{
        width: 50vw;
        text-align: right;
        display: flex; 
		justify-content: flex-end; 
		align-items: center; 
    }

    .menu .contact a:link,
    .menu .contact a:active,
    .menu .contact a:visited,
    .menu .contact a:hover{
        padding: 2.4vh 6.2vw;
        font-family: 'Rubik', sans-serif;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: -0.022em;
        transition: all 320ms ease;
        color: var(--accent1);
        border-bottom: 2px solid var(--white);
    }
    .menu .contact a:hover{
        color: var(--white);
        border-bottom: 2px solid var(--white);
    }

    .menu-extended{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 101;
        width: 100%;
        height: 116px;
        display: flex;
        z-index: 99;
        background-color: var(--grey-bg);
        font-size: 18px;
        font-weight: 200;
        letter-spacing: -0.04em;
        color: var(--white);
        border-bottom: 1px solid var(--grey-shade);
    }

    .menu-extended a,
    .menu-extended a.nav-menu:link,
    .menu-extended a.nav-menu:visited,
    .menu-extended a.nav-menu:active,
    .menu-extended a.nav-menu:hover{
        color: var(--white);
        border-bottom: 1px solid var(--grey-bg);
        transition: all 320ms ease;
    }
    .menu-extended a.nav-menu-active:link,
    .menu-extended a.nav-menu-active:visited,
    .menu-extended a.nav-menu-active:active,
    .menu-extended a.nav-menu-active:hover,
    .menu-extended a.nav-menu:hover{
        color: var(--bisque);
        border-bottom: 1px solid var(--bisque);
        transition: all 320ms ease;
    }

    .menu-extended a.nav-menu-cta:link,
    .menu-extended a.nav-menu-cta:visited,
    .menu-extended a.nav-menu-cta:active,
    .menu-extended a.nav-menu-cta:hover{
        background-color: var(--bisque);
        color: var(--grey-dark);
        border: 1px solid var(--bisque);
        padding: 7px 14px;
        border-radius: 8px;
        transition: all 320ms ease;
    }
    .menu-extended a.nav-menu-cta:hover{
        background-color: var(--grey-bg);
        color: var(--white);
        border: 1px solid var(--bisque);    
    }

    .menu-extended .logo{
        width: 30vw;
        font-size: 23px;
        padding-left: 6.7vw;
        text-align: left;
        font-weight: 600;
        letter-spacing: -0.014em;
        display: flex; 
		justify-content: flex-start; 
		align-items: center;  
    }

    .menu-extended .navigator{
        width: 70vw;
        padding-right: 6.7vw;
        text-align: right;
        font-weight: 500;
        letter-spacing: 0.001em;
        display: flex; 
		justify-content: flex-end; 
		align-items: center;  
    }

    .menu-extended .navigator .links > div{
        padding-left: 3.1vw;
    }

    .menu-extended .navigator .links{
        display: block; 
    }
    .menu-extended .navigator .hamburger{
        display: none; 
    }
    .menu-extended .navigator .hamburger a{
        font-size: 25px;
        color: var(--white);
        text-decoration: none;
        border: 0;
    }

    .hamburger-menu{
        position: fixed;
        top: 117px;
        left: 0;
        z-index: 100;
        width: 100vw;
        padding: 10.4vh 4.4vw; 
        background-color: var(--grey-bg);
        font-size: 78px;
        font-weight: 500;
        text-align: right;
    }

    .hamburger-menu a:link,
    .hamburger-menu a:visited,
    .hamburger-menu a:active,
    .hamburger-menu a:hover{
        color: var(--white);
        letter-spacing: -0.031em;
    }
    .hamburger-menu a:active,
    .hamburger-menu a:hover{
        color: var(--bisque);
    }

    .hamburger-menu .item{
        padding-bottom: 34px;
    }

    .hamburger-hidden{
        height: 0;
        top: 110vh;
        transition: all 520ms ease;
    }
    .hamburger-visible{
        height: 100vh;
        top: 116px;
        transition: all 520ms ease;
    }

    .footer-menu{
        border-top: 1px solid var(--grey-dark);
        font-weight: 400;
        font-size: 17px;
        padding: 2.4vh 6.7vw;
    }
    .footer-menu .footer-grid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .footer-menu .footer-grid .logo{
        font-weight: 600;
        letter-spacing: -0.014em;
    }
    .footer-menu .footer-grid .locatie{
        text-align: center;
    }
    .footer-menu .footer-grid .btw{
        text-align: right;
    }

    .hero{
        width: 100vw;
        height: 100vh;
        display: flex; 
		justify-content: center; 
		align-items: center; 
        padding: 0 5.1vw;
    }

    .hero .content,
    .hero .content-compact{
        position: absolute;
        padding-top: 30.8vh;
    }
    .hero .content-compact{
        padding-top: 10.8vh;
    }

    .profile-container{
        position: absolute;
        top: 2.0vh;
        right: 1.2vw;
    }

    .section,
    .section-with-border,
    .section-compact{
        padding: 5.2vh 0 16.2vh 0;
        line-height: 156%;
    }
    .section-with-border{
        border-top: 1px solid var(--grey);
    }
    .section-compact{
        padding: 5.2vh 0;
    }
    
    .subsection{
        padding: 0 0 2.4vh 0;
    }

    .project{
        padding: 0 0 3.2vh 0;
    }

    .project-grid,
    .project-grid-recent{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 36px;
    }
    .project-grid-recent{
        grid-template-columns: repeat(2, 1fr);
    }

    .project-item{
        position: relative;
        background-color: var(--grey-dark);
        color: var(--white);
        border-radius: 16px;
        height: 54vh;
        min-height: 400px;
        overflow: hidden;
    }

    .project-item .dark {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3); 
        transition: all 600ms ease;
        overflow: hidden;
    }

    .project-item .project-cta {
        opacity: 0.5;
        transition: all 420ms ease;
        font-size: 14px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }
    .project-item .project-arrow {
        opacity: 0;
        transition: all 320ms ease;
        font-size: 32px;
        position: absolute;
        right: 70px;
        top: 30%;
    }

    .project-item:hover .dark {
        background: rgba(0, 0, 0, 0.7); 
    }
    .project-item:hover .project-cta {
        opacity: 1;
        letter-spacing: 0.24em;
        transition: all 320ms ease;
    }
    .project-item:hover .project-title {
        font-size: 35px;
        letter-spacing: 0.01em;
        transition: all 420ms ease;
    }
    .project-item:hover .project-arrow {
        opacity: 1;
        transition: all 320ms ease;
        right: 50px;
    }

    .project-item .project-title{
        position: absolute;
        color: white;
        font-size: 35px;
        text-align: center;
        width: 100%;
        top: 44%;
        letter-spacing: 0em;
        transform: translateY(-50%);
        z-index: 1;
        transition: all 320ms ease;
        will-change: transform;
        transform: translateZ(0);
    }

    .project-tags{
        position: absolute;
        bottom: 7vh;
        width: 100%;
        text-align: center;
        padding: 24px;
    }

    .project-tags .tag,
    .project-tag{
        display: inline-block;
        padding: 6px 7px;
        font-size: 18px;
        border-radius: 5px;
        background-color: none;
        border: 1px solid var(--white);
        margin-left: 3px;
        margin-right: 3px;
        margin-bottom: 7px;
        font-weight: 400;
        line-height: 100%;
        color: var(--white-80);
        letter-spacing: 10;
    }
    
    .project-title{
        position: absolute;
        color: var(--base-color);
        bottom: 14vh;
        width: 100%;
        text-align: center;
        font-weight: 500;
        font-size: 34px;
    }

    .project-hero{
        position: relative;
        height: 48vh;
    }

    .project-hero .dark {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.35); 
        overflow: hidden;
    }
    .project-hero .titles {
        position: absolute;
        z-index: 3;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .project-inleiding{
        font-size: 26px;
        line-height: 130%;
        font-weight: 400;
    }
    
    a.project-cta:link,
    a.project-cta:active,
    a.project-cta:visited,
    a.project-cta:hover{
        font-size: 22px;
        letter-spacing: -0.043em;
        font-weight: 500;
        color: var(--grey-dark);
        padding: 16px 24px;
        background-color: var(--bisque);
        border-radius: 8px;
        text-decoration: none;
        border: 0;
        transition: all 320ms ease;
    }
    a.project-cta:hover{
        padding: 16px 24px 16px 48px;
    }

    .cp-grid-content{ grid-area: grid-content; }
    .cp-grid-menu{ grid-area: grid-menu; }
    .contentpagina-grid{ 
        display: grid; 
        grid-template-areas: 'grid-menu grid-content';
        grid-template-columns: 390px 1fr;
        column-gap: 48px;
    }

    .diensten-grid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 48px;
    }

    .service-icon{
        width: 15vw;
        max-width: 90px;
        padding-left: 2vw;
        margin-top: -23px;
    }

    .arrow-icon{
        padding-right: 0.2vw;
    }

    .contact-icon{
        padding-right: 22px;
    }
    
    .fwd-icon{
        padding-left: 1.3vw;
    }
    
    .general-icon{
        padding-right: 1.3vw;
    }

    a:link,
    a:active, 
    a:visited,
    a:hover{
        color: var(--bisque);
        text-decoration: none;
        padding-bottom: 2px;
        border-bottom: 2px solid var(--grey-dark);
        transition: all 320ms ease;
    }
    a:hover{
        border-bottom: 2px solid var(--bisque);
        transition: all 320ms ease;
    }
    
    a.small-white:link,
    a.small-white:active, 
    a.small-white:visited,
    a.small-white:hover{
        color: var(--white);
        font-size: 16px;
        text-decoration: none;
        border-bottom: 1px solid var(--white);
        transition: all 320ms ease;
    }

    a.contact:link,
    a.contact:active, 
    a.contact:visited,
    a.contact:hover{
        color: var(--accent1);
        text-decoration: none;
        border-bottom: 2px solid var(--accent1);
        transition: all 320ms ease;
    }
    a.contact:hover{
        color: var(--accent2);
        border-bottom: 2px solid var(--white);
    }

    a.accent:link,
    a.accent:active, 
    a.accent:visited,
    a.accent:hover{
        color: var(--accent1);
        text-decoration: none;
        border-bottom: 2px solid var(--accent1);
        transition: all 320ms ease;
    }
    a.accent:hover{
        color: var(--accent2);
        border-bottom: 2px solid var(--white);
    }
    
    a.topmenu:link,
    a.topmenu:active, 
    a.topmenu:visited,
    a.topmenu:hover{
        color: var(--accent1);
        text-decoration: none;
        border-bottom: 2px solid var(--accent1);
        transition: all 320ms ease;
    }
    a.topmenu:hover{
        color: var(--accent2);
        border-bottom: 2px solid var(--white);
    }

    a.project-url:link,
    a.project-url:active,
    a.project-url:visited,
    a.project-url:hover{
        color: var(--white-60);
        text-decoration: none;
        font-size: 4.4vw;
        font-family: 'Rubik', sans-serif;
        font-weight: 700;
        letter-spacing: -0.032em;
        text-transform: uppercase;
        border-bottom: 3px solid transparent;
        transition: all 120ms ease;
    }
    a.project-url:hover{
        color: var(--accent1);
        border-bottom: 5px solid var(--accent2);
    }
    
    .profile-img-large{ 
        height: 168px; width: 168px;   
    }
    
    .profile-img-small{ 
        height: 142px; width: 142px;  
    }
    
    .profile-img-x-small{ 
        height: 82px; width: 82px;  
    }

    .accordion-title{
        font-family: 'Rubik', sans-serif;
        font-weight: 400;
        letter-spacing: -0.023em;
        padding: 0.6em 0.1em;
        transition: all 320ms ease;
    }
    .accordion-title:hover,
    .accordion-title.active{
        padding: 0.6em 0.6em;
        color: var(--bisque);
        cursor: pointer; 
        background-color: var(--grey-dark);
        transition: all 320ms ease;
    }
    .accordion-panel{
        display: none;
        font-size: 18px;
        line-height: 1.4em;
        padding: 1.2em 0.8em;
        background-color: var(--grey-dark);
        transition: all 320ms ease;
    }
    .accordion-panel.active{ 
        display: block;
        transition: all 320ms ease;
    }
    .accordion-panel a:link,
    .accordion-panel a:visited,
    .accordion-panel a:hover,
    .accordion-panel a:active{
        color:                                      var(--dark-grey);
        text-decoration:                            none;
        border-bottom:                              1px solid var(--dim-grey);
    }

    .case-grid{
        display: grid;
        grid-template-columns: repeat(1, 1fr); 
        column-gap: 2vw;
        row-gap: 2vh;
    }
    
    .case-grid .case{
        height: 45vh;
        background-color: var(--grey-dark);
        color: var(--white);
        padding: 2vh 4vw;
        position: relative;
    }

    .case-grid .case .klant{
        font-family: 'Rubik', sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        font-size: 34px;
    }

    .services{
        padding-left: 2px;
        padding-bottom: 32px;
    }

    .required-field{
        font-size: 10px;
    }

    .input-titel{
        font-weight: 400;
        padding-top: var(--spacer2);
        padding-bottom: 4px;
    }

    .input-field,
    .input-area{
        width: 100%;
        border: none;
        background-color: var(--white);
        color: var(--grey-dark);
        padding: 10px 16px;
        border-radius: 4px;
        font-size: 19px;
        font-weight: 600;
    }
    .input-area{
        padding: 16px;
        height: 22vh;
    }
    
    .input-alert{
        color: var(--alert);
    }

    .input-submit{
        background-color: var(--bisque);
        color: var(--grey-dark);
        font-size: 20px;
        font-weight: 600;
        padding: 14px 48px;
        border-radius: 8px;
        border: none;
        transition: all 320ms ease;
    }
    .input-submit:hover{
        border-radius: 12px;
        padding: 14px 52px;
    }

    .submit-container{
        font-weight: 500;
        color: var(--bisque);
    }

    .font-table{
        font-size: 16px;
        font-weight: 500;
        line-height: 124%;
    }

}

@media screen and (max-width: 1920px) {

    .project-grid{
        grid-template-columns: repeat(2, 1fr);
    }

}

@media screen and (max-width: 1520px) {

    .centered{
        width: calc(100vw - (8*44px));
    }

}

@media screen and (max-width: 1302px) {

    .menu{
        font-size: 1.7vw;
    }
    
    h2{
        font-size: 42px;
    } 
    h2.small{
        font-size: 34px;
    }

    .project-grid,
    .project-grid-recent{
        grid-template-columns: repeat(1, 1fr);
        gap: 42px;
    }

    .project-item{
        height: 50vh;
    }

    .project-item .project-title{
        font-size: 28px;
    }

    .project-item:hover .project-title {
        top: 42%;
    }

    .project-tags{
        bottom: 5vh;
    }

}

@media screen and (max-width: 1180px){

    .menu-extended .navigator .links{
        display: none;
    }

    .menu-extended .navigator .hamburger{
        display: block;
    }
}

@media screen and (max-width: 1080px){

    .body-top-padded{
		font-size: 2.8vw;
    }

    .menu{
        font-size: 2.1vw;
    }

    .hero{
        height: 92vh;
    }

    .content{
        padding-top: 22vh;
    }
    
    .project{
        padding: 0 0 4.1vh 0;
    }
    
    a.project-url:link,
    a.project-url:active,
    a.project-url:visited,
    a.project-url:hover{
        font-size: 6.7vw;
    }

    .floating-head{
        display: none;
    }

    .footer-menu .footer-grid{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .footer-menu .footer-grid .logo,
    .footer-menu .footer-grid .locatie,
    .footer-menu .footer-grid .btw{
        text-align: center;
    }

    .contentpagina-grid{ 
        grid-template-areas: 'grid-content' 'grid-menu';
        grid-template-columns: 1fr;
    }

    .diensten-grid{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 48px;
    }

}

@media screen and (max-width: 840px){

    .body-top-padded{
		font-size: 4.2vw;
    }

    .menu{
        font-size: 3.2vw;
    }

    .hero{
        height: 92vh;
    }

    .content{
        padding-top: 22vh;
    }
    
    .project{
        padding: 0 0 1.1vh 0;
    }

    a.project-url:link,
    a.project-url:active,
    a.project-url:visited,
    a.project-url:hover{
        font-size: 6.7vw;
    }

    .centered-1, 
    .centered-1-tight{ 
        margin: 0 auto;
        width: 88vw;
        min-width: auto;
        margin-top: 125px;
    }

}

@media screen and (max-width: 770px){

    h2.home{
        font-size: 46px;
    }

}

@media screen and (max-width: 640px){

    .body-top-padded{
		font-size: 5.0vw;
    }

    .menu{
        font-size: 4.2vw;
    }

    .hero{
        height: 72vh;
    }

    .content{
        padding-top: 22vh;
    }
    
    .project{
        padding: 0 0 1.1vh 0;
    }

    a.project-url:link,
    a.project-url:active,
    a.project-url:visited,
    a.project-url:hover{
        font-size: 6.7vw;
    }

}