@charset "UTF-8";
/* 1st: manage Header: no Header if height is TOO small*/
@media only screen and (min-height: 0px) and (max-height: 550px) {
	.Header {
		max-height: 0px;
		height: 0px;
		opacity: 0;
	}
	#Logo {
		width:30px;height:47px;
		width:25px;height:40px;
	}
	.LogoBox {
		left: 10px;
		padding-top: 2px;
	}
	.MainContentContainer {
		min-height: calc(100% - 3em - 5px);
		height: calc(100% - 3em - 5px);
	}
}

/* 1st: manage Header: small Header if height is small*/
@media only screen and (min-height: 551px) and (max-height: 700px), screen and (max-width: 700px) and (min-height: 700px) {
	.Header {
		max-height: 54px;
		height: 54px;
		opacity: 1;
	}
	#Logo {
		width:30px;height:47px;
		width:25px;height:40px;
	}
	.LogoBox {
		left: 10px;
		padding-top: 2px;
	}
	.MainContentContainer {
		min-height: calc(100% - 3em - 59px);
		height: calc(100% - 3em - 59px);
	}
}

@media only screen and (min-width: 0px) and (max-width: 450px) {
.UpperMenuBox {
	justify-content: space-between;
}
.FlexMenuBoxItem, .SmallLinkMenuBoxItem, .SearchOptionsMenuBoxItem, .OptionsMenuBoxItem {
	min-width:0 !important;
	max-width:30px;
	flex: 1;
}
.ProfileListLastCol {
	visibility: hidden;
}
}

@media only screen and (min-width: 0px) and (max-width: 700px) {
.UpperMenuBox {
	transition: all var(--transitiontime) ease;
}
.UpperMenuBoxIconTitle {
	display: none;
}
.FlexMenuBoxItem, .SmallLinkMenuBoxItem, .SearchOptionsMenuBoxItem {
	width: 50px;
	min-width:50px;
}
.UpperLayerContentContainer {
	transition: none;
} 
.MainContentContainer {
	transition: none;
} 
.MainContentContainer[data-options='visible'] .MainContent {
	filter: blur(2px);
	width: calc(100vw - var(--grabButtonWidth));
}
.UpperMenuBox {
	justify-content: space-between;
}
.FlexMenuBoxItem, .SmallLinkMenuBoxItem, .SearchOptionsMenuBoxItem, .OptionsMenuBoxItem {
	min-width:0 !important;
	max-width:30px;
	flex: 1;
}
#ContactMenuBoxItem {
	margin-right:10px;
}
#SearchOptionsMenuBoxItem {
	margin-left:10px;
}

}

@media only screen and (max-width: 1115px) {
.FlexMenuBoxItem, .SmallLinkMenuBoxItem {
	width: 50px;
	min-width:50px;
}
.UpperMenuBoxIconTitle {
	width: 0px;
	margin-left: 0px;
	display: none;
}
}
