/******************************* NAVIGATION ******************************/

.headerWithNavBar {
	width: 100%;
	/* float: left; */
	display: flex;

	/* If you want the whole header to stick on top */
	position: sticky;
	z-index: 200;
	top: 0;
	
	/* border:1px solid blue; */
}

.headerLeftOfNavBar {
	/* float: left; */

	flex: 0 auto;
	order: 1;

	/* Width and height is mandatory, these are defaults to be overriden by element in HTML */
	width: 150px;
	height: 62px;
	background: black;
/*	background: DarkGoldenRod;  */
}

.headerRightOfNavBar {
	/* float: right;  */
	text-align: right;
	
	flex: 0 auto;
	order: 3;

	/* Width and height is mandatory, these are defaults to be overriden by element in HTML */
	width: 100px;
	height: 62px;
	background: black;
/*	background: DarkGoldenRod;  */
}

.fb-icon {
	width: 30px;
	height: 30px;
	vertical-align: middle;
	margin-top: 16px;
}

.in-icon {
	width: 30px;
	height: 30px;
	vertical-align: middle;
	margin-top: 16px;
	margin-right: 10px;
}



.headerNavBarContainer {
	width: 100%;
	display: flex;
	flex-direction: column;
	order: 2;
}


.headerCenterOfNavBarDesktop {
	position: absolute;
	overflow: hidden;
	left: 0px;
	right: 0px;
	margin: auto;

	/* Width is mandatory, this is a default to be overriden by element in HTML */
	width: 50px;
}

.headerCenterOfNavBarSmartphone {
	position: absolute;
	overflow: hidden;
	left: 0px;
	right: 0px;
	margin: auto;

	display: none;

	/* Width is mandatory, this is a default to be overriden by element in HTML */
	width: 50px;
}


.navbarNextToHamburger {
	display: none;

	padding: 0px;
	margin: 0px;
}

.navbarNextToHamburger img {
	vertical-align: middle;
}


/* ------------------- NAVIGATION BAR ON BIG SCREENS ------------------- */

/* Wrapper */

#navbar {
	width: 100%;
	height: 62px;
	font-family: Arial, Helvetica, sans-serif;

	/* Note: it is possible to define the navigation bar as a float but then it needs a defined width in pixels. */
	/*
	width: 400px;
	float: left;
	*/

	/* --------- CONFIGURATION --------- */

	/* Background color of the navigation bar */
	/* Default: same background as parent */
	background: black;
/*	background: DarkGoldenRod;  */

	

	/* Display the menu items left, centered or right */
	/* Default: left */
	text-align: center;

	/* If you want the navigation bar to stick on top
	position: sticky;
	top: 0;
	*/

	/* --------------------------------- */

	/* also interesting: center */
	align-self: flex-start;
	flex: 1 auto;
	order: 2;
	display: flex;
	justify-content: center;
}

/* Hide Hamburger */

#navbar label, #hamburger-button {
	display: none;
}

/* Menu Items */
#navbar ul {
	list-style-type: none;
	margin: 0;
	padding: 0; 

	margin-top: 10px;
	margin-bottom: 10px;
}

#navbar ul li {
	display: inline-block;
}


#navbar ul li a {
	display: inline-block;

	/* --------- CONFIGURATION --------- */
	/* Specify the space around the menu items */
	/* Default: same as parent? */

	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;

	border: 2px solid white;
	border-radius: 10px;

	/* --------------------------------- */

	/* box-sizing = content-box (default) calculates actual width/height of an element as width/height + padding + border */
	/* box-sizing = border-box includes the padding and border in the specific width/height (which equals the actual width/height */
	/* Note: margin is always excluded */
	box-sizing: border-box;

	text-decoration: none;

	/* --------- CONFIGURATION --------- */

	/* Text color of the menu items */
	color: white;

	/* Background color of the menu items */
	background: black;

	/* --------------------------------- */
}


#navbar ul li.active a {
	/* --------- CONFIGURATION --------- */

	border-color: #DC8732;

	/* Text color of the active menu item */
	color: black;
/*	color: yellow; */

	/* Background color of the active menu item */
	background: #DC8732;

	/* --------------------------------- */
}


#navbar ul li a:hover {
	/* --------- CONFIGURATION --------- */

	border-color: #DC8732;

	/* Text color of the currently hovered menu item */
	color: #DC8732;

	/* Background color of the currently hovered menu item */
	background: black;
/*	background: yellow; */

	/* --------------------------------- */
}

/* The hover on the active element should not be different from the regular active styling */


