/* Menu Trigger for Mobile */
#menu_trigger {
	display: none;
	z-index: 100;
	position: fixed;
	right: 15px;
	bottom: 15px;
	background-color: #ffffff;
}
#menu_trigger:not([data-active="true"]) .close,
#menu_trigger[data-active="true"] .open {
	display: none;
}
#menu_trigger .open {
	padding: 3px;
}
/* Menu Trigger for Mobile - End */

/* Navigation Styles */
#navigation > ul {
	position: fixed;
	overflow: hidden;
	overflow-y: scroll;
	max-height: 70%;	/* war 60% */
	padding: 15px 0;
	top: 25vh;		/* war 30vh */
	right: -20px;
	width: 290px;
	padding-right: 15px;
	padding-left: 20px;
	list-style-type: none;
	font-size: 1.1em;
	background: #fefefe;
	border-radius: 10px;
	z-index: 4;
}

#navigation li {
	padding-top: 0.2em;
}
#navigation li a {
	width: calc( 100% - 24px );
}
#navigation > ul li {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
}
#navigation > ul ul {
	width: 100%;
	list-style-type: none;
	max-height: 0;
	overflow: hidden;
	transition: max-height 1s;
}
#navigation li[data-active="true"] > ul {
	max-height: 500px;
}

#navigation li .submenu_trigger {
	transform: rotate(0deg);
	transition: transform .5s;
}
#navigation li[data-active="true"] > .submenu_trigger {
	transform: rotate(90deg);
}

@media(max-width: 1200px) {
	
	#navigation > ul {
		display: block;
		flex-wrap: wrap;
		justify-content: space-around;
		top: auto;
		right: auto;
		bottom: 0px;
		padding-top: 3%;
		padding-left: 3%;
		padding-bottom: 25px;
		width: 100%;
		border-top: 1px grey;
		box-shadow: 4px 4px 10px grey;
		border-radius: 0px;
	}
	#navigation li {
		flex-basis: 400px;
		padding-top: 0.7em;
	}
	
	#menu_trigger {
		display: flex;
		justify-content: center;
		align-content: center;
		border: 2px solid #000;
		border-radius: 3px;
		width: 38px;
		height: 38px;
	}
	
	#navigation > ul {
		height: 100%;
		max-height: 100%;
		width: calc( 100% - 60px );
		max-width: 360px;
		top: 0;
		bottom: 0;
		right: -100%;
		margin: 0;
		z-index: 99;
		transition: right .5s;
	}
	#navigation[data-active="true"] ul {
		right: 0;
	}

}
/* Navigation Styles - End */