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


    :root{
        --spacer1: 				    4px; 
        --spacer2: 				    8px;
        --spacer3: 				    12px;
        --spacer4: 				    18px;
        --spacer5: 				    28px;
        --spacer6: 				    56px;
        --spacer7: 				    80px;

        --spacer-s:                 12px; 
        --spacer-m:                 24px; 
        --spacer-l:                 32px; 
        --spacer-xl:                96px;

        --menu-spacer:              24px;
        --menu-height:              133px;
        --centered-width:           79vw;
    }
    
    html,
    body{                           
        padding:                    0;
    }

    .centered{
        margin: 0 auto;
        width: var(--centered-width);
    }

    .home-hero{
        width:                          100vw;
        padding:                        0 var(--spacer-xl) var(--spacer-l) var(--spacer-xl);         
    }
    
    .g-home-intro h1{
        font-size:                      40px;
        font-family:                   var(--font-neue-bold);
        line-height:                    132%;
        padding-top:                    48px;
        padding-bottom:                 var(--spacer-m);
        width: 100%;
        max-width: 450px;                     
    }
    
    .g-home-intro .subtitel{
        font-size:                      23px;
        font-family:                   var(--font-neue-regular);
        color:                          var(--orange);
        padding-bottom:                 var(--spacer-l);
        
    }
    
    .g-home-intro .introductie{
        font-family:                   var(--font-neue-regular);
        font-size:                      17px;
        line-height:                    158%;
        width: 100%;
        max-width: 520px;             
    }

    .g-home-intro {                     grid-area: home-intro; line-height: 172%; padding-top: 4vh; }
    .g-home-image {                     grid-area: home-image; aspect-ratio: 1/1; }
    .home-grid{
        display:                        grid;
        padding:                        var(--spacer-l) 0 0 0;
        grid-template-areas:            'home-intro home-image';
        grid-template-columns:          1fr 1fr;
        column-gap:                     var(--spacer-s);
    }

    .blog-hero{
        width:                          100vw;
        height:                         68vh;
        padding:                        0 var(--spacer-xl) 0 var(--spacer-xl);     
    }

    .blog-hero-grid{
        width:                          100%;
        height:                         68vh;
        display:                        grid;
        grid-template-areas:            'blog-hero-title blog-hero-img';
        grid-template-columns:          1fr 2fr;
    }
    .blog-hero-grid .gs-blog-hero-title {           grid-area: blog-hero-title; display: flex; justify-content: flex-start; align-items: center;  }
    .blog-hero-grid .gs-blog-hero-img {             grid-area: blog-hero-img; min-height: 45vh; background-size: contain; background-repeat: no-repeat; background-position: center;  } 
    
    .blog-hero-grid .gs-blog-hero-title .blogs-txt{
        font-family:                    var(--font-neue-bold);
        font-size:                      32px; 
    }
    .blog-hero-grid .gs-blog-hero-title .for-txt{
        font-family:                    var(--font-dunbar-light);
        font-style: italic;
        font-size:                      32px; 
        padding:                        var(--spacer-s) 0;
    }
    .blog-hero-grid .gs-blog-hero-title .breakfast-txt{
        font-family:                    var(--font-neue-bold);
        font-size:                      32px; 
    }

    .blog-header{
        width:                          100vh;
    }

    .blog-header .container{
        width:                          60%;
    }

    .blog-header .container.h1{
        font-size:                      32px;
    }

    .blog-teaser{
        padding:                 var(--spacer-l) 0;
    }

    .blog-subtitle .container,
    .blog-teaser .container{
        padding:                        0;         
        width:                          740px;
        margin:                         0 auto;
    }

    .blog-subtitle .container{
        font-size:                      32px;
    }

    .blog-teaser .container{
        border: 1px solid #FFF;
    }

    .blog-teaser .container .date{
        font-size:                      22px;
        font-family:                    var(--font-dunbar-light); 
        color:                          var(--orange);
        padding-bottom:                 var(--spacer-xs);
    }
    .blog-teaser .container .titel{
        font-size:                      22px;
        font-family:                    var(--font-dunbar-medium); 
        color:                          var(--orange);
        padding-bottom:                 var(--spacer-m);
    }
    .blog-teaser .container .teaser-image{
        width:                          100%;
        height:                         42vh;
    }

    .blog-egg-separator{
        height:                         250px;
    }

    .blogpost-container{
        margin:                         0 auto;
        width:                          64vw;
        max-width:                      640px;
        font-size:                      18px;
        font-family:                    var(--font-neue-regular); 
        line-height:                    168%;
        padding-top:                    54px;
    }

    .blogpost-container .blogpost-introductie{
        font-size:                      19px;
        padding:                        var(--spacer-m) 0;
    }
    
    .blogpost-header{
        background-image:               url('/Public/Assets/image/gebroken-ei.png');
        height:                         49vh;
    }
    
    .blogpost-header-container .blog{
        font-size:                      22px;
        font-family:                    var(--font-neue-bold);
        padding:                        var(--spacer-s);
    }

    .blogpost-header-container .titel{
        font-size:                      24px;
        font-family:                    var(--font-dunbar-light);
        color:                          var(--orange);
        padding:                        0 var(--spacer-s) var(--spacer-s) var(--spacer-s);
    }

    .blogpost-header-container .datum{
        font-size:                      14px;
        font-family:                    var(--font-dunbar-regular);
    }
   
    .projecten-introductie{
        margin:                         0 auto;
        width:                          var(--centered-width);
        padding:                        var(--spacer-l) 0 var(--spacer-xl) 0; 
    }

    .projecten-introductie .container{
        font-size:                      17px;
        line-height:                    172%;
        text-align:                     center;
    }

    .project-top-spacer{
        padding-top:                    7vh;
    }

    .project-introductie{
        margin:                         0 auto;
        width:                          var(--centered-width);
        padding:                        0 0 var(--spacer-xl) 0; 
    }

    .project-introductie .container{
        font-family:                    var(--font-neue-bold);       
        font-size:                      23px;
        line-height:                    168%;
        text-align:                     center;
    }

    .project-cta{
        margin:                         0 auto;
        width:                          var(--centered-width);
        padding-bottom:                 var(--spacer-xl); 
    }

    .project-cta .container{
        font-family:                    var(--font-neue-bold);       
        font-size:                      25px;
        line-height:                    178%;
        text-align:                     center;
    }

    .project-cta .container a{
        font-family:                    var(--font-neue-bold);       
        font-size:                      27px;
        text-decoration: none;
        border-bottom: 4px solid #222;
    }

    .project-afbeelding{
        margin:                         0 auto;
        width:                          var(--centered-width);
        max-width:                      800px;
        padding:                        0 0 120px 0;
    }

    .project-afbeelding-square{
        aspect-ratio:                   1/1;
        width:                          100%;
    }

    .grid-afbeelding {                  
        grid-area: img; 
    }

    .grid-hero-container,          
    .grid-caption{          
        grid-area:                      img-caption; 
        font-family:                    var(--font-neue-semibold);       
        font-size:                      17px;
        line-height:                    202%;
        padding:                        var(--spacer-m) var(--spacer-l) var(--spacer-m) var(--spacer-l); 
    }
    .grid-hero-container{
        margin-left:                   -65px;
    }
    .grid-hero-container .titel{         
        font-family:                    var(--font-neue-bold);       
        font-size:                      31px;
        letter-spacing:                 -0.01em;
        line-height:                    112%;
        padding:                        var(--spacer-l) var(--spacer-l) var(--spacer-s) var(--spacer-l); 
        background-color: #FFF;
    }
    .grid-hero-container .voor{         
        font-family:                    var(--font-dunbar-light); 
        font-style: italic;      
        font-size:                      22px;
        letter-spacing:                 -0.01em;
        line-height:                    84%;
        padding:                        var(--spacer-s) 0 var(--spacer-s) var(--spacer-xl); 
    }
    .grid-hero-container .klant{          
        font-family:                    var(--font-neue-regular);       
        font-size:                      22px;
        letter-spacing:                 -0.01em;
        line-height:                    142%;
        padding:                        var(--spacer-s) 0 0 var(--spacer-xl); 
        background-color: #FFF;
    }
    .grid-hero-container .introductie{    
        margin-left:                    8vw;
        padding-left:                   var(--spacer-m);
    }

    .grid-hero-introductie .introductie{
        font-family:                    var(--font-neue-bold);       
        font-size:                      15px;
        letter-spacing:                 0.023em;
        line-height:                    142%;
        padding:                        var(--spacer-m) var(--spacer-l); 
    }

    .grid-afbeelding-links,
    .grid-afbeelding-rechts{
        display:                        grid;
        gap:                            0;
        padding:                        0;
        row-gap:                        0;
        overflow:                       hidden;
    }
    
    .grid-afbeelding-links{
        grid-template-areas:            'img' 'img-caption';
        grid-template-columns:          1fr;
    }

    .grid-afbeelding-rechts{
        grid-template-areas:            'img-caption img';
        grid-template-columns:          1fr 65%;
    }

    .grid-afbeelding-center{
        margin:                         0 auto;
        width:                          65%;
    }

    .project-grid{
        display:                        grid;
        row-gap:                        var(--spacer-s);
        column-gap:                     var(--spacer-s);      
        grid-template-columns:          repeat(6, 1fr);    
        padding:                        0 var(--spacer-) var(--spacer-xl) var(--spacer-m);         
    }

    .project-grid .teaser-square{
        aspect-ratio:                   1/1;
        width:                          100%; 
        position:                       relative;
        background-color:               #EEE;
    }

    .project-grid .teaser-square .title{
        position:                       absolute;
        z-index:                        1;
        bottom:                         var(--spacer-m);
        left:                           0px;
        padding:                        var(--spacer-m) var(--spacer-m);
        font-size:                      27px;
        font-family:                    var(--font-neue-bold);
        letter-spacing:                 -0.023em;
        color:                          #FFF;
        text-align:                     center;
        text-shadow: 2px 2px 6px rgba(0,0,0,0.31); 
    }

    .project-grid .teaser-square .klant{
        position:                       absolute;
        top:                            var(--spacer-m);
        left:                           0px;
        padding:                        0px var(--spacer-m);
        font-size:                      19px;
        font-family:                    var(--font-neue-bold);
        letter-spacing:                 -0.023em;
        color:                          #FFF;
        text-shadow: 2px 2px 2px rgba(0,0,0,0.21); 
    }

    .project-show-all-cta{
        padding:                        0 0 var(--spacer-xl) 0;
        text-align:                     center;
    }

    .project-show-all-cta a{
        font-family:                    var(--font-neue-bold);       
        font-size:                      27px;
        text-decoration: none;
        border-bottom: 4px solid #222;
    }

    .blog-subtitle,
    .services-subtitle,
    .services-summary{
        width:                          100vw;
        padding:                        0 var(--spacer-xl) 54px var(--spacer-xl); 
    }

    .blog-subtitle,
    .services-subtitle .container{
        font-family:                    var(--font-neue-bold);
        font-size:                      32px;
        padding-bottom:                 var(--spacer-m);
    }

    .services-image-wide{
        width:                          100vw;
        height:                         60vh;
        box-shadow: 0 20px 10px -20px rgba(0,0,0,0.05) inset, 0 -20px 10px -20px rgba(0,0,0,0.05) inset;
    }

    .services-grid{
        display:                        grid;
        row-gap:                        var(--spacer-s);
        column-gap:                     var(--spacer-s);      
        grid-template-columns:          repeat(5, 1fr);    
        padding:                        0 0 var(--spacer-xl) 0;       
    }
    
    .gs-enum {                          grid-area: enum; }
    .gs-spacer {                        grid-area: spacer; }
    .gs-summary {                       grid-area: summary; }
    .services-grid .grid-service{
        font-family:                    var(--font-neue-bold);
        border-left:                   1px solid #222;    
        padding:                        var(--spacer-l) var(--spacer-s) var(--spacer-m) var(--spacer-s);
        grid-template-areas:            'enum' 'spacer' 'summary';
        grid-template-columns:          1fr;
    }
    
    .services-grid .grid-service .enum{
        font-family:                    var(--font-dunbar-medium);
        font-size:                      112px;
        padding-bottom:                 0px;
    }
    
    .services-grid .grid-service .titel{
        font-size:                      20px;
        font-family:                    var(--font-dunbar-medium);
        letter-spacing:                 -0.023em;
    }
    
    .services-grid .grid-service .gs-spacer{
        height:                         22vh;
    }
    
    .services-grid .grid-service .summary{
        font-size:                      16px;
        font-family:                    var(--font-dunbar-medium);
    }

    .gs-blog-subtitle {                 grid-area: blog-subtitle; }
    .gs-blog-timer {                    grid-area: blog-timer; text-align: right; }
    .blog-subtitle-grid{
        display:                        grid;
        font-family:                    var(--font-neue-bold);
        padding:                        0 0 var(--spacer-m) 0;
        grid-template-areas:            'blog-subtitle blog-timer';
        grid-template-columns:          1fr 200px;
    }

    .footer{
        margin:                             0 auto;
        max-width:                          550px;
        padding:                            var(--spacer-l) 0 var(--spacer-m) 0;
    }

    .footer .container{
        text-align:                         left;
        width:                              100%;
    } 

    .privacy-container,
    .cookies-container{
        margin:                         0 auto;
        width:                          var(--centered-width);
        max-width:                      720px;
        padding:                        var(--spacer-l) 0 var(--spacer-xl) 0; 
    }

    .over-container,
    .contact-container{
        width:                          100vw;
        padding:                        var(--spacer-l) var(--spacer-xl) var(--spacer-xl) var(--spacer-xl);         
    }

    .gs-over-copy {                     grid-area: over-copy; line-height: 172%; }
    .gs-over-profile {                  grid-area: over-profile; min-height: 500px; }
    .over-grid{
        display:                        grid;
        padding:                        var(--spacer-l) 0 var(--spacer-m) 0;
        grid-template-areas:            'over-copy over-profile';
        grid-template-columns:          1fr 1fr;
        column-gap:                     var(--spacer-l);
    }
    
    .gs-contact-form {                  grid-area: contact-form; }
    .gs-contact-copy {                  grid-area: contact-copy; font-family: var(--font-neue-semibold); line-height: 172%; }
    .contact-grid{
        display:                        grid;
        padding:                        var(--spacer-l) 0 var(--spacer-m) 0;
        grid-template-areas:            'contact-form contact-copy';
        grid-template-columns:          1fr 1fr;
        column-gap:                     var(--spacer-l);
        row-gap:                        var(--spacer-xl);
    }
    .contact-grid-copy-only{
        display:                        grid;
        padding:                        var(--spacer-l) 0 var(--spacer-m) 0;
        grid-template-areas:            'contact-copy';
        grid-template-columns:          1fr;
        column-gap:                     var(--spacer-l);
        row-gap:                        var(--spacer-xl);
    }

    .contact-subtitle-grid{
        max-width:                      600px;
        display:                        grid;
        grid-template-areas:            'contact-subtitle contact-eggsy';
        grid-template-columns:          1fr 180px;
        column-gap:                     var(--spacer-m);
        row-gap:                        0;
    }
    .contact-subtitle-grid .gs-contact-subtitle {       grid-area: contact-subtitle; }
    .contact-subtitle-grid .gs-contact-eggsy {          grid-area: contact-eggsy; text-align: left; min-height: 100px; } 

    .over-header h1,
    .contact-header h1,
    .contact-header h1,
    .privacy-header h1,
    .cookies-header h1{
        font-family:                   var(--font-neue-bold);
        font-size:                      33px;
        line-height:                    132%;
        padding-top:                    11vh;
        padding-bottom:                 var(--spacer-s);
    }
    
    .gs-contact-subtitle h2,
    .contact-header h2,
    .privacy-header h2,
    .cookies-header h2{
        font-family:                    var(--font-neue-medium);
        font-size:                      22px;
        line-height:                    149%;
        color:                          var(--orange);
        padding-bottom:                 var(--spacer-l);
        letter-spacing:                 -0.026em;
    }
    .contact-header h2{
        font-size:                      20px;
        font-family:                    var(--font-dunbar-light);
        letter-spacing:                 -0.016em;
        text-align:                     right;
    }

    .over-copy,
    .contact-copy,
    .privacy-copy,
    .cookies-copy{
        font-family:                   var(--font-neue-semibold);
        font-size:                      19px;
        line-height:                    172%;
    }
    

    .desktop-only{                  
        display: block; 
    }

    .desktop-tablet-only{           
        display: block; 
    }

    .wide-screens-only{
        display: inline-block;
    }

    .tablet-only{                   
        display: none; 
    }

    .tablet-mobile-only{            
        display: none; 
    }

    .mobile-only{                   
        display: none; 
    }

    .reveal-y{
		position:                   relative;
		transform:                  translateY(86px);
		opacity:                    0;
		transition:                 820ms all ease;
	}

	.reveal-y.visible{
		transform:                  translateY(0);
		opacity:                    1;
	}

    .back-to-top-floating,
    .back-to-top-floating-hidden{
        position:                   fixed;
        z-index:                    99999;
        right:                      5vw;
        bottom:                     10vh;
        height: 				    62px; 
		width: 					    62px; 
		border-radius: 			    50%; 
        font-size:                  32px;
		display: 					inline-block; 
        display: 					flex; 
		justify-content: 			center; 
		align-items: 				center; 
		-webkit-box-shadow: 	    0px 0px 39px 0px rgba(0,0,0,0.01); 
		-moz-box-shadow: 			0px 0px 39px 0px rgba(0,0,0,0.01); 
		box-shadow: 				0px 0px 39px 0px rgba(0,0,0,0.01); 
        background-color:           #222;
        color:                      #FFF;
        transition:                 all 420ms;
    }
    .back-to-top-floating-hidden{
        background-color:           #FFF;
        color:                      #FFF;
        bottom:                     -10vh; 
        transition:                 all 620ms;
    }
    .back-to-top-floating:hover{
		-webkit-box-shadow: 	    0px 0px 39px 0px rgba(0,0,0,0.11); 
		-moz-box-shadow: 			0px 0px 39px 0px rgba(0,0,0,0.11); 
		box-shadow: 				0px 0px 39px 0px rgba(0,0,0,0.11); 
        transition:                 all 420ms;
    }

    .text-shadow{ 				
        text-shadow: 2px 2px 6px rgba(0,0,0,0.31); 
    }

    .input-group{
        padding-bottom:         var(--spacer-s);
    }

    .input{ 					
		color: 					#FFF;
		background-color: 		var(--base);
		font-family: 			var(--font-neue-bold);
		font-size: 				18px;
		padding: 				var(--spacer-s);
		border: 				0px;
		outline:   				none !important;
	}
	
	input::placeholder,
	textarea::placeholder{  
        font-family: 			var(--font-neue-regular);
	}

    .submit-group{
        text-align:             center;
        padding-top:            var(--spacer-s);
    }

	.submit{ 					
		background-color: 		var(--orange);
		color: 					#FFF;
		font-family: 			var(--font-dunbar-bold);
		font-size: 				18px;
		padding: 				var(--spacer-s) var(--spacer-m);
		border:  				0px;
		outline:   				none !important;
		text-transform: 		uppercase;
		letter-spacing: 		0.035ems;
		transition: 			background-color 240ms;
        -webkit-box-shadow: 	0px 0px 39px 0px rgba(0,0,0,0.11); 
		-moz-box-shadow: 		0px 0px 39px 0px rgba(0,0,0,0.11); 
		box-shadow: 			0px 0px 39px 0px rgba(0,0,0,0.11); 

	}
	.submit:hover{ 					
		background-color: 		var(--orange);
        color: 					#FFF;
		border:  				0px;
		transition: 			background-color 240ms, border 840ms;
        -webkit-box-shadow: 	0px 0px 39px 0px rgba(0,0,0,0.21); 
		-moz-box-shadow: 		0px 0px 39px 0px rgba(0,0,0,0.21); 
		box-shadow: 			0px 0px 39px 0px rgba(0,0,0,0.21); 
	}


}





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

    .project-grid{
        grid-template-columns:          repeat(5, 1fr);    
        padding:                        0 var(--spacer-l) var(--spacer-xl) var(--spacer-l);         
    }

}





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

    .project-grid{
        grid-template-columns:          repeat(4, 1fr);    
        padding:                        0 var(--spacer-l) var(--spacer-xl) var(--spacer-l);         
    }

}





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

    .desktop-only{                  
        display: none; 
    }

    .desktop-tablet-only{           
        display: block; 
    }

    .wide-screens-only{
        display: inline-block;
    }

    .tablet-only{                   
        display: block; 
    }

    .tablet-mobile-only{            
        display: block; 
    }

    .mobile-only{                   
        display: none; 
    }

}



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

    .services-grid{
        grid-template-columns:          repeat(3, 1fr);    
    }

    .services-grid .grid-service .gs-spacer{
        height:                         8vh;
    }

}





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

    .project-grid{
        grid-template-columns:          repeat(3, 1fr);    
        padding:                        0 var(--spacer-l) var(--spacer-xl) var(--spacer-l);         
    }

    .over-grid{
        grid-template-areas:            'over-profile' 'over-copy' ;
        grid-template-columns:          600px;
        row-gap:                        var(--spacer-l);
    }
    
    .contact-grid{
        grid-template-areas:            'contact-form' 'contact-copy';
        grid-template-columns:          600px;
        row-gap:                        var(--spacer-l);
    }
    .contact-grid-copy-only{
        grid-template-areas:            'contact-copy';
        grid-template-columns:          600px;
        row-gap:                        var(--spacer-l);
    }

}



