/**********************************************************
// Block >> Header
**********************************************************/
.Block-Header {
	padding: 11.375rem var(--20px) var(--90px) var(--20px);
	background: var(--Color-Blue-1);
	display: flex;
	align-items: center;
	position: relative;
	}

body .post .Block-Header.alignfull {
	margin: auto !important;
	width: 100% !important;
	min-width: 100% !important;
	}

.Block-Header-Top {
	padding: 0 var(--15px);
	position: absolute;
	z-index: 500;
	top: var(--20px);
	right: 0;
	left: 0;
	}

.Modal-Nav-Top { top: 1.5625rem; }
body.admin-bar .Modal-Nav-Top { top: 3.5625rem; }

/**********************************************************
// Block >> Header >> Background
**********************************************************/
.Block-Header-BG-Desktop,
.Block-Header-BG-Mobile {
	overflow: hidden;
	position: absolute;
	z-index: 100;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	}

.Block-Header-BG-Mobile { display: none; }

.Block-Header-BG-Desktop img,
.Block-Header-BG-Mobile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
    object-position: center center;
	}

.Block-Header-BG-Mobile img { object-position: top center; }

.Block-Header-BG-Desktop:after,
.Block-Header-BG-Mobile:after {
	padding-bottom: 150%;
    content: '';
    display: block;
	}

/**********************************************************
// Block >> Header >> Video
**********************************************************/
#Block-Header-Video-Desktop,
#Block-Header-Video-Mobile {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	position: absolute;
	z-index: 200;
	left: 50%;
	top: 50%;
  	transform: translate(-50%, -50%);
	}

#Block-Header-Video-Mobile { display: none; }

.Block-Header-Video-Mask {
	opacity: 0.85;
	background-color: var(--Color-Blue-1);
	position: absolute;
	z-index: 300;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	}

/**********************************************************
// Block >> Header >> YouTube
**********************************************************/
.Block-Header-YT {
	overflow: hidden;
	position: absolute;
	z-index: 200;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	}

.Block-Header-YT iframe {
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

@media (min-aspect-ratio: 16/9) {
	.Block-Header-YT iframe {
		/* height = 100 * (9 / 16) = 56.25 */
		height: 56.25vw;
	}
}

@media (max-aspect-ratio: 16/9) {
	.Block-Header-YT iframe {
		/* width = 100 / (9 / 16) = 177.777777 */
		width: 177.78vh;
	}
}

/**********************************************************
// Block >> Header >> Masks
**********************************************************/
.Block-Header-Mask-Desktop {
	display: block;
	background: linear-gradient(to right, rgba(0, 101, 157, 1) 0%, rgba(0,0,0,0) 100%);
	position: absolute;
	z-index: 400;
	bottom: 0;
	right: 50%;
	left: 0;
	top: 0;
	}

.Block-Header-Mask-Mobile {
	display: none;
	height: var(--200px);
	background: linear-gradient(to bottom, rgba(0, 101, 157, 1) 0%, rgba(0,0,0,0) 100%);
	position: absolute;
	z-index: 400;
	right: 0;
	left: 0;
	top: 0;
	}

/**********************************************************
// Block >> Header >> Main
**********************************************************/
.Block-Header-Main {
	margin: auto;
	width: 100%;
	max-width: 81.25rem;
	color: var(--Color-White);
	position: relative;
	z-index: 1000;
	}

.Block-Header-Main h1 {
	padding: 0 !important;
	line-height: 1.1em;
	text-transform: uppercase;
	letter-spacing: var(--1px);
	font-family: var(--Font-Titles);
	font-weight: 300;
	font-size: var(--90px);
	}

.Block-Header-Main h2 {
	padding: 0 !important;
	line-height: 0.85em;
	font-family: var(--Font-Script);
	font-weight: 400;
	font-size: 5rem;
	color: var(--Color-Yellow);
	}

.Block-Header-Main-Text {
	width: 100%;
	max-width: 21.875rem;
	line-height: 1.5em;
	font-size: var(--18px);
	}

.Block-Header-Main-Button {
	margin-top: var(--20px);
	padding: var(--7px) var(--30px);
	border-radius: var(--30px);
	line-height: 1.5em;
	background: var(--Color-Yellow);
	color: var(--Color-Blue-1);
	text-transform: uppercase;
	letter-spacing: var(--1px);
	font-family: var(--Font-Condsd);
	font-weight: 700;
	font-size: var(--16px);
	display: inline-block;
	}

.Block-Header-Main-Button:hover,
.Block-Header-Main-Button:focus {
	background: var(--Color-Red);
	color: var(--Color-White);
	}

/**********************************************************
// Media Queries
**********************************************************/
@media /* 1600px */
all and (min-width: 100rem),
all and (min-device-width: 100rem)
{
	/*.Block-Header { padding: 17.625rem var(--40px) var(--300px) var(--40px); }*/
}

@media /* 1024px */
all and (max-width: 64rem),
all and (max-device-width: 64rem)
{
	.Block-Header { padding: 7.5rem var(--40px) var(--60px) var(--40px); }
	.Block-Header-Top { padding: 0 var(--30px); }
	
	body.home .Block-Header { padding-bottom: var(--90px); }
	body.page-id-11 .Block-Header { padding-bottom: var(--80px); }
}

@media /* 768px */
all and (max-width: 48rem),
all and (max-device-width: 48rem)
{
	.Modal-Nav-Top { top: 1.875rem; }
	body.admin-bar .Modal-Nav-Top { top: 4.75rem; }

	.Block-Header-Top { padding: 0 var(--15px); }
	.Block-Header-Top .Header-Button { display: none; }
	.Block-Header-Top .Header-Link { margin-left: 0; }

	.Block-Header-BG-Desktop { display: none; }
	.Block-Header-BG-Mobile { display: block; }

	.Block-Header-Main { text-align: center; }
	.Block-Header-Main-Text { margin: auto; }

	#Block-Header-Video-Desktop { display: none; }
	#Block-Header-Video-Mobile { display: block; }

	.Block-Header-Mask-Desktop { display: none; }
	.Block-Header-Mask-Mobile { display: block; }
}

@media /* 500px */
all and (max-width: 31.25rem),
all and (max-device-width: 31.25rem)
{
	.Block-Header { padding: 18.625rem var(--20px) var(--60px) var(--20px); }
	
	body.home .Block-Header { padding-bottom: var(--60px); }
	body.page-id-11 .Block-Header { padding-bottom: var(--60px); }
	
	.Block-Header-Main { margin-bottom: var(--30px); }
	.Block-Header-Main-Text { display: none; }

	.Block-Header-Main h1 { font-size: var(--60px); }
	.Block-Header-Main h2 { font-size: 3.5rem; }
}