/*Declarations*/
#header {								/* Header bar sticky effect (see header.js headerSticky procedure) */
	position:sticky;
	height:60%;
	z-index:999;
	text-align:center;	
	transition:all 1.5s ease-in-out;
	padding-top:10px;
}

.ms-hide {
	display:none;
}

.topnav {								/* Main menu container (logo part and main menu) */			
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:85%;
	margin:12px auto;	
}

.m-items {								/* Hold menu items in defined space see tonav --> display:flex in topnav class */	
	padding:0;
	background: radial-gradient(#282b2d 15%, transparent 80%);
	border-radius:10px;
	width:auto;
	
}

.m-items div {							/* Distance between top level menu items */	
	padding:0px 7px 0px 7px;
	text-align:left;
}

.topnav img {
	width:31vw; 						/* Logo behaviour, matches to the Viewport Width ( image size dinamically changes if width of page changes) */
	max-width:100% !important;
	transition:1s;
}

.topnav img:hover {						/* Rezie image on hover */
	width:31vw;
	height:auto;
}

.topnav a {								/* Main menu text, no sub pointer */
	color:var(--menu-text-color);	
	cursor:pointer;
	transition:1s;
	padding:0px 15px 0px 15px;
	margin-right:-10px;
	font-family:main-font;
	font-weight:600;
	font-size:22px;
	letter-spacing:2px;
}

.topnav .icon {							/* Dont show responsive menu icon */
	display:none;
}

.topnav a:hover, .dropdown div:hover {	/* Change menu text color on hover */
	color:#ffa;
}
.dropdownsub a:hover, .dropdownsub div:hover {				/* Dropdownsub color on hover */
	color:#5bb;
}

.menu-pointer {							/* Little pointer flag on top left of dropdown menu container */
	width:0 !important;
	padding:0 !important;
	height:10 !important;
	background:transparent !important;
	border-radius:0px !important;
	border-bottom: 10px solid #ddd;
	border-right: 10px solid transparent;
}

.dropdown {								/* Main menu display inline positioned */
	display:inline-block;	
}

.dropdown div {							/* Main menu text with sub pointer, each item separately treated */	
	color:var(--menu-text-color);	
	cursor:pointer;
	background:transparent;
	font-family: open-sans-light;
	font-size:22px;
	font-family:main-font;
	font-weight:600;
	letter-spacing:2px;
}

.dropdown-content {						/* Dropdown container 1x sub position, no display */	
	position:absolute;	
	min-width:200px;		
	padding:0;
	margin-left:8px;	
	overflow:hidden;
	max-height:0px;
}

.dropdown-content div {					/* Dropdown container behaviour */
	background:#ddd;
	padding:10px;
	border-radius:0px 20px 0px 20px;
	line-height:.6em;
}

.dropdown-content a {					/* Dropdown text behaviour if no 2x sub menu exists */
	font-size:20px;	
	float:none;	
	color:var(--default-text-color);
	padding:0;	
	display:block;
	text-align:left;
}

.dropdown:hover .dropdown-content {		/* Dropdown container show on hover */
	height: auto;
	z-index: 11;
	max-height:400px;  
	transition-duration:2s;
}

.m-sub2-pointer {						/* Icon (triangle right) pointing to 2x sub */
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.dropdownsub {							/* 1x sub behaviour */
	display:block;
}

.dropdownsub div {						/* Dropdown text behaviour if 2x sub menu exists */
	font-size:20px;	
	color:var(--default-text-color);
	padding:0;
	margin:0;
}

.dropdown-contentsub {					/* 2x sub container position */	
	position:relative;	
	min-width:200px;		
	overflow:hidden;
	max-height:0px;
}
.dropdown-contentsub div {				/* 2x sub container behaviour */	
	min-width:150px;	
	display:block;
	background:transparent !important;
	border-radius:inherit !important;	
}

.dropdown-contentsub a {				/* 2x sub text */
	font-size:20px;	
	color:var(--default-text-color);
	padding:8px 8px 10px 16px;
	text-decoration:none;	
	text-align:left;
}

.dropdown-contentsub a:hover {			/* 2x sub text hover color */
	color:eff;
}

.dropdownsub:hover .dropdown-contentsub {	/* 2x sub container show up on hover */
	height:auto;
	max-height:300px;  
	transition-duration:2s;
	margin:10px 0px -10px 0px;
}


@media screen and (max-width: 680px) {
	#header {									/* Sticky header height */
		height:40px;
		padding:0;
		margin:0;
	}
  
	.topnav {									/* Main container for responsive menu */
		width:99vw;
		margin:0;
	}
	.topnav a {									/* Main container for responsive menu */
		font-size:17px;
	}		
	
	.topnav img {								/* Main logo position */
		width:78vw;
		display:inline-block;
		position:absolute;
		top:6px;
		left:7px;
	}
	.topnav img:hover {							/* Main logo hover width */					
		width:82vw;
	}	
	.topnav .icon { 							/* Responsive icon position and behaviour */ 		
		display:inline-block;
		position:absolute;
		top:6px;
		right:22px;
		background:transparent;					
		color:var(--menu-text-color);
	}		
	
	.m-items div {								/* Top level container position */						
		padding:0;
	}
	
	.menu-pointer {
		display:none !important;				/* Top level container pointer flag discard on responsive display */
	}
	
	.m-sub1-pointer {							/* Icon (triangle right) pointing to 1x sub */
		color:var(--default-text-color);
	}
	
	.dropdown  {								/* Top level menu container not displayed */
		display:none;
	}
	.dropdown > div  {							/* Top level menu container not displayed */
		display:flex;
		justify-content:space-between;
		align-items:center;
	}
	
	.dropdown-resp {							/* Top level container menu open, position, background*/		
		position:absolute;
		display:block;
		background:#eee;
		top:40px;
		left:0px;
		height:140vh;
		width:0px;
		max-width:320px;
		transition:width 2s;
	}
	
	.topnav.responsive .ms-show {				/* Search block on top of responsive menu */		
		color:var(--default-text-color);
		padding:6px;
	}
		
	.topnav.responsive .dropdown-resp {			/* Top level container open, and position */	
		width:99vw;
	}	
	
	.topnav.responsive, .topnav a {				/* Top level text, no sub pointer */
		padding:0px;
		font-size:18px;	
		color:var(--default-text-color);
		font-size:17px;
	}

	.topnav.responsive .dropdown div {
		font-size:17px;							/* Top level text, only if sub pointer */
		color:var(--default-text-color);
		
	}
	
	.topnav.responsive .dropdown {				/* Top level container display, text padding (Line spaceing) */
		display:block;
		padding:5px 10px 5px 7px;
		
	}
	
	.topnav.responsive .dropdown-content {		/* 1x sub container position, text position */
		position:relative;	
		width:280px;		
		overflow:hidden;
		background: #ddd;  
		max-height:0px;
	}	
	
	.topnav.responsive .dropdown-content div {	/* 1x sub container background only */
		background:transparent;
		font-size:16px;
	}
	
	.topnav.responsive .dropdown:hover .dropdown-content {	/* 1x sub container display */
		background:#ddd;
		margin-left:-7px;		
		height: auto;
		max-height:300px;  
		transition-duration:2s;
		width:320px;
		overflow:hidden;
		padding:0;
		margin:0px 0px 0px -7px;
	}	
	
	.topnav.responsive .dropdownsub {							/* 2x sub pointer position, text */		
		margin:18px 0px 20px 22px;
		position:relative;
		color:var(--menu-text-color);
		width:290px;
	}
	
	.topnav.responsive .dropdown-contentsub {
		margin:0px 0px 10px 0px;
	}
	
	.topnav.responsive .dropdown-contentsub div {
		margin:3px 0px 3px -35px;
		padding:0px 0px 0px 65px;
	}
	.topnav.responsive .dropdown-contentsub a {
		padding:10px 0px 10px 0px;
	}
	
	.dropdownsub:hover .dropdown-contentsub {	/* 2x sub container show up on hover */
		height:auto;
		max-height:200px;  
		transition-duration:2s;
		margin:10px 0px 10px -20px;
		background:#ccc !important;
		border-radius:0px !important;
		width:320px;
	}
		
	
		
}