.element-pos-left {
	z-index: 5;
	float: left;
}
.element-pos-right {
	z-index: 5;
	float: right;
}
.element-pos-center {
	z-index: 5;
	float: none;
}

.top {
	.sub-menu {
		
		position: fixed;
		
		min-width:150px;
		min-height:70px;
		
		display: block;
		overflow: visible;
		
		box-shadow: none;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		box-sizing: border-box;
		flex-shrink: 0;
		margin: 0;
		padding: 0 3px 0 3px;
		border: none;
		z-index: 300;
		box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
		
		.item {
			display:block;
			float: top;
			line-height: 56px;
			z-index: 4;
			margin: 3px 0px 3px 0px;
			/*padding: 0px 3px 0px 3px;*/
			border: 0px; /*0px 3px 0px 3px solid transparent;*/
			/*text-transform: uppercase;*/
			font-weight: bold;
			font-size: 17px;
			width:100%;
		}
		
		.material-icons {
			vertical-align: middle;
		}
		/* Create an Arraw on the top ob the box ... */
		&:after, &:before {
			bottom: 100%;
			right: 13px;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
		}
		
		&:after {
			border-color: rgba(136, 183, 213, 0);
			border-bottom-color: #263238;
			border-width: 15px;
			margin-left: -15px;
		}
		
	}
	.menu-left {
		top:75px;
		left:15px;
	}
	.menu-right {
		top:75px;
		right:15px;
	}
	
	.fill-all {
		position: absolute;
		top: 0;
		left: 0;
		width:100%;
		height:100%;
		/*
		background-color: #0F0;
		*/
		z-index:400;
	}
	
	.main-menu {
		position: fixed;
		top:0px;
		left:0px;
		
		display: block;
		overflow: visible;
		
		box-shadow: none;
		min-height: 56px;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		box-sizing: border-box;
		flex-shrink: 0;
		width: 100%;
		margin: 0;
		padding: 0 12px 0 12px;
		border: none;
		max-height: 1000px;
		z-index: 3;
		box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
		
		.item {
			display:block;
			float: left;
			line-height: 56px;
			z-index: 4;
			margin: 0 3px 0 3px;
			border: 0;
			text-transform: uppercase;
			font-weight: bold;
			font-size: 17px;
			.comment {
				visibility: "hidden";
			}
			@media all and (min-width: 700px) {
				.comment {
					visibility: "visible";
				}
			}

		}
		
		.ariane {
			display:block;
			float: left;
			line-height: 56px;
			z-index: 4;
			padding: 0 0 0 15px;
			margin: 0 3px 0 3px;
			border: 0;
			text-transform: uppercase;
			font-weight: bold;
			font-size: 15px;
			.item_ariane_separator {
				display:block;
				float: left;
				line-height: 56px;
				z-index: 4;
				margin: 0 3px 0 3px;
				border: 0;
				text-transform: uppercase;
				font-weight: bold;
				font-size: 30px;
			}
		}
		
		.material-icons {
			vertical-align: middle;
		}
		
		.avatar {
			height:42px;
			width:42px;
			border-radius: 50%;
			vertical-align: middle;
		}
	}
}