html  {
	scroll-behavior: smooth;
}
body {
	background-color: white;
	font-family: Verdana, sans-serif;
	font-size: 16px;

	color: black;  
	margin:0;
	padding:0;
	overflow-wrap: break-word;
}

@font-face {
	font-family: 'Tangerine-JG03';
	src: url(../fonts/Tangerine-JG03-RegBold.woff2) format('woff2');
}
@font-face {
	font-family: 'Montserrat-Light';
	src: url(../fonts/Montserrat-Light.ttf) format('woff2');
}
			/* Tangerine_Bold.ttf
			Tangerine-JG03-RegBold.woff2 */
			
.container { 
	max-width:1150px;
	padding:10px 3%;
	margin:0 auto;
	font-size: clamp(1em, 1.2vw, 1.1em);
}

/* ========		S I T E  H E A D E R		======== */

.header {
	background-position: center; 
	background-position-x: center;
	background-position-y: bottom;
	background-repeat: no-repeat;
	background-image: url("https://hettyabma.nl/1/afb/Header-001-zondertekst.jpg");
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	 /* width: min(1200px, 100%);  margin:0 auto; DIT IS VOOR HEADER EVEN BREED ALS INHOUD, VOOR VOLLEDIGE BREEDTE WEGHALEN */
}

.header h1 {
	text-align:center;
	font-family: Tangerine-JG03;
	font-size: clamp(3.7em, 12vw, 8em);					/* vorige was clamp(3.5em, 12vw, 7em) */
	color: #005F6A;
	margin-top:0;
	margin-bottom:0;
	padding-top:70px;
	text-shadow: 1px 1px 1px #fff, 1px 1px 2px #d9d9d9;
}

.header h2{
	font-family: Montserrat-Light, sans-serif;
	font-size: clamp(1em, 2vw, 1.2em);
	color: #bbb;
	margin-top:0;
	padding-bottom:50px;
	text-align:center;
	text-shadow: 1px 1px 1px #000;
}
/* ========		N A V I G A T I E / M E N U		======== */

.nav { 	text-align:center;
	/*	background-color: #fff8f882;  */
		list-style-type: none;
		margin-top:15px;
		padding: 0;
	} 

