@ui-change-duration: 0.25s;

.layout-headercover:not(.scrolled):not(.display-search):not(.display-fullmenu),
.home:not(.scrolled):not(.display-search):not(.display-fullmenu){
	.m1-md({
		.chobz-ui{
			--ui-color: var(--frontpage-ui-color);
			--ui-background-color: var(--frontpage-ui-background-color);
			--ui-shadow-opacity: var(--frontpage-ui-shadow-opacity);
		}
	});
}

.chobz-ui{
	//--ui-color: hsla(0,0%,50%,1);
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	//height: 75px;
	//height: var(--ui-size);
	//background-color: rgba(200,0,0,0.5);
	z-index: 90;
	font-weight: bold;
	//color: #878787;
	//mix-blend-mode: screen;
	color: black;
	color: var(--ui-color);
	.transition(all @ui-change-duration cubic-bezier(1, .3, .3, 1));
	//mix-blend-mode: luminosity;
	background-color: transparent;
	/*
	.home &{
		--ui-color: grey;
		--ui-background-color: white;
		mix-blend-mode: difference;
		filter: e('invert(1) grayscale(1) contrast(9)');
		.chobz-ui--left,
		.chobz-ui--right{
			.drop-shadow(0,0,0,0,0);
		}
	}
	/**/
	.m1-md({
		position: fixed;
	});
	a{
		text-decoration: none;
		color: inherit;
	}
	.chobz-ui--top,
	.chobz-ui--middle,
	.chobz-ui--bottom{
		position: absolute;
		width: 75px;
		height: 75px;
		width: var(--ui-size);
		height: var(--ui-size);
		//background-color: rgba(200,0,0,0.5);
		overflow: visible;
		text-align: center;
		vertical-align: middle;
	}
	.chobz-ui--top{
		right: 0;
		top: 0;
		.m1-md({
			right: auto;
			left: 0;
		});
	}
	.chobz-ui--middle{
		left: 0;
		top: 0;
		.m1-md({
			top: 50%;
		});
	}
	.chobz-ui--bottom{
		top: 0;
		right: 75px;
		right: var(--ui-size);
		.m1-md({
			top: auto;
			right: auto;
			left: 0;
			bottom: 0;
		});
	}
	.chobz-ui--left,
	.chobz-ui--right{
		pointer-events: all;
		position: absolute;
		top: 0;
		width: 100%;
		height: 75px;
		height: var(--ui-size);
		z-index: 5;
		overflow: hidden;
		.m1-md({
			width: 75px;
			width: var(--ui-size);
			height: 100%;
		});
		//background-color: rgba(0,0,0,0.5);
		//background-color: hsla(0,0%,0%,0.5);
		background-color: white;
		background-color: var(--ui-background-color);
		//body:not(.home) & {
		@shadow-values: e('0 0 50px 0 rgba(0, 0, 0, var(--ui-shadow-opacity))');
			//.drop-shadow(0,0,50px,0,@shadow-opacity);
		.box-shadow(@shadow-values);
		.transition(all @ui-change-duration cubic-bezier(1, .3, .3, 1));
		//}
	}
	.chobz-ui--left{
		left: 0;
		.chobz-ui--middle{
			.m1-md({
				.translateY(-75%);
			});
		}
	}
	.chobz-ui--right{
		display: none;
		.m1-md({
			display: block;
		});
		right: 0;
		.chobz-ui--middle{
			top: 75px;
			top: var(--ui-size);
			margin-top: 0;
		}
	}

	.chobz-ui--logo,
	.chobz-ui--shortmenu,
	.chobz-ui--hamburger,
	.chobz-ui--lang,
	.chobz-ui--search,
	.chobz-ui--social{
		color: black;
		color: var(--ui-color);
		//mix-blend-mode: difference;
		//mix-blend-mode: luminosity;
		//filter: e('invert(1) grayscale(1) contrast(9)');
		.transition(all @ui-change-duration cubic-bezier(1, .3, .3, 1));
	}


	.chobz-ui--logo{
		display: block;
		position: absolute;
		width: 200px;
		height: 40px;
		top: 50%;
		left: 10px;
		text-align: left;
		margin-top: -20px;
		.m1-md({
			width: 275px;
			//background-color: green;
			left: 50%;
			.translate-rotate(-50%,-50%,-90deg);
			line-height: 50px;
			text-align: center;
			margin-top: 0;
		});
		.logo{
			max-width: 100%;
			max-height: 100%;
			path{
				//fill: #878787;
				fill: black;
				fill: var(--ui-color);
				.transition(all @ui-change-duration cubic-bezier(1, .3, .3, 1));
			}
		}
	}

	.chobz-ui--shortmenu{
		display: block;
		width: auto;
		height: 50px;
		//background-color: green;
		position: absolute;
		top: 0;
		//left: 75%;
		left: 83%;
		transform-origin: top left;
		.rotate(90deg);
		line-height: 50px;
		text-align: left;
		pointer-events: none;
		z-index: 5;
	}

	.chobz-ui--hamburger{
		display: block;
		width: 50px;
		height: 50px;
		//background-color: green;
		position: absolute;
		top: 50%;
		left: 50%;
		.translate(-50%,-50%);
		line-height: 60px;
		.menu-icon{
			display: inline;
			width: 18px;
			path{
				//fill: #878787;
				fill: black;
				fill: var(--ui-color);
				.transition(all @ui-change-duration cubic-bezier(1, .3, .3, 1));
			}
			.display-fullmenu &{
				display: none;
			}
		}
		.menu-close{
			display: none;
			width: 22px;
			path{
				//fill: #878787;
				fill: black;
				fill: var(--ui-color);
				.transition(all @ui-change-duration cubic-bezier(1, .3, .3, 1));
			}
			.display-fullmenu &{
				display: inline;
			}
		}
	}
	.chobz-ui--lang{
		display: block;
		width: 50px;
		height: 50px;
		//background-color: green;
		position: absolute;
		top: 50%;
		left: 50%;
		.translate(-50%,-50%);
		line-height: 50px;
	}
	.chobz-ui--search{
		display: block;
		width: 50px;
		height: 50px;
		//background-color: green;
		position: absolute;
		top: 50%;
		left: 50%;
		.translate(-50%,-50%);
		line-height: 60px;
		.search-icon{
			display: inline;
			width: 20px;
			path{
				//fill: #878787;
				fill: black;
				fill: var(--ui-color);
				.transition(all @ui-change-duration cubic-bezier(1, .3, .3, 1));
			}
			.display-search &{
				display: none;
			}
		}
		.search-close{
			display: none;
			width: 22px;
			path{
				//fill: #878787;
				fill: black;
				fill: var(--ui-color);
				.transition(all @ui-change-duration cubic-bezier(1, .3, .3, 1));
			}
			.display-search &{
				display: inline;
			}
		}
	}
	.chobz-ui--social{
		display: block;
		width: 50px;
		height: 50px;
		//background-color: green;
		position: absolute;
		top: 50%;
		left: 50%;
		.translate(-50%,-50%);
		line-height: 50px;
	}
	.chobz-ui--searchoverlay{
		z-index: 1;
		background-color: #fff;
		background-color: var(--ui-search-background-color);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-left: 50px;
		padding-right: 50px;
		.m1-md({
			padding-left: 100px;
			padding-right: 100px;
		});
		.transition(all 0.15s cubic-bezier(1, .3, .3, 1));
		opacity: 0;
		.display-search &{
			opacity: 1;
			pointer-events: all;
		}
	}
	.chobz-ui-searchoverlay--inner{
		width: 100%;
	    max-width: 980px;
	    position: relative;
	    top: 15px;
		left: 50%;
		.translate(-50%,0);
		.search-field{
			padding: 30px;
			font-size: 2em;
			border: none;
			background-color: rgba(0,0,0,0.5);
			width: 100%;
			color: white;
		}
		.search-submit{
			display: none;
		}
	}
	.chobz-ui--fullmenu{
		z-index: 2;
		background-color: #000;
		background-color: var(--ui-fullmenu-background-color);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-left: 50px;
		padding-right: 50px;
		overflow-x: hidden;
        overflow-y: hidden;
		&.scrollable{
			overflow-y: auto;
		}
        -webkit-overflow-scrolling: touch;
		.m1-md({
			padding-left: 100px;
			padding-right: 100px;
		});
		.transition(all 0.25s cubic-bezier(1, .3, .3, 1));
		//opacity: 0;
		.display-fullmenu &{
			//opacity: 1;
			pointer-events: all;
		}
		body:not(.display-fullmenu) &{
			.translate(-100%, 0%);
		}
	}
	.chobz-ui-fullmenu--inner{
		width: 100%;
	    max-width: 980px;
	    position: relative;
	    top: 15px;
		left: 50%;
		.translate(-50%,0);
	}
}

