/**********************************************************
// Header >> Main
**********************************************************/
.Header-Main { padding: var(--30px) var(--20px) 0 var(--20px); }
.Header-Main-Inner {
	margin: auto;
	width: 100%;
	max-width: 76.875rem;
	display: flex;
	}

.Header-Main-Right {
	margin-top: var(--10px);
	margin-left: auto;
	padding: var(--14px) var(--40px) 0 0;
	font-size: 0;
	}

/**********************************************************
// Header >> Main >> Logo
**********************************************************/
.Header-Main-Logo {
	margin: 0;
	display: inline-block;
	vertical-align: top;
	line-height: 0;
	font-size: 0;
	}

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

.Header-Main-Logo:hover img { opacity: 1; }
.Header-Main-Logo:focus { outline: 0; }
.Header-Main-Logo:focus-visible {
	outline: 2px dotted var(--Color-Gray);
	-webkit-border-top-right-radius: 1.5625rem;
	-webkit-border-bottom-left-radius: 1.5625rem;
	-moz-border-radius-topright: 1.5625rem;
	-moz-border-radius-bottomleft: 1.5625rem;
	border-top-right-radius: 1.5625rem;
	border-bottom-left-radius: 1.5625rem;
	}

.Header-Main-Logo-Mobile img { max-height: var(--50px); }
.Header-Main-Logo-Mobile { display: none; }

/**********************************************************
// Header >> Main >> Phone
**********************************************************/
.Header-Main-Phone {
	margin-right: var(--30px);
	display: inline-block;
	vertical-align: middle;
	}

.Header-Main-Phone a:hover,
.Header-Main-Phone a:focus,
.Header-Main-Phone a:focus-visible { color: var(--Color-Orange); }
.Header-Main-Phone a {
	font-family: var(--Font-Title);
	font-weight: 400;
	font-size: var(--20px);
	color: var(--Color-White);
	}

.Header-Main-Phone i {
	margin-right: 0.375rem;
	font-size: var(--16px);
	transform: rotate(-45deg);
	position: relative;
	top: -0.125rem;
	}

/**********************************************************
// Header >> Nav: Menu
**********************************************************/
.Header-Nav-Menu {
	margin: 0;
	padding: 0;
	width: 3rem;
	height: 3rem;
	border-radius: 100%;
	background-color: var(--Color-Red);
	line-height: 0;
	text-transform: none;
	overflow: visible;
	cursor: pointer;
	border: 0;
	display: inline-block;
	vertical-align: middle;
	transition-property: background-color, filter;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
	position: fixed;
	z-index: 999999;
	top: var(--40px);
	right: 9.5%;
	}

body.admin-bar .Header-Nav-Menu { top: 4.5rem; }

.Header-Nav-Menu:focus { outline: 0; }
.Header-Nav-Menu:hover,
.Header-Nav-Menu:focus-visible { background-color: var(--Color-Orange); }

.Header-Nav-Menu-Box {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	}

.Header-Nav-Menu-Bars {
	width: 1.5rem;
	height: 0.0625rem;
	position: relative;
	}

.Header-Nav-Menu-Bars:before {
	content: '';
	width: 100%;
	height: 0.0625rem;
	position: absolute;
	top: -0.3125rem;
	left: 0;
	}

.Header-Nav-Menu-Bars:after {
	content: '';
	width: var(--16px);
	height: 0.0625rem;
	position: absolute;
	bottom: -0.3125rem;
	left: 0;
	}

.Header-Nav-Menu-Bars,
.Header-Nav-Menu-Bars:before,
.Header-Nav-Menu-Bars:after { background-color: var(--Color-White); }

/**********************************************************
// Media Queries
**********************************************************/
@media /* 1500px */
all and (max-width: 93.75rem),
all and (max-device-width: 93.75rem)
{
	.Header-Nav-Menu { right: 4%; }
}

@media /* 1280px */
all and (max-width: 80rem),
all and (max-device-width: 80rem)
{
	.Header-Nav-Menu { right: 1%; }
}

@media /* 1024px */
all and (max-width: 64rem),
all and (max-device-width: 64rem)
{
	.Header-Nav { display: none; }
	.Header-Nav-Menu { display: inline-block; }

	.Header-Main-Inner { padding-left: var(--20px); }

	.Header-Main-Logo-Desktop { display: none; }
	.Header-Main-Logo-Mobile { display: block; }

	.Header-Main-Right { margin-top: 0; }
	.Header-Main-Phone { display: none; }

	.Header-Nav-Menu {
		position: fixed;
		z-index: 9999;
		right: var(--20px);
		top: var(--20px);
		}

	body.admin-bar .Header-Nav-Menu { top: 3.25rem; }
}

@media /* 768px */
all and (max-width: 48rem),
all and (max-device-width: 48rem)
{
	.Header-Banner-Desktop { display: none; }
	.Header-Banner-Mobile { display: block; }

	body.admin-bar .Header-Nav-Menu { top: 4.125rem; }
}