.nav li 		{   
display: inline-block;  
font-size: clamp(1rem, 0.9615rem + 0.1923vw, 1.125rem);   /* 320=16 1360=18 clamp.font-size.app */
padding: 10px 5px; margin:0 0;}
.nav a:link 	{ text-decoration: none;		color:#ddd;		text-shadow: 1px 2px 1px #000;}
.nav a:visited	{ text-decoration: none;		color:#ddd;		text-shadow: 1px 2px 1px #000;}
.nav a:hover 	{ text-decoration: underline;	color:#005F6A;		text-shadow: 1px 2px 1px #fff;}
.nav a:active 	{ text-decoration: underline;	color:#005F6A;		text-shadow: 1px 2px 1px #fff;}



/* ========			P A G I N A		======== */
.montserrat{ 
	text-align:center;
	font-family: Montserrat-Light, sans-serif;
	font-size: clamp(1em, 7vw, 2.5em);					
	color: #005F6A;
	margin-top:clamp(1em, 6vw, 2.5em); /* was 25px */
	margin-bottom:clamp(1em, 6vw, 2.5em); /* was 25px */
	padding:10px 0px;
	/* text-shadow: 1px 1px 0px #fff, 2px 2px 0px #c1c1c1; */
}

.tangerine{ 
	text-align: center;
	font-family: Tangerine-JG03;
	font-size: clamp(3em, 10vw, 4em);
	color: #005F6A;
	margin-top: 0;
	margin-bottom: 0;
	padding: 36px 0px;
	/* text-shadow: 1px 1px 0px #fff, 2px 2px 0px #c1c1c1; */
}

h2 {
	font-family: arial, sans-serif;
	font-weight:300;
	font-size: 1.5em;
	color: #005F6A;
	margin-top:0;
	margin-bottom:2px;
}


.blokje h6, h5, h4, h3, h2 {line-height:1.1; }    

h3 {
	font-family: Montserrat-Light, sans-serif;
	font-size: 1.4em;
	color: #005F6A;
	margin-top:0;
}

h4 {font-family: Montserrat-Light, sans-serif;
	font-size: 1.4em;
	color: #005F6A;
	margin-top:0; 	margin-bottom: 0px;		}

h5	{	font-family: "Times New Roman", Times, serif;  color: #005F6A; margin:0px 0px;
	font-size:1.5em;	}
	
h6	{	font-family: "Times New Roman", Times, serif;  color: #005F6A; margin:0px 0px;
	font-size:1.4em;	}
	
.markering, .geel, .accent, .yellowbg, .yellow {
  background-color: yellow;
}
.vet {font-weight:bold;}

p { 
	font-family: Verdana, sans-serif;
	margin-top:0px;
	margin-bottom:30px;
	line-height:1.6;
}
		
li {
	margin-bottom:25px;
}

/* ========		K O L O M M E N		======== */

.kolommen{
	box-sizing: border-box;
	padding: 20px;
									/* FONT SIZE NAAR PARENT DIV VERHUISD font-size:clamp(1em, 1.6vw, 1.1em); */			
	width: min(1200px, 100%); 		/* responsive Width */
	margin:25px auto;
	columns: 300px;
	padding:15px 15px;		
	column-gap:1.5em;
									/* border-bottom:1px solid #7a7a7a; */ 
}
img {
	display: block;
	width:100%; 
	}
	
.left {
	width:50%;
	float:left;
	margin:0px 15px 15px 0px;
	}
.left33 {
	width:33%;
	float:left;
	margin:0px 15px 15px 0px;
	}
	
.right {
	width:50%;
	float:right;
	margin:0px 0px 15px 15px;
	}
.right33 {
	width:33%;
	float:right;
	margin:0px 0px 15px 15px;
	}
	

.foto {
	font-style: italic;
	color:gray;
	font-size:0.8em;
	}

/* ========		G R I D  C O N T A I N E R / B L O K K E N		======== */

.grid-container {
	width: min(1200px, 100%);	
	margin:25px auto;			/*  	responsive Width als parent container niet breedte bepaald */
	display: grid;
					/* border:1px solid red; aan-uit */
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap:20px;
	justify-content:center;
					/* align-content: start;   om niet hoogte van hele container te hebben @1:40 v=KOx0NdGJ7pc  */
}

	.blok	{
margin-top:auto;
margin-bottom:auto;
display: flex;
align-items: center;
min-height: 100vh; /* Full viewport height for vertical alignment */
height:100%;
flex-flow: row wrap;
flex-direction:column;
}

@media only screen and (min-width: 960px) {
.blok {
scroll-margin-top: 60px;
}
}

.blokje {
	line-height: 1.6;
	padding-left:1em;
	padding-right:1em;
	padding-top:1em;
	padding-bottom:1em;
/*	border-left:1px solid #c1c1c1;  */
/*	border-bottom:1px solid #c1c1c1;  */
/*	border-radius: 0px 36px; */
	/ * FONTSIZE CENTRAAL REGELEN font-size:clamp(1em, 1.6vw, 1.1em);  */

}
					/* AAN EN UITZETTEN BORDER EN ACHTERGROND VAN BLOKKEN
					background-color:#fff7db;
					border-radius: 12px 36px;
					box-shadow: 1px 1px 4px #7a7a7a;

					zwart is #000000
					midden grijs is #7a7a7a voor minder pittige schaduw
					border:2px solid blue:
					text-align: center;
					*/


#topbtn {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color:rgba(255,255,255,0.5);
  color: #005F6A;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
}

#topbtn:hover {
  background-color:rgba(255,255,255,0.8);
}


   
   .achtergrond1 {
background-image: url("https://hettyabma.nl/1/afb/achtergrond-02-1920.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
scroll-margin-top: 0px;
min-height:100vh;
   }