@import "@{parenturl}/less/mixins.less";
@import "@{themeurl}/less/vars.less";

#header {
	background-color:fade(#fff, 80);
	.blur(20px);
	border-top:13px solid @orange;
	> div {
		.max-width(1750px);
		padding:25px;
		display:grid;
		grid-template-columns:auto 1fr;
		align-items:center;
		justify-items:end;
		grid-gap:25px;
	}
	
	nav {
		background-color:@blue;
		text-align:center;
		ul.nav > li {
			.max({ font-size:15px; }, 960);
		}
		li {
			.hover();
		}
	}
	#logo {
		img {
			width:auto;
		}
	}
}

#header-info {
	display:grid;
	grid-gap:15px;
	grid-template-columns:auto 2px auto;
	a, div {
		display:grid;
		grid-gap:5px 10px;
		padding:10px;
		align-items:center;
		justify-items:start;
		grid-template-columns:auto 1fr;
		.font(Montserrat, 400, 24px);
		svg {
			grid-column:1;
			grid-row:1 / span 2;
			height:1.5em;
			width:1.5em;
			fill:#808080;
		}
		span {
			.inherit(@blue);
			.font();
		}
		b {
			.inherit(@orange);
			.font();
		}
	}
	hr {
		color:@blue;
		width:100%;
		height:100%;
		margin:0;
	}
}

body {
	padding-top:176px;
}

#header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:999;
}

#header {
	border-top:13px solid @orange;
	.transition(border-top);
	> div {
		padding:25px;
		.transition(padding);
	}
	#logo img {
		height:70px;
		.transition(height);
	}
	#header-info {
		a, div {
			font-size:24px;
			.max({ font-size:18px; }, 1080);
			.transition(font-size);
		}	
	}
}
#header.shrink {
	@shrink: .7;
	border-top:(13px * @shrink) solid @orange;
	> div {
		padding:(25px * @shrink) 25px;
	}
	#logo img {
		height:(70px * @shrink);
	}
	#header-info {
		a, div { font-size:(24px * @shrink); }	
		.max({ font-size:(18px * @shrink); }, 1080);
	}
}