.header { height: 5rem; padding: 0; background: $black; }
.header .logo { display: block; position: absolute; left: 0; top: 1.5em; }

/* Main navigation */

.main-nav { margin: 0; position: absolute; right: 0; top: 0; }
.main-nav ul { margin: 0; }
.main-nav ul li { padding: 0 1rem; margin: 0; background: none; display: inline-block; }
.main-nav ul li a { color: $white; font-size: 0.9em; display: block; line-height: 5rem; white-space: nowrap; padding: 0; }
.main-nav ul li a:hover, .main-nav ul li a:active { color: $white; }
.main-nav ul li.active a { color: $black; }

.menu-trigger { border: none; width: 2.75rem; height: 2.75rem; position: absolute; right: 0.7em; top: 0.7em; display: none; text-align: center; padding: 0.5em; z-index: 1100; }
.menu-trigger .icon-menu { fill: $white; width: 1.75rem; height: 1.75rem; display: block; }

.login { margin: 0; position: absolute; right: 0; top: 0; }
.login ul { margin: 0; }
.login ul li { margin: 0; padding: 0 0.5em; display: inline-block; }
.login ul li a:not(.btn) { color: $white; font-size: 0.9em; display: block; line-height: 5.55em; white-space: nowrap; }
.login ul li a.btn { vertical-align: middle; }

@media screen and (max-width: $xs) {
	.menu-trigger { display: block; }

	.header { height: auto; min-height: 4em; width: 100%; }
	.header .logo { top: 1.25em; left: 1.25em; }
	
	.main-nav { background: $black; z-index: 1050; width: 100%; min-height: 100vh; left: 100%; margin: 0; top: 0; padding: 6em 1em 1em 1em; position: absolute; transition: left 0.25s ease-in; }
	.main-nav ul { width: 100%; }
	.main-nav ul li { display: block; width: 100%; padding: 0; }
	.main-nav ul li a { line-height: 3.3; font-size: 1em; text-decoration: none; color: $white; }
	.main-nav ul li a { display: block; }
	.main-nav ul li a:after { display: none; }
	.main-nav ul li a:hover, .main-nav li a:active, .main-nav li a:focus { color: $white; }

	.menu-open { overflow: hidden; height: 100vh; }
	.menu-open .main-nav { left: 0; }
	.menu-open .icon-menu { fill: $white; }
} 