.HomeHeader {
    background: #FFFFFF;
}
	.HomeHeaderContent {
		display: flex;
		flex-direction: row;
		max-width: 1380px;
		margin: 0 auto;	
		min-height: 650px;
	}
	
	.HomeHeader .TextContainer {
		width: calc( 100% - 800px );
		order: 1;
		position: relative;
		padding-top: 66px;
		padding-bottom: 66px;
	}	
		.HomeHeader .TextContainer h1 {
			font-size: 48px;
			font-weight: bold;
		}
		.HomeHeader .TextContainer h2 {
			font-size: 24px;
			font-weight: 500;
		}
		.HomeHeader .TextContainer p {
			font-size: 18px;
		}
		.HomeHeader .TextContainer a {
			text-decoration: none;
			text-transform: uppercase;
			padding: 1em 2em;
			border-radius: 1.5em;
			display: inline-block;
			font-weight: bold;
			background: #00AEF0;
			color: #FFFFFF;
		}
			.HomeHeader .TextContainer li {
				margin: 4px 0px; 
				line-height: 1.2em;
		}

		.HomeHeader .TextContainer li a,
		.HomeHeader .TextContainer li a:hover,
		.HomeHeader .TextContainer li a:active, 
		.HomeHeader .TextContainer li a:link {
			text-decoration: none;
			colour: #000000 !important;
			text-transform: inherit;
			padding: 0 0.4em !important;
			border-radius: 0.5em !important;
			display: inline !important;
			font-weight: normal !important;
			background: #57595F !important;
			white-space: nowrap;
		}
		.HomeHeader .TextContainer li a:hover {
			background: #00AEF0 !important;
		}



	.HomeHeader .PreviewContainer {
		width: 800px;
		height: 650px;
		order: 2;
		position: relative;
	}

		.HomeHeader .PreviewContainer .Image {
			height: 100%;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
			margin-left: 1em;
		}

	.PreviewContainer img.backgroundImage{
		position: absolute;
		z-index: 0;
		border-radius: 1px;
		overflow: hidden;
		margin: auto;
		width: initial !important;
		max-width: 800px !important;
	}

@media screen and (max-width: 1400px) {
	.HomeHeaderContent {
		max-width: 1000px;
		min-height: 540px;
	}
		.HomeHeader .TextContainer {
			width: calc( 100% - 500px );
		}
		.HomeHeader .PreviewContainer {
			height: 540px;
		}
		.HomeHeader .PreviewContainer .Image {
		}
		
}

@media screen and (max-width: 1060px) {
	.HomeHeaderContent {
		width: calc(100% - 80px);
		max-width: 840px;
		padding-left: 20px;
		padding-right: 20px;
		min-height: auto;
		display: block;
		flex-direction: unset;
	}
		.HomeHeader .TextContainer {
			width: 100%;
			padding-top: 33px;
			padding-bottom: 0;
		}
		.HomeHeader .PreviewContainer {
			margin: 33px 0 0 0;
			height: 435px;
			width: 100%;
		}
		.HomeHeader .PreviewContainer .Image { margin-left: 0; }
}

@media screen and (max-width: 520px) {

	.HomeHeader .PreviewContainer {
		height: 320px;
	}
	/*
		.HomeHeader .PreviewContainer .Overlay {
			width: 300px;
			height: 300px;
		}			
	.HomeHeader .PreviewContainer .Preview,
	.HomeHeader .PreviewContainer .ClickForFullScreen {
		left: 106px;
		top: 18px;
		width: 164px;
		height: 90px;
	}
		.HomeHeader .PreviewContainer .Preview:before { transform: scale(0.5); }
		.HomeHeader .PreviewContainer .Preview:after { font-size: 0.5em; }	
		.HomeHeader .PreviewContainer .Preview:before {
			font-size: 0.7em;
			margin-top: -1.25em;
		}
*/
	
		.HomeHeader .PreviewContainer .Preview iframe { transform: scale(0.085); }/* 164/1920 = 0.085 */
		
		.HomeHeader .PreviewContainer .ClickForFullScreen:after { line-height: 90px; }			
		
}

@media screen and (max-width: 400px) {
	body:not(.hasScrolled) .HomeHeader .PreviewContainer .Overlay { background-image: none; }
}

@keyframes updateLoadingIcon {
  0%      { background-position: 0 50px; }
  19.999% { background-position: 0 50px; }

  20%     { background-position: 0 0; }
  39.999% { background-position: 0 0; }
  
  40%     { background-position: 0 -50px; }
  59.999% { background-position: 0 -50px; }

  60%     { background-position: 0 -100px; }
  79.999% { background-position: 0 -100px; }

  80%     { background-position: 0 -150px; }
  99.999% { background-position: 0 -150px; }

  100%    { background-position: 0 -200px; }
}