.sans {
		font-family: 'Inter','Helvetica Neue','Franklin Gothic','Noto Sans',sans-serif;
            
	}
	
	a, a:link, a:visited, a:active {
		color: royalblue;
		text-decoration: underline;
	}
	a:hover {
		text-decoration: underline;
	}
	
	body {
            background-color: lavender;
            color: darkslategrey;
            font-family: 'Palatino','Cambria','Noto Serif',serif;
            line-height: 1.25;
            -webkit-text-size-adjust: 100%;
            background-size: 100% 134%;
            /* ipad pro overflow */
            background-repeat: no-repeat;
            padding: 0;
            text-rendering: geometricPrecision;
            -webkit-font-smoothing: antialiased;
            /* old Androids */
        }
	td {
		vertical-align: text-top;
	}
        .wrapper {
            /* iphone notch */
            padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
            
        }
        
        .content {
            z-index: 0;
            position: relative;
            
		
        }

		#masthead {            
            background-size: cover;
            background-repeat: no-repeat;
            border-radius: 16px 16px 0 0;
        }
        
        #sitelogo {
			padding: 1em;
        }
        
        #sitelogo a {
			display: block;
			text-align: center;
        }
        
        #sitelogo img {
            aspect-ratio: auto;
            padding: 1em;
        }
        
        header, main, footer {
			margin: 0 auto;
            background-color: white;
        }
        
        #homebanner, #banner {
			padding: 0;
			margin: 0 auto;
        }
        #homebanner img , #banner img {
			margin: 0 auto;
			padding: 0;
			border: none;
        }
        #mainhome {
          column-count: 3;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
        
        #mainhome #contact table tr td:first-child {
			font-style: italic;
			padding-right: 0.5em;
        }
        
        .columnhome {
          padding: 1em;
          margin: 0 auto;
        }
        
        .columnhome h3 {
			margin: 0 0 0.5em;
			color: royalblue;
        }
        
        #maindiensten h2 {
			margin: 0 1.25em;
			padding: 1em 0 0;
        }
        #diensten {
			padding: 1em 0;
        }
        
        #diensten > h2, #diensten > div, #diensten > p {
			margin: 0 1em;
        }
        
        #diensten {
          column-count: 2;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
        
        #diensten table h4 {
			margin: 1em 0 0;
        }
        #diensten table tr td {
			padding-right: 1em;
        }
        #diensten ul {
			list-style: none;
			padding: 0;
        }
        
        #diensten ul li {
			margin: 0.5em 0;
        }
        
        #diensten ul > li > span:first-child {
			font-weight: bold;
        }
        
        #documentatie {
			padding: 1em;
			background-color: beige;
			font-style: italic;
			font-weight: bold;
			margin: 0 auto;
			width: 75%;
        }

        footer {
            text-decoration: none;
            margin: 0 auto 1em;
            padding: 1em 0;
            width: fit-content;
            text-align: center;
            border-radius: 0 0 16px 16px;
        }

        footer ul li {
            display: inline;
            padding: 0.5em;
        }

        footer a,
        footer a:active,
        footer a:visited,
        footer a:link {
            text-decoration: none;
        }

        footer a:hover {
			text-decoration: underline;
        }

        footer .smallprint {
            font-family: 'Inter','Helvetica Neue',sans-serif;
            font-size: small;
            font-weight: bold;
            padding: 2em 0 1em;
            text-align: center;
            color: lightslategray;
        }
        
        footer nav ul {
			list-style: none;
			padding: 0;
        }
        
        #copyright {
			padding: 1em;
			font-size: small;
        }



    /* --------- LAYOUT MEDIA QUERIES ---------------------- */

        /* Default layout (smallest screens) 320px */
        

        .wrapper {
            z-index: -500;
            margin: 0 auto;
        }
        .content {
			
        }
        
        #sitelogo img {
            height: 48px;
        }

        #masthead,#banner,#banner img {
            width: 300px;
        }

        #mainhome,#maindiensten,footer {
          width: 300px;
        }
        
        .columnhome {
          width: 240px;
        }
        #diensten .columnhome {
          width: 240px;
        }

        .footer span {
            display: block;
        }

        /* smartphones (iphone x) 375px */
        @media only screen and (min-width: 375px) {

            #masthead,#banner,#banner img {
                width: 360px;
            }
            
            #mainhome,#maindiensten,footer {
				width: 360px;
			}
			
			#sitelogo img {
                height: 48px;
            }
        
			.columnhome {
			  width: 340px;
			}
			#diensten .columnhome {
			width: 340px;
			}
			            
        }

        /* Plus smartphones (iphone max) 414px */
        @media only screen and (min-width: 414px) {

            #masthead {
                width: 90%;
            }
            
            #banner, #banner img {
				width: 100%;
            }
            
            #sitelogo img {
                height: 54px;
            }
            
            #mainhome,#maindiensten,footer {
				width: 90%;
			}
			
			.columnhome {
				width: 380px;
			}
			#diensten .columnhome {
				width: 90%;
			}
            
        }

        /* tablets */

        @media only screen and (min-width: 768px) {
           
            
           
            #masthead,#banner,#banner img {
				width: 740px;                               
            }
            
            #mainhome,#maindiensten,footer {
				width: 740px;
			}
			
			#sitelogo img {
                height: 56px;
            }
			
			.columnhome {
			  width: 75%;
			}
			#diensten .columnhome {
				width: 40%;
			}

        }

        /* laptop 1024px */
        @media only screen and (min-width: 1022px) {

            

            #masthead,#banner,#banner img {
                width: 980px;
            }
            
            #mainhome,#maindiensten,footer {
				width: 980px;
			}
			
			#sitelogo img {
                height: 72px;
            }
        
			.columnhome {
				width: 240px;
			}
			
			#diensten .columnhome {
				width: 420px;
			}

        }

        /* big screens */

        /* HD */
        @media only screen and (min-width: 1140px) {
            
            #masthead,#banner,#banner img {
              width: 1100px;
            }
            
            #mainhome,#maindiensten,footer {
				width: 1100px;
			}
			
			#sitelogo img {
                height: 80px;
            }
			
			.columnhome {
				width: 300px;
			}
			#diensten .columnhome {
				width: 480px;
			}

        }

        /* 4K */
        @media only screen and (min-width: 2560px) {
            
            body {
				font-size: x-large;
            }

            #masthead,#banner,#banner img {
                width: 2000px;
            }
            
            #mainhome,#maindiensten,footer {
				width: 2000px;
			}
			
			#sitelogo img {
                width: 300px;
            }
			
			.columnhome {
				width: 600px;
			}
			
			#diensten .columnhome {
				width: 900px;
			}

           
        }