:root{
	--feature1Color: rgb(0, 147, 239);
	--exDark:hsla(0,0%,10%,1.00);
	--FullBlack: hsla(0,0%,0%,1.00); 
	--SpecifierBackground: hsl(196,50%,42%);
	--gray-dark: #303030;
}


/*
prebuilt classes
*/
.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('../Images/progressEmpty.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('../Images/progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('../Images/progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}

.webgl-content .logo.Dark {background-image: url('../Images/progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('../Images/progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('../Images/progressFull.Dark.png');}

.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px; font-display:swap;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('../Images/webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('../Images/fullscreen.png'); width: 38px; float: right;}

/*
included classes
*/

/*html
{

	-webkit-text-size-adjust: 100%;
}*/


/* may need a resolution or device type solution here. portrait mode text is way too small */
/*@media only screen and (max-width: 576px)
{
	body{
		font-size: 1.25rem;
	}
}
@media only screen and (max-width: 768px)
{
	body{
		font-size: 1.25rem;
	}
}
@media only screen and (max-width: 992px)
{
	body{
		font-size: 1.25rem;
	}
}
@media only screen and (max-width: 1200px),
only screen and (max-resolution: 120dpi)
{
	body{
		font-size: 1rem;
	}
}*/

#canvas
{
	width:100%;
	height: 100%;
	
}

.text-shadow {

	text-shadow: 4px 4px 10px rgba(0,0,0,.8);
	
}
.bg-specifier
{
	background-color: var(--SpecifierBackground);
}

.bg-black {
	background-color: var(--FullBlack);
}
.bg-exdark {
	background-color: var(--exDark);
}

.bg-DarkGrey
{
	background-color:var(--gray-dark);
}
.bg-feature1{
	
	background-color: rgba(256, 0 , 0, 100%);
	background-color: var(--feature1Color);

}
.am-channelLogo
{
	width: 50px;
	height: 50px;	
}
.am-splashVideo
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	overflow: hidden;
}
.am-content-rounded
{
	border-style: solid; 
	border-color: white;
	 border-width: .25em;
	  border-radius: 1em;
}	
.am-text-shadow
{
	text-shadow: 1px 1px 2px black;

}
.am-temploading-text
{
	font-size: 8vw;
	line-height: 8vw;
}
@media (max-height:360px)
{
	.am-temploading-text
	{
		font-size: 8vh !important;
		line-height: 8vh !important;
	}
}	


.am-TempLoading-Logo-Parent
{
	width: 25vw;
	min-width: 100px;
	max-width: 500px;
}
@media (max-height:360px)
{
	.am-TempLoading-Logo-Parent
	{
		width: 33vh !important;
		min-width: 75px !important;
		max-width: 500px;
	}

}
.am-tempLoading-progressBar-parent
{
	width:95%;
}
.am-tempLoading
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
}
.am-tempLoading .am-flexPadding
{
	padding: 1vw;
}

@media (max-height:360px)
{
	.am-flexPadding
	{
	padding-top: .3em !important;
	padding-bottom: .3em !important;
	}
}

.am-playTrigger .am-playTrigger-icon
{
	width: 3em;
	height: 3em;
	text-align: center;
	vertical-align: middle;
}
.am-playTrigger-icon-background
{
	color: black;
	opacity: .5;
}
.am-playTrigger-icon-background:hover
{
	color: black;
	opacity: 1;
}
@media (max-height: 260px)
{
	.am-playTrigger-icon
	{
		width: 50vh !important;
		height: 50vh !important;
	}
}
@media (min-width: 576px) {
	.am-temploading-text
	{
		font-size: 6vw;
		line-height: 6vw;
	}

	.am-tempLoading-progressBar-parent
	{
		width:90%;
	}
	.am-playTrigger .am-playTrigger-icon
	{
		width: 5em;
		height: 5em;
	}
}
@media (min-width: 768px) {
	.am-temploading-text
	{
		font-size: 2rem;
		line-height: 2rem;
	}

	.am-tempLoading-progressBar-parent
	{
		width:75%;
	}
	.am-tempLoading .am-flexPadding
	{
		padding: 1rem;
	}
	.am-playTrigger .am-playTrigger-icon
	{
		width: 7em;
		height: 7em;
	}
}
@media  (min-width: 1200px)
{
	.am-temploading-text
	{
		font-size: 2rem;
		line-height: 2rem;
	}
	.am-tempLoading-progressBar-parent
	{
		width:75%;
	}
	.am-tempLoading .am-flexPadding
	{
		padding: 1rem;
	}
	.am-playTrigger .am-playTrigger-icon
	{
		width: 7em;
		height: 7em;
	}

}
.am-fullscreenBtn
{
	opacity: 0.75;
}

.am-fullscreenBtn:hover
{
	opacity: 1;
}

.am-IframeControls
{
background: none;
background-repeat: none;
}

.am-IframeControls:hover
{
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
	border: none;
}

.am-IframeControls.hover-state 
{
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
	background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));
	/*background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.5) 100%);*/ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
	background-repeat: none;
	border: none;
}
/*
* Animations
*/

