/* FLEXBOX PREFIX */
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;		}
@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;		}
@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;			}
@font-face{
	font-family: "blacksword";
    src: url('../font/blacksword.otf'),
    url('../font/blacksword.otf'); /* IE */
}

/* MENU */



#menu {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;}
	
.menupoint a{
	height: 150px;
	line-height: 150px;
	padding: 0 20px;
	font-size: 150%;
	font-weight: 200;
	display: block;}
.menupoint a:hover {
	background: var(--bg-neut);}
.on a, .on a:hover{
	text-decoration: underline;	}
/* MENU END */

/* SUBMENU */
#submenu {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;}
.submenupoint a , .submenupoint span{
	height: 75px;
	line-height: 75px;
	padding: 0 20px;
	font-size: 125%;
	font-weight: 200;
	display: block;}
.submenupoint a:hover {
	background: var(--bg-dark);	}
	
/* SUBMENU END */

/* LANGUAGEMENU */
.ita{
	font-style: italic;
}
#navi {
	position:			fixed;
	top:				0;
	left:				0;
	width:				80px;
	height:				100%;
	z-index:			2000;
	
	border-right:		2px solid rgba(230,230,230,1.0);
	background:			url(../images/banderole.jpg) top left no-repeat;
-webkit-background-size:cover;
-moz-background-size:	cover;
-o-background-size:		cover;
	background-size:	cover;

	display:			flex;
	flex-direction:		column;
	flex-wrap:			wrap;
	justify-content:	space-between;
	align-items:		center;
	align-content:		center;
}
#floral{
	text-align: center;
}
#floral img{
	width:				80%;
	margin:				auto;
	-webkit-filter:		grayscale(100%); /* Safari 6.0 - 9.0 */
    filter:				grayscale(100%);
	
	-webkit-transition:	0.25s -webkit-filter linear;
	-moz-transition:	0.25s -moz-filter linear;
	-moz-transition:	0.25s filter linear;
	-ms-transition:		0.25s -ms-filter linear;
	-o-transition:		0.25s -o-filter linear;
	transition:			0.25s filter linear;
}
#floral img:hover{
	-webkit-filter:		grayscale(0%); /* Safari 6.0 - 9.0 */
    filter:				grayscale(0%);
	
	-webkit-transition:	0.25s -webkit-filter linear;
	-moz-transition:	0.25s -moz-filter linear;
	-moz-transition:	0.25s filter linear;
	-ms-transition:		0.25s -ms-filter linear;
	-o-transition:		0.25s -o-filter linear;
	transition:			0.25s filter linear;
}
#hover{
	width:				100%;
	height:				80px;
	padding-bottom:		20px;
}
#hover img{
	max-width:			50%;
	padding:			20px;
	margin:				auto;
	opacity:			1;
	
	-webkit-transition: opacity 0.25s linear;
	-moz-transition: opacity 0.25s linear;
	-ms-transition: opacity 0.25s linear;
	-o-transition: opacity 0.25s linear;
	transition: opacity 0.25s linear;
}
#hover:hover img{
	opacity:			0.5;
}

#hover ul{
	opacity: 0;

	position: absolute;
	top: 0px;
	left: 80px;
	padding-left: 2px; /* Ausgleich graue Linie */
	
	visibility: hidden;
	opacity: 0;
	
	display:			flex;
	flex-direction:		row;
	flex-wrap:			nowrap;
	justify-content:	flex-start;
	align-items:		flex-start;
	align-content:		flex-start;
	
	-webkit-transition: visibility 0s, opacity 0.5s linear;
	-moz-transition: visibility 0s, opacity 0.5s linear;
	-ms-transition: visibility 0s, opacity 0.5s linear;
	-o-transition: visibility 0s, opacity 0.5s linear;
	transition: visibility 0s, opacity 0.5s linear;
}
#hover:hover ul{
  visibility: visible;
  opacity: 1;
}
#hover ul li{
	padding-bottom: 20px;
}
#hover ul li a{
	display: block;
	width: calc(47vw / 4);
	height: 80px;
	text-align: center;
	line-height: 80px;
	background: white;
	
	letter-spacing: 0px;
	
	-webkit-transition: letter-spacing 0.25s linear;
	-moz-transition: letter-spacing 0.25s linear;
	-ms-transition: letter-spacing0.25s linear;
	-o-transition: letter-spacing 0.25s linear;
	transition: letter-spacing 0.25s linear;
}
#hover ul li a:hover{
	letter-spacing: 1px;
	text-decoration: none;
}
#about{
	margin:				20px 0;
}
#about a{
	color: 				grey;
}
.sidemenupoint {
	width: 100%;
	float: left;
	text-align: center;
	padding: 10px 0px;	}
.langmenupoint {
	width: 50%;
	float: left;
	text-align: center;
	padding: 10px 0px;	}	
.langmenupoint a:hover{
	border-bottom: 1px solid white;	}
	
/* LANGUAGEMENU END */