/* nav switch */
@media screen and (max-width: 1070px){

    .g-home-intro {                     padding-top: 2vh; }
    .services-image-wide{               background-position: 25% 0; }

    .blog-subtitle,
    .services-subtitle,
    .services-summary{
        width:                          100vw;
        padding:                        0 var(--spacer-l) var(--spacer-l) var(--spacer-l);         
    }

    .blog-hero,
    .blog-teaser .container,
    .blogpost-container,
    .home-hero,
    .over-container,
    .contact-container,
    .privacy-container,
    .cookies-container{
        margin:                         0;
        max-width:                      100%;
        width:                          100%;
        padding:                        0 var(--spacer-l) var(--spacer-xl) var(--spacer-l);         
    }

    .blogpost-container{
        padding-top:                    var(--spacer-s);
    }

    .blogpost-header{
        background-image:               url('/Public/Assets/image/gebroken-eischaal.png?r=1812231346');
        height:                         50vh;
    }


    .blog-hero-grid{
        height:                         80vh;
    }

    .blog-hero-grid{
        grid-template-areas:            'blog-hero-title' 'blog-hero-img';
        grid-template-columns:          1fr;
    }
    .blog-hero-grid .gs-blog-hero-title {           grid-area: blog-hero-title; display: flex; justify-content: center; align-items: center;  }
    .blog-hero-grid .gs-blog-hero-img {             grid-area: blog-hero-img; min-height: 55vh; background-size: contain; background-repeat: no-repeat; background-position: top;  } 
    .blog-hero-grid .gs-blog-hero-title .blogs-txt{
        font-family:                    var(--font-neue-bold);
        font-size:                      28px; 
        text-align: center;
    }
    .blog-hero-grid .gs-blog-hero-title .for-txt{
        font-family:                    var(--font-dunbar-light);
        font-size:                      28px; 
        text-align: center;
    }
    .blog-hero-grid .gs-blog-hero-title .breakfast-txt{
        font-family:                    var(--font-neue-bold);
        font-size:                      28px; 
        text-align: center;
    }

    .contact-header h2{
        text-align:                     left;
    }

}



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

    .home-grid{
        grid-template-areas:            'home-image' 'home-intro';
        grid-template-columns:          1fr;
        column-gap:                     var(--spacer-s);
    }

}



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

    :root{
        --centered-width:           100vw;
    }
    

    .project-grid{
        grid-template-columns:          repeat(2, 1fr);    
        padding:                        0 1vw var(--spacer-xl) 1vw;         
    }
    
    .project-introductie{
        margin:                         0 auto;
        width:                          100%;
        padding:                        0 var(--spacer-l) var(--spacer-xl) var(--spacer-l);
    }

    .project-introductie .container{
        text-align:                     center;
    }

    .project-afbeelding{
        margin:                         0 auto;
        width:                          100%;
        padding:                        0 var(--spacer-l) var(--spacer-xl) var(--spacer-l);
    }

    .back-to-top-floating,
    .back-to-top-floating-hidden{
        right:                          var(--spacer-l);
    }

}




