/* Top video player properties */

.refvideo {
	position: absolute;
	top: 0.8vw;
	left: 0.8vw;
	width: 98%;
	height: 28vw;
	resize: both;
	object-fit: cover;
	filter: blur(1vw);
	filter: brightness(50%);
}

.shadow {
	position: absolute;
	top: 0vw;
	left: 0vw;
	width: 100%;
	height: 29.5vw;
	box-shadow: inset -0.1vw 0.1vw 0.3vw 0.3vw rgba(0,0,0,1);
}

/* The main message division appears on top of the video player */

@keyframes mainframe {
	from {opacity: 0.0;}
	to {opacity: 1.0;}
}

.maindiv {
	position: absolute;
	top: 5vw;
	left: 0vw;
	display: flex;
	justify-content: center;
	align-items: center; 
	width: 100%;
	height: 16vw;
	animation-name: mainframe;
	animation-duration: 4s;
}

.mainmsg {
	font-family: Helvetica;
	letter-spacing: 0.6vw;
	font-weight: 600;
	font-size: 5.0vw;
	color: silver;
}

/* The sub-message division popout on top of the video player */

@keyframes subframe {
	0% {transform: scale(0);}
	25% {transform: scale(0);}
	50% {transform: scale(1.4);}
	100% {transform: scale(1);}
}

.subdiv {
	position: absolute;
	top: 10vw;
	left: 0vw;
	display: flex;
	justify-content: center;
	align-items: center; 
	width: 100%;
	height: 22vw;
	animation-name: subframe;
	animation-duration: 5s;
}

.submsg {
	font-family: Helvetica;
	letter-spacing: 0.4vw;
	font-weight: 500;
	font-size: 2.8vw;
	color: silver;
}

/* Main icon on top of the video image - left aligned */

.logodiv {
	position: absolute;
	top: 1vw;
	left: 1vw;
}

/* Main menu on top of the video image - rigth aligned */

.menudiv {
	position: relative;
	float: right;
	top: 2vw;
	margin: auto 4vw;
}

.menutext {
	font-family: Helvetica;
	font-size: 2.0vw;
}

.menugap {
	width: 3vw;
}

/* Logo image and reference images against the text messages */

.logoimg {
	width: 10vw;
	height: 9vw;
}

.refimg {
	width: 90%;
	border-radius: 10%;
	box-shadow: 1vw 1vw 1vw gray;
}

/* Define divisions for main heading, columns, and row contents */

.primary {
	height: 32vw;
	padding: 1.5vw;
}

.secondary {
	height: 6vw;
	padding: 1.5vw;
}

.primary, .secondary, .copydiv {
	clear: both;
	width: 100%;
	display: table;
	justify-content: center;
	align-items: center; 
	text-align: center;
}

.column {
	float: left;
	width: 30%;
	padding-right: 1vw;
	padding-left: 1vw;
	justify-content: center;
	align-items: center; 
	text-align: center;
}

/* Rulers and copyright message text */

.section {
	clear: both;
	background: gray;
}

.footer {
	clear: both;
	height: 0.1vw;
	background: black;
}

.copyright {
	font-family: Helvetica;
	font-size: 1.0vw;
	color: blue;
}

/* Change the color of hyperlinked texts on hover */

th a {
	text-decoration: none;
	color: orange;
}

th a:hover {
	color: lightgray;
}

td a, h1 a, h2 a {
	text-decoration: none;
	font-weight: bold;
	color: goldenrod;
}

td a:hover, h1 a:hover, h2 a:hover {
	font-weight: bold;
	color: darkslategray;
}

/* Define standard header and text styles */

h1 {
	display: table-cell;
	vertical-align: bottom;
	font-family: Helvetica;
	font-size: 3.0vw;
	color: darkslategray;
}

h2 {
	font-family: Helvetica;
	font-size: 2.0vw;
	color: goldenrod;
}

p {
	font-family: Helvetica;
	letter-spacing: 0.15vw;
	line-height: 1.4em;
	font-size: 1.6vw;
	color: blue;
}

ul {
	margin-top: -1.5vw;
}

li {
	font-family: Helvetica;
	letter-spacing: 0.15vw;
	line-height: 1.4em;
	font-size: 1.4vw;
	color: blue;
}

em {
	font-family: Courier New;
	font-style: italic;
	font-weight: bold;
}

td {
	width: 45%;
	padding-right: 1vw;
	padding-left: 1vw;
	vertical-align: middle;
}

/* Media queries for high resolution desktop screens */

@media (min-width: 1200px) and (max-width: 2400px) and (max-resolution: 150dpi) {
	.mainmsg {font-size: 4.0vw}
	.submsg {font-size: 2.2vw}
	.menutext {font-size: 1.6vw}
	.copyright {font-size: 0.8vw}

	h1 {font-size: 2.4vw}
	h2 {font-size: 1.6vw}
	p {font-size: 1.3vw}
	li {font-size: 1.1vw}

	ul {margin-top: -1.2vw;}
}

/* Media queries for ultra high resolution desktop screens */

@media (min-width: 2400px) and (max-resolution: 150dpi) {
	.mainmsg {font-size: 3.0vw}
	.submsg {font-size: 1.7vw}
	.menutext {font-size: 1.2vw}
	.copyright {font-size: 0.6vw}

	h1 {font-size: 1.8vw}
	h2 {font-size: 1.2vw}
	p {font-size: 1.0vw}
	li {font-size: 0.8vw}

	ul {margin-top: -0.9vw;}
}

/* Media queries for portrait mobile view */

@media (max-device-width: 600px) and (min-resolution: 150dpi) {
	.copyright {font-size: 1.2vw}

	h1 {font-size: 3.6vw}
	h2 {font-size: 2.4vw}
	p {font-size: 1.9vw}
	li {font-size: 1.7vw}

	ul {margin-top: -1.8vw;}
}

/* Media queries for landscape mobile view */

@media (min-device-width: 600px) and (max-device-width: 1200px) and (min-resolution: 150dpi) {
	.copyright {font-size: 1.1vw}

	h1 {font-size: 3.3vw}
	h2 {font-size: 2.2vw}
	p {font-size: 1.8vw}
	li {font-size: 1.6vw}

	ul {margin-top: -1.7vw;}
}