.am-Spin{
	transform: rotate(0deg);
	
	animation-name: spin;
	-webkit-animation-name: spin;
	-moz-animation-name: spin;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;

	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;

	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%; 
	-moz-transform-origin: 50% 50%;

	animation-iteration-count: infinite;

	animation-fill-mode: initial;

	visibility: visible !important;		
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
	}
	50% {
		transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
	}		
	100% {
		transform: rotate(360deg)!important;
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
	}									
}
.am-Spin-counter{
	transform: rotate(0deg);
	
	animation-name: spin-counter;
	-webkit-animation-name: spin-counter;
	-moz-animation-name: spin-counter;	

	animation-duration: 4s;	
	-webkit-animation-duration: 4s;
	-moz-animation-duration: 4s;

	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;

	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%; 
	-moz-transform-origin: 50% 50%;

	animation-iteration-count: infinite;

	animation-fill-mode: initial;

	visibility: visible !important;		
}

@keyframes spin-counter {
	0% {
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
	}
	50% {
		transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
	}		
	100% {
		transform: rotate(0deg)!important;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
	}									
}

.am-ShrinkToEighty
{

	animation-name: shrinkToEighty;
	-webkit-animation-name: shrinkToEighty;
	
	animation-duration: .5s;	
	-webkit-animation-duration: .5s;
	
	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;
	
	animation-fill-mode: forwards;
}
@keyframes shrinkToEighty
{
	0%
	{
		transform: scale(1,1);
	}
	75%
	{
		
		transform: scale(.7,.7);
	}
	100%
	{
		transform: scale(.8,.8);
	}
}
.am-FadeIn
{

	animation-name: FadeIn;
	-webkit-animation-name: FadeIn;
	
	animation-duration: 2s;	
	-webkit-animation-duration: 2s;
	
	
	animation-iteration-count: 1;

	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes FadeIn
{
	0%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}
.am-FadeInDelay, .am-FadeInDelay-5, .am-FadeInDelay-7, .am-FadeInDelay-10
{
	opacity: 0;
	animation-name: FadeIn2;
	animation-duration: 2s;
	animation-iteration-count: 1;

	animation-fill-mode: forwards;
}
.am-FadeInDelay-5
{
	animation-duration: 5s;
}
.am-FadeInDelay-7
{
	animation-duration: 7s;
}
.am-FadeInDelay-10
{
	animation-duration: 10s;
}
@keyframes FadeIn2
{
	0%
	{
		opacity: 0;
	}
	50%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}

.am-floating-50{
	animation-name: floating-50;
	-webkit-animation-name: floating-50;

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating-50 {
	0% {
		transform: translate(-50%,0%);	
	}
	50% {
		transform: translate(-50%,8%);	
	}	
	100% {
		transform: translate(-50%,0%);
	}			
}

@-webkit-keyframes floating-50 {
	0% {
		-webkit-transform: translate(-50%,0%);	
	}
	50% {
		-webkit-transform: translate(-50%,8%);	
	}	
	100% {
		-webkit-transform: translate(-50%,0%);
	}			
}