e('@media screen\0 {');
	.chobz-ui .chobz-ui--logo{
		.translate-rotate(-38%,-50%,-90deg) !important;
	}
	.chobz-ui .chobz-ui--search{
		.translate(20%,20%) !important;
	}
	.chobz-ui .chobz-ui--hamburger{
		.translate(20%,20%) !important;
	}
	.chobz-ui .chobz-ui--lang{
		.translate(20%,-100%) !important;
	}
	.chobz-ui .chobz-ui--social{
		.translate(20%,-100%) !important;
	}
	.chobz-ui .chobz-ui--shortmenu{
		.translate-rotate(9%,0,90deg) !important;
	}
e('}');
/*
.site{
	.max-md({
		.admin-bar &{
			margin-top: 75px;
			margin-top: var(--ui-size);
		}
	});
}
*/

.taxonomy-description,
.site-header,
.site-content,
.site-footer,
.footer-navigation-container,
.footer-infobox,
.footer-backlink{
	.m1-md({
		padding-left: 100px;
		padding-right: 100px;
	});
}

.shortmenu{
	width: 80vh;
}
.ui-primary-menu{
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left: 0;
	padding-left: 0;
	li{
		display: block;
		float: left;
		position: relative;
		width: auto;
		height: auto;
		text-transform: uppercase;
		font-size: 0.9em;
		letter-spacing: 1px;
		&:not(:last-child){
			padding-right: 20px;
		}
		//background-color: white;
		//background-color: var(--ui-background-color);
		pointer-events: all;
	}
}

