/*RESET*/

* {	margin:0;
	padding:0;
	}
		
a {	outline:none;}
		
a img {border:none;}

p { font-size: 28px;
	 font-family: Arial, sans-serif;
	 color:#0064a7;}

/*BODY*/

body {
		width: 100%;
		height: auto;
		background: #003366;
		}

#global {
		max-width: 1580px;
		margin: 0px auto;
		}

#top-bar {	position: relative;
			width: 100%;
			max-width: 1580px;
			height: 35px;
			display: block;
			margin: 0px auto;
			z-index: 1000;
			background: #003366;
			}

#top-bar p {
			font-size:24px;
	 		font-family: Arial, sans-serif;
			font-stretch: condensed;
			color:#0064a7;
			float: left;
			text-align: left;
			margin: 0px auto;
			padding : 2px 2px 2px 5px;
			background: #CCFFFF;
			}

a.left {
			font-size:24px;
	 		font-family: Arial, sans-serif;
			color:#0064a7;
			float: left;
			text-align: left;
			margin : 0px;
			padding: 2px 0px;
			background: #CCFFFF;
			display: block;
			}
			
a.right {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 15px;
    font-family: Arial, sans-serif;
    font-size: 14px;
        text-decoration: none;
    cursor: pointer;
        color: black;
    background: white;
    font
			}
			

/* ANIMATION */

#video-container {	position: relative;
					width: 100%;
					height: auto;
					margin: 0px auto;
					z-index: 1;
					background: #003366;
					}
		
		
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    padding: 15px 30px;
    display: none;
    cursor: pointer;
    z-index: 10;
}

img {	width: 100%;
		height: 100%;
		max-width: 1200px;
		max-height: 100%;
		margin: 0px auto;
		clear: both;
		}		

#video-links { 	position: absolute;
				top: 0;
				margin-left: auto;
				margin-right: auto;
				left: 0;
				right: 0;
				width: 100%;
				height: 100%;
				max-width: 1600px;
				text-align: center;
				z-index: 5;
				}
				
#videoA1  {	position: absolute;
			top: 0%;
			left: 0%;
			z-index: 5;
			width: 40%;
			height: 35.7%;
			display: block;
			}

#videoA3  {	background-color: light blue;
			position: absolute;
			top: 0%;
			left: 70%;
			z-index: 5;
			height: 35.7%;
			width: 30%;
			}


#videoB1  {	background-color: light blue;
			position: absolute;
			top: 36%;
			left: 0%;
			z-index: 1;
			height: 28.5%;
			width: 40%;
			}

#videoB2  {	background-color: light blue;
			position: absolute;
			top: 36%;
			left: 40%;
			z-index: 1;
			height: 28.5%;
			width: 30%;
			}

#videoC1  {	background-color: light blue;
			position: absolute;
			top: 64%;
			left: 0%;
			z-index: 1;
			height: 35.7%;
			width: 40%;
			}

#videoC2  {	background-color: light blue;
			position: absolute;
			top: 64%;
			left: 40%;
			z-index: 1;
			height: 35.7%;
			width: 30%;
			}

#videoC3  {	background-color: light blue;
			position: absolute;
			top: 64%;
			left: 70%;
			z-index: 1;
			height: 35.7%;
			width: 30%;
			}
			
#imageC2  {	position: absolute;
			top: 460px;
			left: 340px;
			z-index: 1;
			}


#image-menu {
			position: absolute;
			top : 50%;
			right : 3%;
			width: 80px;
			height: 30px;
			z-index: 2;
			background: url(vids/anim-menu-off.png);
			}		

a:hover#image-menu {	
			background: url(vids/anim-menu-over.png);
			}	




				
/*FOOTER*/

#footer {clear:both;
		width:100%;
		height:10px;}	

#asgp { float:left;
		width: 600px;
		height:auto;
		margin-left: 20px;
		}
		
#asgp p {font-style:italic; 
		 font-size:12px;
		 }
				
#logo { float:left;
		width:100px;
		margin: 0px;
		}

#logo img { margin-top: 0px;
			margin-left: 20px;
			}
				

/* Media Queries */
@media screen and (max-height: 1000px), (max-width: 1300px) {

#global {
		max-width: 1300px;
		margin: 0px auto;
		}

#video-container {	position: relative;
					display: block;
					width: 100%;
					height: auto;
					max-height: 920px;
					}
video {
					max-height: 920px;
		}	
#top-bar { 	
					max-width: 1300px;
				}
#top-bar p, #links-bar a.left {
			font-size:24px;
			}

#links-bar a.right {
			font-size:18px;
			}

}

@media screen and (max-height: 900px), (max-width: 1160px) {

#global {
		max-width: 1160px;
		margin: 0px auto;
		}

#video-container {	position: relative;
					display: block;
					width: 100%;
					height: auto;
					max-height: 820px;
					}
video {
					max-height: 820px;
		}	

#top-bar { 	
					max-width: 1160px;
				}
#top-bar p, #links-bar a.left {
			font-size:21px;
			}

#links-bar a.right {
			font-size:16px;
			}
}

@media screen and (max-height: 800px), (max-width: 1020px) {

#global {
		max-width: 1020px;
		margin: 0px auto;
		}

#video-container {	position: relative;
					display: block;
					width: 100%;
					height: auto;
					max-height: 720px;
					}
video {
					max-height: 720px;
		}	

#top-bar { 	
					max-width: 1020px;
					height: 30px;
				}
#top-bar p, #links-bar a.left {
			font-size:18px;
			}

#links-bar a.right {
			font-size:14px;
			}
}

@media screen and (max-height: 700px), (max-width: 900px) {

#global {
		max-width: 880px;
		margin: 0px auto;
		}

#video-container {	position: relative;
					display: block;
					width: 100%;
					height: auto;
					max-height: 650px;
					}			
video {
					max-height: 620px;
		}	
#top-bar { 	
				max-width: 880px;
				}

#top-bar p, #links-bar a.left {
			font-size:16px;
			}

#links-bar a.right {
			font-size:12px;
			}
}

@media screen and (max-height: 600px), (max-width: 800px) {

#global {
		max-width: 735px;
		margin: 0px auto;
		}

#video-container {	width: 100%;
					height: auto;
					max-height: 550px;
		}			
video {
					max-height: 520px;
		}	
#top-bar { 	
				max-width: 735px;
				height: 25px;
				}
#top-bar p, #links-bar a.left {
			font-size:14px;
			}

#links-bar a.right {
			font-size:12px;
			}
			
}

@media screen and (max-height: 500px), (max-width: 650px) {

#global {
		max-width: 565px;
		margin: 0px auto;
		}

#video-container {	width: 100%;
					height: auto;
					max-height: 400px;
		}			
video {
					max-height: 400px;
		}	

#top-bar { 	
				max-width: 565px;
				}
#top-bar p, #links-bar a.left {
			font-size:12px;
			letter-spacing: -0.025em;
			}

#links-bar a.right {
			font-size:10px;
			}

}

@media screen and (max-height: 400px), (max-width: 525px) {

#global {
		max-width: 460px;
		margin: 0px auto;
		}

#video-container {	width: 100%;
					height: auto;
					max-height: 325px;
					min-width: 460px;
		}			
video {
					max-height: 325px;
		}	
#top-bar { 	
				max-width: 460px;
				min-width: 460px;
				}

#top-bar p, #links-bar a.left {
			font-size:11px;
			letter-spacing: -0.05em;
			}

#links-bar a.right {
			font-size: 9px;
			}

}