@charset "utf-8";

/* algemeen */
img 					{ width:100%; height:auto;}
/* pagina view */
html, body 				{ height:100%; margin-top:2px; }
body 					{ background-color:lightyellow; font-family:'Times New Roman', Times, serif; font-style:italic; font-size: calc(1.3rem + 0.5vw)}

 @font-face 			{ font-family: "fontAd";  src: url(NostalgiaScript-Regular.otf);  }

.dnvz					{ font-family:'fontAd'; text-shadow:4px 4px 8px black; font-size:calc(2.2vw + 2em); color:#AB6921}
.myTxtColor				{ color:#9D6235; font-size:calc(1.125rem + 0.5vw); margin-top:10px; }

/*.ttHeaderWrap 			{ width:100%; background-image:url(img/bgHeader.jpg); width:100%; height:inherit !important; background-repeat:no-repeat; }*/

/* header inhoud 
.ttHeadText 			{ width:100%; font-size:calc(40px + .55vw); text-shadow:2px 2px grey; text-align:center; background-color:inherit; color:#9B4A24; font-weight:bold; }  */
.ttHeadImgLi > img 		{ width:100%; }

/* blokken menu */
.wrapBlok 				{ width:100%; padding:0px; background-image:url(img/bgMenu.jpg); }
.blokken 				{ width:100%; display:flex; flex-flow:wrap; justify-content:center; align-items:center; padding:2px; height:120px; }
.blokken a				{ color: inherit; text-decoration:none; }
.blokken a:hover		{ color:#EBCA98; font-size:96%; }
.blokken div 			{ position:relative; width:23.3%; min-width:110px; height:35px; display:flex; border: 0px solid red;
							justify-content:center; align-items:flex-start; color:#F0F0F0;
							font-weight:bolder; font-family:"Book Antiqua", "Palatino Linotype", Arial; 
							/*font-size:calc(24px + .55vw);*/ font-size: calc(1.1rem + 0.5vw);text-shadow:2px 2px grey; 
							margin:0 7px; margin-top:-22px; }
.blokken div:nth-child(6)	{line-height:92%; align-items:baseline; margin-top:-15px !important; }
.blokken .actief		{ color:#EBCA98; text-shadow:2px 2px #6F502D; font-size:93%; }


/* Content MainPage */
.container 				{ width:100%; max-width:960px; min-height:100%; margin:0 auto; background-color:white; background:url(img/bg.jpg) repeat; }
.inhoud 				{ width:100%; padding:15px; }
.sectie h1 				{ color:darkorange; }
span img				{ width:inherit; height:inherit; }


/* responsive slider zonder JS */
.slide-container 		{ max-width:960px; position:relative; }
.slide:first-child 		{ display:block; width:100%; height:auto; }
.slide:not(:first-child){ position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; }
.slide img 				{ width:100%; }

/* Animation settings for individual slides */
.slide:nth-child(1) 	{ -webkit-animation:fade-1 30s infinite; 	animation:fade-1 30s infinite; }
.slide:nth-child(2) 	{ -webkit-animation:fade-2 30s infinite; 	animation:fade-2 30s infinite; }
.slide:nth-child(3) 	{ -webkit-animation:fade-3 30s infinite; 	animation:fade-3 30s infinite; }
.slide:nth-child(4) 	{ -webkit-animation:fade-4 30s infinite; 	animation:fade-4 30s infinite; }
.slide:nth-child(5) 	{ -webkit-animation:fade-5 30s infinite; 	animation:fade-5 30s infinite; }
.slide:nth-child(6) 	{ -webkit-animation:fade-6 30s infinite; 	animation:fade-6 30s infinite; }

/* fade effect voor 6 images */
@keyframes fade-1 { 0% { opacity:1; }  16% { opacity:0; }  33% { opacity:0; }  50% { opacity:0; }  67% { opacity:0; }  83% { opacity:0; }  100% { opacity:1; } }
@keyframes fade-2 { 0% { opacity:0; }  16% { opacity:1; }  33% { opacity:0; }  50% { opacity:0; }  67% { opacity:0; }  83% { opacity:0; }  100% { opacity:0; } }
@keyframes fade-3 { 0% { opacity:0; }  16% { opacity:0; }  33% { opacity:1; }  50% { opacity:0; }  67% { opacity:0; }  83% { opacity:0; }  100% { opacity:0; } }
@keyframes fade-4 { 0% { opacity:0; }  16% { opacity:0; }  33% { opacity:0; }  50% { opacity:1; }  67% { opacity:0; }  83% { opacity:0; }  100% { opacity:0; } }
@keyframes fade-5 { 0% { opacity:0; }  16% { opacity:0; }  33% { opacity:0; }  50% { opacity:0; }  67% { opacity:1; }  83% { opacity:0; }  100% { opacity:0; } }
@keyframes fade-6 { 0% { opacity:0; }  16% { opacity:0; }  33% { opacity:0; }  50% { opacity:0; }  67% { opacity:0; }  83% { opacity:1; }  100% { opacity:0; } }

/* pagina inhoud */

/******** css hierboven is voor ALLE browser breedtes **********/
/******** @media responsive hieronder voor smallere browser view **********/

/* Afwijkende css voor view 600 tot 768 */
@media only screen and (min-width:600px) and (max-width:850px) {
	.blokken div 			{ font-size: calc(1.1rem + 0.5vw); margin-top:0px; border:r e d 1 px so l i d; width:30%; }
.blokken div:nth-child(6)	{ margin-top:13px !important; }
.dnvz						{ font-size:8.5vw; text-align:center; }
}

/* Afwijkende css voor view tot 600 */
@media only screen and (max-width:599.98px) {
	.blokken				{ padding:0; height:140px;}
	.blokken div 			{ font-size:90%; margin-top:5px; width:25%; }
.blokken div:nth-child(6)	{ margin-top:17px !important; }
.dnvz						{ font-size:52px; text-align:center; }
/*	.ttHeadText 	{ font-size:calc(30px + .75vw); text-shadow:2px 2px #000; background-color:inherit; color:white; }*/
}

/* font-size:calc(22px + .75vw); */