/* Header Navigation Style */
@media screen and (min-width: 1200px) {
	/*[lang="en"] .navigation-main-container {padding-left: 220px;}*/
}

@media screen and (min-width: 992px) {
	.navigation-main-container {
		position: absolute;
		bottom: 0;
		left: 0;
		border: 0px dotted rgba(255,0,0,0.5);
		width: 100%;
		box-sizing: border-box;
		/*padding: 0 15px 0 115px;*/
	}

	.navigation-main {border: 0px solid green; margin: 0 15px 0 115px; visibility: hidden;}
	.navigation-main a {text-decoration: none;}
	.navigation-main nav {}
	
	.navigation-main ul {margin: 0; padding: 0;}
	
	.navigation-main ul > li {
		display: block;
		float: left;
		position: relative;
		text-decoration: none;
		transition-duration: 0.5s;
	}
	
	.navigation-main li.active,
	.navigation-main li:hover {
		background: rgba(19, 20, 71, 1);
		cursor: pointer;
	}
	
	.navigation-main ul li a {
		display: block;
		padding: 5px 0.8rem 10px 0.8rem;
		border: 0px dotted rgba(0, 0, 255, 0.3);
		color: #fff;
		font-weight: bold;
		position: relative;
	}
	
	.navigation-main li a.has-nodes {
		padding-right: 25px;
	}
	
	.navigation-main li a .icon {
		position: absolute;
		top: 10px; right: 10px;
		transition: transform 0.3s ease-out;
	}
	
	.navigation-main li:hover > a > .icon {
		transform: rotate(90deg);
	}
	
	.navigation-main ul li ul {
		background: rgba(19, 20, 71, 1);
		visibility: hidden;
		opacity: 0;
		min-width: 13rem;
		position: absolute;
		transition: all 0.5s ease;
		left: 0px;
		display--: none; /* @todo */
		height--: 0;
		overflow--: hidden;
		z-index: 2;
		
		/*border: 1px solid red;
		max-height: 50vh;
		overflow: visible;
		overflow-x: hidden;
		overflow-y: scroll;*/
	}
	
	.navigation-main ul li ul li {
		position: relative;
	}
	
	.navigation-main ul li ul a {
		padding: 7px 5px 7px 10px;
		min-width---: 10rem;
		font-weight: normal;
		font-size: 0.9rem;
		transition: all 0.5s ease;
		
		max-width: 18rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.navigation-main ul li ul li.active:hover a,
	.navigation-main ul li ul a:hover {
		white-space: normal;
		overflow: hidden;
		text-overflow: inherit;
		max-height: 3.42rem;
	}
	
	.navigation-main ul li ul li.active,
	.navigation-main ul li ul li:hover {
		/* background: rgba(8, 41, 109, 1); */
		background: rgba(255, 255, 255, 0.8);
	}
	
	.navigation-main ul li ul li.active > a,
	.navigation-main ul li ul li:hover > a {
		color: rgba(8, 41, 109, 1);
	}
	
	.navigation-main ul li ul li ul {
		top: 0;
		left: 100%;
	}
	
	.navigation-main ul li:hover > ul,
	.navigation-main ul li ul:hover {
		visibility: visible;
		opacity: 1;
		display: block;
		transition: all 0.5s ease-out;
		height: auto;
	}
	
	.navigation-main ul li ul li {
		clear: both;
		width: 100%;
	}
}
@media screen and (max-width: 991px) {
	.navigation-main-container {
	}
	
	.navigation-main-container .navigation-main {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		margin-left: -100%;
		background-color: rgb(17, 17, 17);
		border: 0px solid red;
		overflow: auto;		
		transition: all 0.5s ease;
		padding: 30px 0 0 0;
	}
	
	.navigation-main-container .navigation-main ul {list-style: none; border: 0px solid red; padding: 0px;}
	.navigation-main-container .navigation-main ul li {}
	.navigation-main-container .navigation-main ul li a {display: block; padding: 5px 5px 5px 25px; color: rgb(255, 255, 255); border-bottom: 1px solid rgba(255, 255, 255, 0.1); text-decoration: none; transition: all 0.3s ease;}
	.navigation-main-container .navigation-main ul li.active > a {font-weight:bold; background-color: rgba(255, 255, 255, 0.2);}
	.navigation-main-container .navigation-main ul li a:hover {background-color: rgba(255, 255, 255, 0.1);}
	.navigation-main-container .navigation-main ul li li a {padding-left: 50px;}
	.navigation-main-container .navigation-main ul li li li a {padding-left: 75px;}
	.navigation-main-container .navigation-main ul li li li li a {padding-left: 100px;}
	.navigation-main-container .navigation-main ul li a .icon {margin-left: 10px;}
	.navigation-main-container .navigation-main ul li li a .icon {transform: rotate(90deg);}
	
	.navigation-main-container.open .navigation-main {
		margin-left: 0;
	}

	.navigation-main-container .navbar-toggle-button-container {
		position: absolute;
		border: 0px dotted rgba(255, 255, 255, 0.3);
		right: 1rem;
		bottom: 10px;
		padding: 0;
		margin: 0;
	}
	
	.navigation-main-container.open .navbar-toggle-button-container {
		position: fixed;
		top: 20px;
		right: 20px;
		border: 0px solid red;
		bottom: initial;
		left: initial;
		z-index: 15;
		margin: 0;
	}
	
	/* expand/collapse button */
	/* @source https://codepen.io/suxumi/pen/REjgEm */
	.navbar-toggle-button-container *, .navbar-toggle-button-container *:before, .navbar-toggle-button-container *:after { transform: translate3d(0, 0, 0); }
	.navbar-toggle-button-container .navicon-button { display: inline-block; position: relative; padding: 0.5rem 0rem; transition: 0.4s; cursor: pointer; user-select: none; opacity: .8; }
	.navbar-toggle-button-container .navicon-button .navicon:before, .navicon-button .navicon:after { transition: 0.4s;}
	.navbar-toggle-button-container .navicon-button:hover { transition: 0.5s; opacity: 1; }
	.navbar-toggle-button-container .navicon-button:hover .navicon:before, .navicon-button:hover .navicon:after { transition: 0.4s; }
	.navbar-toggle-button-container .navicon-button:hover .navicon:before { top: .725rem; }
	.navbar-toggle-button-container .navicon-button:hover .navicon:after { top: -.725rem; }
	
	.navbar-toggle-button-container .navicon {display: block; position: relative; width: 2.0em; height: .25rem; background: #FFF; transition: 0.5s; border-radius: 2.5rem; }
	.navbar-toggle-button-container .navicon:before, .navicon:after { display: block; content: ""; height: .25rem; width: 2.0rem; background: #FFF; position: absolute; z-index: -1; transition: 0.5s 0.25s; border-radius: 1rem; }
	.navbar-toggle-button-container .navicon:before { top: .525rem; }
	.navbar-toggle-button-container .navicon:after { top: -.525rem; }
	
	.navbar-toggle-button-container .open:not(.steps) .navicon:before,
	.navbar-toggle-button-container .open:not(.steps) .navicon:after { top: 0 !important; }
	
	.navbar-toggle-button-container .open .navicon:before,
	.navbar-toggle-button-container .open .navicon:after { transition: 0.5s; }
	
	/* × and + */
	.navbar-toggle-button-container .open.x .navicon { background: transparent; }
	.navbar-toggle-button-container .open.x .navicon:before { transform: rotate(-45deg); }
	.navbar-toggle-button-container .open.x .navicon:after { transform: rotate(45deg); }
	
}