@media screen and (max-width: 810px){
    
    .services-grid{
        grid-template-columns:          repeat(2, 1fr);    
    }
    
}





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

    .home-introductie .intro-container{
        width: 100%;
        padding: 0 var(--spacer-m);
        font-size: 24px;
    }

    .grid-afbeelding-links{
        grid-template-areas:            'img' 'img-caption';
        grid-template-columns:          1fr;
    }

    .grid-afbeelding-rechts{
        grid-template-areas:            'img-caption' 'img';
        grid-template-columns:          1fr;
    }

    .grid-afbeelding-center{
        margin:                         0 auto;
        width:                          98%;
    }

}





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

    .footer{
        margin: 0 auto;
        width: 100%;
        padding: 0 var(--spacer-l) var(--spacer-s) var(--spacer-l);
    }

    .over-grid{
        grid-template-areas:            'over-profile' 'over-copy' ;
        grid-template-columns:          1fr;
        row-gap:                        var(--spacer-l);
    }

    .contact-grid{
        grid-template-areas:            'contact-form' 'contact-copy';
        grid-template-columns:          1fr;
    }

    .contact-grid-copy-only{
        grid-template-areas:            'contact-copy';
        grid-template-columns:          1fr;
    }

}



@media screen and (max-width: 593px){
    
    .services-grid{
        grid-template-columns:          repeat(2, 1fr);    
    }
    
}



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

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

}



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

    .contact-subtitle-grid{
        display:                        grid;
        grid-template-areas:            'contact-subtitle' 'contact-eggsy';
        column-gap:                     0;
        row-gap:                        0;
        grid-template-columns:          1fr;
    }

}



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

    .desktop-only{                  
        display: none; 
    }

    .desktop-tablet-only{           
        display: none; 
    }

    .wide-screens-only{
        display: none;
    }

    .tablet-only{                   
        display: none;
    }

    .tablet-mobile-only{            
        display: block; 
    }

    .mobile-only{                   
        display: block; 
    }
 
}