#navbar ul li.active a:hover {
	/* --------- CONFIGURATION --------- */

	border-color: #DC8732;

	/* Text color of the active menu item */
	color: black;
/*	color: yellow; */

	/* Background color of the active menu item */
	background: #DC8732;

	/* --------------------------------- */
}



/* Multilevel menu on Big screens */

#navbar .main-menu li {
	position: relative;
	display: block;

	/* The float property is the only one that has to be compensated for small screens */
	float: left;

	background: red;
	color: white;
}

#navbar .sub-menu {
	border-width: 0;
	margin: 0;
	position: absolute;
	top: 100%;
	left: 0;

	width: 190px;

	/* Was: width: 192px; */

	z-index: 300;
	text-align: left;
	padding: 0;
}


#navbar .sub-menu li {
	float: none;
}

#navbar input[type="checkbox"] {
	display: none;
}


#navbar .sub-menu {
	display: none;
}


#navbar .sub-menu li {
	border-width: 0 0 1px;
	/* width: auto;  */
}


#navbar .main-menu li:hover > input[type="checkbox"] + .sub-menu {
	display: block;
}


#navbar li label {
	cursor: pointer;
}


#navbar li .submenu-label {
	display: none;
}

#navbar .sub-menu li a {
	color: wheat;
/*	color: yellow; */
}

#navbar .sub-menu li a:hover {
	color: black;
}





/* ------------------ NAVIGATION BAR ON SMALL SCREENS ------------------ */

/* Should be: @media screen and (max-width: 760px) { */

@media screen and (max-width: 1060px) {

	.headerWithNavBar {
		display: block;
		z-index: 200;
	}

	.headerNavBarContainer {
		display: block;		
	}

	.headerCenterOfNavBarDesktop {
		display: none;
	}

	.headerOnTopOfNavBarDesktop {
		display: none;
	}

	.headerCenterOfNavBarSmartphone {
		display: block;
	}

	.headerLeftOfNavBar {
		display: none;
	}

	.headerRightOfNavBar {
		height: 46px;
		width: 80px;
		float: right;
		text-align: right;
	}


	.fb-icon {
		width: 30px;
		height: 30px;
		vertical-align: middle;
		margin-top: 9px;
	}

	.in-icon {
		width: 30px;
		height: 30px;
		vertical-align: middle;
		margin-top: 9px;
		margin-right: 10px;
	}

	.navbarNextToHamburger {
		display: inline-block;
	}

	#navbar {
		display: block;
		height: 48px;

		/* --------- CONFIGURATION --------- */

		/* Override default alignment specific for the hamburger menu */
		/* Default: same as alignmnet on the navigation bar */
		/* By default this alignment is also used for the menu items */
		text-align: left;

		/* --------------------------------- */
	}

	/* Show Hamburger */

	#navbar .hamburger-label {
		display: inline-block;
		right: 0px;

		font-style: normal;
		font-size: 1.2em;

		/* --------- CONFIGURATION --------- */

		/* Text color of the hamburger label on the navigation bar */
		color: white;

		/* Background color of the hamburger label on the navigation bar */
		background: black;

		/* Padding of the hamburger label (its size also determines the height of the navigation bar) */
		padding: 7px;

		/* --------------------------------- */

	        cursor: pointer;
	}


	#hamburger-label-open {
		display: none;
	}

	#hamburger-label-closed {
		display: inline-block;
	}


	#navbar .hamburger-label-anim {
		display: inline-block;

		border: 2px solid black;
		border-radius: 10px;
		margin-top: 5px;
		margin-left: 10px;
		
		padding-top: 15px;
		padding-left: 8px;
		padding-right: 8px;
		padding-bottom: 15px;
	        cursor: pointer;

		/* Text color of the hamburger label on the navigation bar */
		color: black;

		/* Background color of the hamburger label on the navigation bar */
		background: white;

	}

	#navbar .hamburger-label-anim span {
		position: relative;
	}

	#navbar .hamburger-label-anim span:before,
	#navbar .hamburger-label-anim span:after {
		position: absolute;
	}

	#navbar .hamburger-label-anim span,
	#navbar .hamburger-label-anim span:before,
	#navbar .hamburger-label-anim span:after {
		cursor: pointer;
		height: 3px;
		width: 16px;
		background: black;
		display: block;
		content: '';
		transition: all 0.4s;
	}

	#navbar .hamburger-label-anim span:before {
		top: -6px;
	}

	#navbar .hamburger-label-anim span:after {
		bottom: -6px;
	}


	/* Break down menu items into vertical */
	#navbar ul {
		margin-top: 1px;
	}

	#navbar ul li {
		display: block;
	}

	#navbar ul li a,
	#navbar .main-menu li {
		display: block;
		float: none;

		border-color: black;

		/* --------- CONFIGURATION --------- */

		/* Override default alignment specific for the menu items */
		/* Default: same alignment as hamburger icon */
		/*
		text-align: left;
		*/

		/* Separator between two menu items */

		border-radius: 0px;
		border-top: 2px solid black;
		border-bottom: 0px;

		/* --------------------------------- */
	}


	#navbar ul li a:hover {
		border-color: black;
	}



	#navbar ul li:first-child a,
	#navbar .main-menu li:first-child {

		/* --------- CONFIGURATION --------- */

		/* Override default border of first menu item, e.g. to differentiate menu versus menu item separation */
		/* Default: border of all menu items */

		/* border-top: 5px solid green; */

		/* --------------------------------- */
	}

	#navbar ul li:last-child a,
	#navbar .main-menu li:last-child {

		/* --------- CONFIGURATION --------- */

		/* Override default border of last menu item, e.g. to show a border below the menu item */
		/* Default: border of all menu items */

		border-bottom: 2px solid black;

		/* --------------------------------- */
	}

	#navbar #hamburger-button:checked + label {

		/* --------- CONFIGURATION --------- */

		/* Text color of the hamburger icon when the menu is open (checkbox is checked) */
		color: black;

		/* Background color of the hamburger icon when the menu is open (checkbox is checked) */
		background: #DC8732;

		/* --------------------------------- */
	}


	#navbar #hamburger-button:checked + .hamburger-label {

		/* --------- CONFIGURATION --------- */

		/* Text color of the hamburger icon when the menu is open (checkbox is checked) */
		color: black;
