/**********************************************************
// Header
**********************************************************/
.Header {
	padding: var(--10px) var(--15px);
	width: 100%;
	text-align: center;
	background: var(--Color-Blue-1);
	color: var(--Color-White);
	box-shadow: 0 var(--3px) var(--6px) rgba(0, 0, 0, 0.16);
	position: relative;
	z-index: 5000;
	}

.Header-Inner {
	margin: auto;
	width: 100%;
	max-width: 81.25rem;
	display: flex;
	}

.Header-Logo {
	margin: 0;
	padding: var(--5px);
	border-radius: var(--4px);
	display: inline-block;
	vertical-align: top;
	line-height: 0;
	font-size: 0;
	}

.Header-Logo img {
	width: auto;
	height: auto;
	max-height: 4.0625rem;
	}

.Header-Logo:focus { outline: var(--1px) dashed rgba(255, 255, 255, 0.5); }

.Header-Right { margin: var(--5px) 0 0 auto; }

/**********************************************************
// Header >> Button
**********************************************************/
.Header-Button {
	padding: var(--5px) var(--15px);
	border-radius: var(--30px);
	border: var(--2px) solid var(--Color-White);
	color: var(--Color-White);
	line-height: 1.1em;
	text-transform: uppercase;
	letter-spacing: var(--1px);
	font-family: var(--Font-Condsd);
	font-weight: 700;
	font-size: var(--15px);
	display: inline-block;
	vertical-align: middle;
	}

.Header-Button:hover,
.Header-Button:focus {
	background: var(--Color-Yellow);
	border: var(--2px) solid var(--Color-Yellow);
	color: var(--Color-Blue-1);
	}

/**********************************************************
// Header >> Link
**********************************************************/
.Header-Link:hover,
.Header-Link:focus { color: var(--Color-Yellow); }
.Header-Link {
	margin: 0 0 0 var(--30px);
	line-height: 1.5em;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.09375rem;
	font-family: "museo-sans-condensed", sans-serif;
	font-weight: 700;
	font-size: var(--17px);
	color: var(--Color-White);
	display: inline-block;
	vertical-align: middle;
	}

.Header-Link i {
	margin-right: var(--3px);
	font-size: 1.375rem;
	display: inline-block;
	vertical-align: middle;
	}

.Header-Link span {
	line-height: 1em;
	display: inline-block;
	vertical-align: middle;
	}

/**********************************************************
// Header >> Nav: Menu
**********************************************************/
.Header-Nav-Menu {
	margin: 0 0 0 var(--30px);
	padding: 0 !important;
	width: var(--40px);
	height: var(--40px);
	line-height: var(--40px);
	border: 0;
	border-radius: 100%;
	background: var(--Color-Yellow);
	color: var(--Color-Blue-1);
	font-size: var(--20px);
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	}

.Header-Nav-Menu:hover,
.Header-Nav-Menu:focus {
	background: var(--Color-Red);
	color: var(--Color-White);
	}

/**********************************************************
// Media Queries
**********************************************************/
@media /* 1024px */
all and (max-width: 64rem),
all and (max-device-width: 64rem)
{

}

@media /* 768px */
all and (max-width: 48rem),
all and (max-device-width: 48rem)
{
	.Header-Logo img { max-height: var(--40px); }

	.Header-Right {
		display: flex;
		align-items: center;
		}

	.Header .Header-Button { display: none; }
	.Header .Header-Link { margin-left: 0; }

	.Header-Link i {
		margin: auto;
		display: block;
		}

	.Header-Link span {
		margin-top: var(--5px);
		font-size: var(--15px);
		display: block;
		}
}