.ui-full-menu{
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left: 0;
	padding-left: 0;
	position: relative;
	.max-md({
		padding-top: 80px;
		padding-bottom: 50px;
	});
	a {
		color: white;
		color: var(--ui-fullmenu-color);
		.transition(color 0.15s cubic-bezier(1, .3, .3, 1));
		&:hover,
		&:focus,
		&:active{
			color: var(--global-secondary-color);
		}
	}
	.current-menu-item,
	.current-menu-ancestor,
	.current-menu-parent,
	.current_page_parent,
	.current_page_ancestor,
	.current-post-parent,
	.current-post-ancestor{
		& > a {
			color: var(--global-brand-color);
			&:hover,
			&:focus,
			&:active{
				color: var(--global-secondary-color);
			}
		}
	}
	.menu-item{
		display: block;
		position: relative;
		width: auto;
		height: auto;
		text-transform: uppercase;
		&.aside{
			a{
				font-size: 20px;
				font-weight: normal;
				opacity: 0.5;
			}
		}
	}
	& > .menu-item{
		margin-top: 20px;
		a{
			font-size: 50px;
			font-weight: bold;
			/*
			font-size: 2em;
			.m1-md({
				font-size: 5em;
			});
			*/
		}
	}
	.sub-menu{
		.clearfix();
		margin-top: -10px;
		padding-bottom: 20px;
		margin-left: 0;
		padding-left: 0;
		& > .menu-item{
			text-transform: none;
			.m1-md({
				float: left;
				margin-right: 20px;
			});
			&:last-child{
				margin-right: 0;
			}
			a{
				font-size: 30px;
				font-weight: normal;
				/*
				font-size: 1em;
				.m1-md({
					font-size: 2em;
				});
				*/
			}
		}
	}
}

/*
html.display-fullmenu {
	overflow: hidden;
}
body.display-fullmenu {
	overflow: visible;
	height: 100%;
}
*/

body{
	//position: static;
	//overflow-y: scroll;
	//overflow-x: hidden;
}
.display-search #page,
.display-fullmenu #page{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
