@font-face {src:url("font/dancingscript.ttf")format("truetype"); font-family:Dance; font-display:swap;}
@font-face {src:url("font/OpenSans-VariableFont_wdth,wght.ttf")format("truetype"); font-family:OpenSans; font-display:swap;}
@font-face {src:url("font/OpenSans-Italic-VariableFont_wdth,wght.ttf")format("truetype"); font-family:OpenSans; font-style: italic; font-display:swap;}

* {box-sizing:border-box; color:#2C354B;}
body * {font-family:OpenSans,sans-serif,Arial,Helvetica,Verdana,calibri,sans-serif; font-size:clamp(16px,3vw,20px);}
body>div {width:100%; }
table {border-collapse:collapse; table-layout:fixed}
img {border:none;}
.groen {color:green; }
.rood {color:red; }
.grys {color:gray; }
                                       .div {border:1px solid blue; }

a {text-decoration:none; color:black; }
a:hover {font-weight:bold; }
.menu {text-align:center; padding:65px 2px 5px;}
.menu:hover,#menu1{ background-image:url("img/underline.png");
	background-size:100% 9px; background-repeat: no-repeat; background-position: 0 60%;}
.menu,.menu a {font-size:15px;}
button,input[type=submit] {height:40px; border-radius:20px; border:2px solid #2C354B; font-weight:bold;
	cursor:pointer; display:block; padding:0 25px; margin-top:25px;}
.butb {background-color:#2C354B; color:white;}
.butw {background-color:transparent;}
.vet {font-weight:bold; }

#red1 {width:100%; background:url('img/red1.jpg') no-repeat; background-position:top center;
	background-color:#FFE0DF; display:flex; justify-content:center; align-items:center;}
#red1>div{width:900px; display:flex; flex-wrap:wrap; justify-content:space-evenly; position:relative;}
#red1 div #taal {width:100%; text-align:right; padding:10px 20px 0 0;}
#red1A,#red2A {padding:25px 20px 50px; text-align:center;}
#red1A span,#red2A span{font-family:Dance; font-weight:250%; font-size:66px;}
#red1C {width:49%;}  /* ruimte voor plaatje */
#red1C img {position:relative; left:10%; bottom:-17%; width:90%;}
#red1D {width:47% ;font-weight:bold; font-size:150%; padding:5% 5% 0 5%; text-align:left;}

.strook {width:100%; display:flex; padding:3% 0 3%; justify-content:center; flex-wrap:wrap;}
.strook div {width:445px;}  /* 2 divs naast elkaar NET binnen 900 px */
.strook img {width:80%;}

.imgdiv {display:flex; align-items:center; justify-content:center;}
.imgdiv img{transform:rotate(-3deg); padding:8px; border:2px solid #2C354B; }

#red2 {width:100%; background:url('img/red2.jpg') no-repeat;;
	background-color:#FFE0DF; background-position:bottom center;}
#red2 {display:flex; justify-content:center; position:relative; padding:30px 0 99px;}
#red2 div {padding:25px 0 0 0; width:200px;}
#red2 a {display:block;}
#red2D img {width:100%; }
#red2C img {position:absolute; width:150px; bottom:-20px; left:50%;}

/* voor popup van privacy, cookie en voorwaarden */
/*
#komop {padding:35px; width:90%; min-width:300px; max-width:800px; z-index:150; position:fixed; left:25px; top:20px; background-color:#EEE;
border-radius:9px; box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.32); display:none;}
.klikme {cursor:pointer; padding:5px 0;}
.klikme:hover,.law div{font-weight:bold;}
.law div {cursor:pointer; font-weight:normal; margin:0; padding:0; height:20px;/* hier begrijp ik niets van???? border:1px solid red; */}


/* voor hamburgermenu */
.mobiel {display:none;}
#mobhamburger {position:fixed; top:30px; left:30px; cursor:pointer; z-index:99;}
#mobmenu {position:fixed; top:20px; right:10px; display:none; width:95%; background:#EEE;
	z-index:99; padding:20px; border-radius:10px;
	box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;}
#mobmenu a, #mobmenu .menu0 {display:block; margin-top:0px;}
#mobmenu a:hover {text-decoration: underline;}
#mobmenu p {margin-top:33px; }
.x {font-size:55px; font-weight:bold; position:relative; bottom:-15px; right:10px; cursor:pointer;}
.mobsluit {position: absolute; top:-20px; right:10px; }
.menu0,.menu0:hover {color:silver!important;}

@media (max-width:1200px)
	{
 	}
@media (max-width:900px)
	{.mobiel {display:block;}
	.strook div {width:100%; padding:3% 5%;}
	#red1 {background:url('img/red1mob.jpg') no-repeat; background-position:center top; background-color:#FFE0DF;}
 	#red1 .menu {display:none; }
	#red1 div {width:100%; }
	#red1C {order:2; }
	#red1C img {width:66%; }
	#red1D {order:1; font-size:200%;}
	#blue div:nth-child(1) {order:2;}
	#blue div:nth-child(2) {order:1;}
	#red2 {display:grid; grid-template-columns:auto ;justify-items:center; row-gap:30px; padding:25px 0 150px;}
	#red2 div {padding:0; width:99%;}
	#red2C img {left:35%;}
	}