.header {
	@extend %layer-8;
	background: $color-gray;
	color: $color-gray-light;
	height: 125px;
	left: 0;
	overflow: hidden;
	position: fixed;
	right: 0;
	top: 0;

	&.sticky {
		height: 105px;

		.header-nav {
			font-size: 12px;
			height: 50px;

			.header-nav-group {
				padding: 7px 10px;

				&:first-child {
					padding-left: 30px;
				}
			}
		}
	}
}

.header-info-wrapper {
	background: #fff;
	height: 55px;
	overflow: hidden;

	.header-info {
		@include clearfix;
	}

	.header-website {
		color: $color-blue;
		font-size: 1.375em;
		font-style: italic;
		line-height: 55px;
		margin-left: 30px;

		&:focus,
		&:hover {
			color: darken($color-blue, 5);
		}
	}

	.header-files-statistics {
		float: right;
		height: 55px;
		line-height: 55px;
		white-space: nowrap;
	}

	.header-group {
		color: $color-black;
		display: inline-block;
		font-size: 1.125em;
		height: 55px;
		margin-right: 30px;
	}

	.header-group-number {
		font-size: 1.5em;
	}

	.header-group-divider {
		border-right: 1px solid #ccc;
		display: inline-block;
		height: 30px;
		margin-right: 10px;
		padding-left: 15px;
		transform: rotate(20deg);
		width: 1px;
	}

	@include respond-to(1024, 'max') {
		font-size: 11px;
	}
}

.header-nav {
	box-sizing: border-box;
	display: inline-block;
	font-size: 16px;
	height: 70px;
	vertical-align: middle;

	.header-nav-group {
		border-right: 1px solid #3f3f3f;
		display: inline-block;
		padding: 14px 20px;

		&:first-child {
			padding-left: 30px;
		}
	}

	button {
		display: inline-block;
	}
}