/*		color: yellow; */

		/* Background color of the hamburger icon when the menu is open (checkbox is checked) */
		background: white;

		/* --------------------------------- */
	}




	#navbar #hamburger-button:checked + .hamburger-label-anim span {
		background-color: transparent;
	}

	#navbar #hamburger-button:checked + .hamburger-label-anim span:before,
	#navbar #hamburger-button:checked + .hamburger-label-anim span:after {
		top: 0;
	}

	#navbar #hamburger-button:checked + .hamburger-label-anim span:before {
		transform: rotate(45deg);
	}

	#navbar #hamburger-button:checked + .hamburger-label-anim span:after {
		transform: translateY(-6px) rotate(-45deg);
		top: 6px;
	}



	/* Toggle show/hide menu on checkbox click */

	#navbar ul {
		display: none;
	}

	/* e1 ~ e2: Select every e2 element that is preceded by an e1 element */

	#navbar #hamburger-button:checked ~ ul {
		display: block;
	}

	#navbar #hamburger-button:checked + label #hamburger-label-open {
		display: inline-block;
	}

	#navbar #hamburger-button:checked + label #hamburger-label-closed {
		display: none;
	}

	/* Multi-level menu controls */

	#navbar input[type="checkbox"] {
		display: none;
	}

	#navbar li label {
		cursor: pointer;
	}


	#navbar li label.drop-icon {
		display: inline;
	}

	#navbar .sub-menu {
		display: none;
		z-index: 200; 

		position: static;

		border: 2px solid purple;
		background-color: #DC8732;
		margin: 10px 10px 0px; 10px;
		padding: 0px;

		text-align: right;
		width: auto;
	}


	#navbar .sub-menu li {
		border-top: 1px solid black;

		background: #DC8732;
		color: wheat;
/*		color: yellow; */
	}

	#navbar .sub-menu li:first-child {
		border-top: 3px solid green;
	}

	#navbar .sub-menu li:last-child {
		border-bottom: 3px solid green;
	}

	#navbar .sub-menu li a {
		color: wheat;
/*		color: yellow; */
	}

	#navbar input[type="checkbox"]:checked + .sub-menu {
		display: block;
	}

	#navbar .sub-menu a:hover {
		color: black;
	}

	/* Override the hover behavior as defined for the big screen */

	#navbar .main-menu li:hover > input[type="checkbox"]:checked + .sub-menu {
		display: block;
	}

	#navbar .main-menu li:hover > input[type="checkbox"]:not(:checked) + .sub-menu {
		display: none;
	}

	#navbar .main-menu li a span.submenu-link {
		display: none;	
	}

	#navbar .main-menu li a label span.submenu-label {
		display: inline-block;
	}
}

/******************************** END ********************************/