/*
	TimTec icon-RESPONSIVE menu
	Tekstgrootte in x-VW, maar dmv @media netjes verkleind/vergoot per breedte/hoogte van het mediascherm
	De icons moeten EXACT op de juiste maat gemaakt worden met dezelfde CSS-color als de tekstkleur.
*/

@charset "utf-8";

/**===============================================================================================================================**/
/**       CSS tegelMenu dé OPLOSSING met icons		Volledig RESPONSIVE															  **/
/**===============================================================================================================================**/
* 						{ box-sizing: border-box; }/* dikte lijn gaat naar BINNEN  */
#navWrap				{ position:relative; margin:auto; width:100%; max-width:800px; height:auto; background-color:###lightgreen; padding:5px 0; }
/*  container nav-div */
#navDiv					{ display:flex; background-color##white; margin:auto; z-index:10 }	
/* Deel 100% door het aantal img's dat je als menu gebruikt (nu 100/6 = 16.33333% */
.imgWrap				{ flex:100%; padding:0 5px; font-size:1.2vw; font-weight:bolder; text-align:center; border:###green solid 1px; }
.imgWrap:first-child	{margin-left:2.5%; }
.imgWrap:last-child		{margin-right:2.5%; }
.nav-txt				{ width:9)%; text-align:center; margin-top:-3%; opacity:0.4; border:###blue solid 1px; }
/*  de tekst ook als ancor laten functioneren. De tekstKLEUR idem maken */
.nav-txt a:hover, .nav-txt a:visited, .nav-txt a:link, .nav-txt a:active		{ text-decoration:none !important; color:rgb(103, 0, 0); }
#navWrap img			{ opacity:0.4;  /*border:green solid 2px;*/ }
#navDiv img:hover, .nav-txt:hover	{ opacity:1; } /* bij hover wordt zichtbaarheid 100% */
.actief					{ opacity:1;  }


/*  Geen navigatie zichtbaar   */
@media only screen and (min-width: 1200px) 	{
	.imgWrap		{ font-size:1.5vw; color###yellow; font-size:22px; }
	}
	
@media only screen and (min-width: 960px) and (max-width: 1199px){
	.imgWrap		{ font-size:22px; -webkit-font-size width:80%; }	
	}

@media only screen and (min-width: 800px) and (max-width: 959px) {
	.imgWrap		{ font-size:20px; }	
	}

@media only screen and (min-width: 600px) and (max-width: 799px) {
	.imgWrap		{ font-size:2.7vw; }
	#nav-wrap		{ display:none; }	
	}

@media only screen and (min-width: 413px) and (max-width: 599px) {
	#nav-wrap		{ display:none;	}
	}

@media only screen and (max-width: 412px) {
	#nav-wrap		{ display:none;	}
	}