@charset "UTF-8";
@font-face {
	font-family: 'libre_baskervilleregular';;
	src: url('fonts/libre_baskerville/librebaskerville-regular-webfont.woff2') format('woff2'),
	url('fonts/libre_baskerville/librebaskerville-regular-webfont.woff') format('woff'),
	url('fonts/libre_baskerville/librebaskerville-regular-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;

}
@font-face {
	font-family: 'libre_baskervillebold';
	src: url('fonts/libre_baskerville/librebaskerville-bold-webfont.woff2') format('woff2'),
	url('fonts/libre_baskerville/librebaskerville-bold-webfont.woff') format('woff'),
	url('fonts/libre_baskerville/librebaskerville-bold-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'libre_baskervilleitalic';
	src: url('fonts/libre_baskerville/librebaskerville-italic-webfont.woff2') format('woff2'),
	url('fonts/libre_baskerville/librebaskerville-italic-webfont.woff') format('woff'),
	url('fonts/libre_baskerville/librebaskerville-italic-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 0;background-color:#003;}
::-webkit-scrollbar-thumb {border-radius: 4px;background:#ccc;box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}
html {font-size:0.625rem;font-family:Arial, Helvetica, sans-serif;}
*, *:before, *:after {box-sizing: border-box;}

:root {
	--mainfont: Arial, Helvetica, sans-serif;
	--boldfont: Arial, Helvetica, sans-serif;
	--italicfont: Arial, Helvetica, sans-serif;
	--bolditalicfont: Arial, Helvetica, sans-serif;
	--headerfont: libre_baskervillebold, Georgia, serif;
	--logofont: libre_baskervilleregular, Georgia, serif;
	--maincolor: #111;
	--maxwidth: 1600px;
	--linkcolor: #139;
	--lineheight:1.4;
	--bgcolor: #fff;
	--darkcolor: #333;

	--accentcolor1: #9FF;
	--accentcolor2: #09C;
	--itembgcolor: #FFFFFF;

	--buttoncolor: #4AA1F1;
}

body {margin:0;padding:0;font-size:2rem;background:#000;}
main, header, section, aside, nav, footer {display:block;} /* To ensure it works on IE9-11*/
main {padding:70px 0 0 0;}
button {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
b, strong {font-family:var(--boldfont);font-weight:bold;}
i, em {font-family:var(--italicfont);font-style:italic;}
b i {font-family:var(--bolditalicfont);font-style:italic;font-weight:bold;}
strong em {font-family:var(--bolditalicfont);font-style:italic;font-weight:bold;}
a:link {color:var(--linkcolor);text-decoration:underline;}
a:visited {color:var(--linkcolor);text-decoration:underline;}
a:hover, a:focus {color:var(--linkcolor);text-decoration:underline;outline: 0.125rem solid var(--linkcolor);}
/*a:focus {outline-style:ridge;outline-color:rgba(85,119,238,0.5);}
video:focus {outline-style:ridge;outline-color:rgba(85,119,238,0.5);}*/
a.skip { position: absolute; top: -10%;left:150%;transition: position 0.5s ease; width:10em;text-align:right;}
a.skip:focus { top: 1em; }
a.skipdestination {position:absolute;top:0;}

a.promobutton:link, a.promobutton:visited {color:#fff;}
a.promobutton:hover {color:#ffc;text-decoration:underline;}

#container {width:100%;height:auto;margin:0 auto;padding:0;position:relative;background-color:var(--bgcolor);
	background-image:url("../images/bodybg.jpg");max-width:var(--maxwidth);}
#innerdiv {width:100%;height:auto;overflow:visible;padding:0 0 30px 0;}
#maincontent {overflow:visible;font-family:var(--mainfont);
background:rgba(255,255,255,0.9);
margin:0 auto 40px auto;
text-align:left;line-height:var(--lineheight);color:var(--maincolor);
opacity:0;width:94%;border-radius:12px;padding:24px;font-size:1.65rem;
	-webkit-text-size-adjust: 100%;
}
#navdiv {display:inline-block;margin:0;width:auto;height:auto;overflow:visible;position:relative;left:0;}
#navdiv a, #navdiv button {color:white; font-size: 1.5rem;text-align:center;}
#navdiv a:visited {color:white};
#navdiv button {
	background: transparent;
	border: 0 none;
}
.navitem, .naviteminactive {padding:4px;margin:0 0.5em 0 0;color:#9FF;font-size:1.5rem;width:auto;
	background:transparent;border:0 none;display:inline-block;color:white;}
.navitem {color:#fff;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0);text-underline-offset: 0.25rem;}
.navitem:hover, .navitem:focus, .naviteminactive:focus {color:#ffc;outline: 0.125rem solid white;outline-offset: 0.125rem;}
a.naviteminactive, button.naviteminactive {color:#ffc;text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); }
a.navitem, button.navitem {text-decoration:underline; }
a.naviteminactive {
	text-decoration:none;
}
a[id*="plink"] {
	text-decoration:none;
}
a[id*="plink"]:hover, a[id*="plink"]:focus {
	text-decoration:underline;
	width: 100%;
}

#splashbg {width:100%;height:auto;position:absolute;left:0;top:0;}
header {position:fixed;left:0;top:0;width:100%;height:auto;padding:10px;overflow:visible;
	margin:0 0 10px 0;
	text-align:center;
}
header {z-index:100;}

header.top {
	background: rgba(0,0,50,0.75);
	background: linear-gradient(to right, rgba(0,0,50,0) 0%, rgba(0,0,50,0.1) 10%,  rgba(0,0,50,0.75) 50%, rgba(0,0,50,0.1) 90%, rgba(0,0,50,0) 100%)
}
header.scroll {
	background: rgba(60,80,150,0.95);
	background: linear-gradient(to right, rgba(0,0,50,0) 0%, rgba(0,0,50,0.1) 10%,  rgba(0,0,50,0.75) 30%, rgba(0,0,50,0.75) 70%, rgba(0,0,50,0.1) 90%, rgba(0,0,50,0) 100%)
}

#projectmenu {display:none;background: rgba(60,80,150,0.95);position:absolute;top:120%;right:1em;margin:0;
	padding:0.1em 0.5em 0.5em 0.5em;border-radius:0 0 16px 16px;z-index:101;width:auto;white-space:normal;text-align:right;}
#projectmenu li {list-style: none;}
#projectmenu a {margin:0;padding:0;font-size:1.4rem;display:block;text-align:center;width:100%;height:2rem;line-height:2rem;color:white;}
#projectmenu a:visited {color:white;}

#headshot {width:20%;height:auto;float:left;margin:0 1% 1% 0;padding:6px; border:1px solid silver;flex-grow:1;}

h1, h2, h3, h4 {color:var(--darkcolor);font-weight:normal;margin:0;}
h1 {font-size:2.5rem;font-family:var(--headerfont);}
h2 {font-size:2rem;}
h3 {font-size:1.8rem;margin:4rem 0 1rem 0;}
h4 {font-size:1.7rem}

h3 i {font-family:libre_baskervilleitalic, Georgia, serif;font-weight:bold;}
hr {margin:2rem 0 2rem 0;}
.videoshell {text-align:center;}

.videodemo, .livedemo {width:80%;margin-top:10px;}
.livedemo {cursor:auto;}
.slideholder {width:100%;height:auto;margin-top:10px;padding:0;overflow:auto; white-space: nowrap;}
.slideholder img {height:10em;width:auto;margin:0 auto;padding:0 auto;}

#promo {
	display:flex;
	flex-direction: column;
	flex-wrap:wrap;
	justify-content:center;
	align-content:center;
	color:white;
	width:100%;text-align:center;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
	opacity:0;
	font-family:var(--mainfont);
	font-size:1.5rem;
	height:90vh;
	min-height:250px;
	max-height:400px;
}

#logotext {font-family:var(--logofont);font-weight:normal;color:white;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);font-size:2rem;}
.promo-home p {margin:25px 0 0 0;}

#slogan {font-size:1.5rem;}
.altcolor {color:var(--accentcolor1);}
.altcolor2 {color:var(--accentcolor2);}
.centered {text-align:center;}

:focus {outline:0.125rem solid rgba(85,119,238,0.5);outline-offset: 0.125rem;}

.contactinfo {line-height:1.35em;font-style:normal;}
.contactinfo a:link {color:white;text-decoration:underline;text-underline-offset: 0.5rem;text-decoration-thickness: 1px;}
.contactinfo a:visited {color:white;text-decoration:underline;}
.contactinfo a:hover, .contactinfo a:focus{
	color:#9FF;
	text-decoration:none;
	outline:0.125rem solid #fff;
	outline-offset: 0.25rem;
}





.promobutton {padding:12px;font-size:1.6rem;cursor:auto;border-radius:12px;border:2px solid #4E739D;
background-color:#4E739D;color:#fff;opacity:0.9;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0);box-shadow:2px 2px 2px #111;}
.promobutton:hover, .promobutton:focus {color:#ffc;opacity:1;text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);border:2px solid #ffc;}

ul.indentedlist {position:relative;left:0;}

@media (min-width: 481px){
	html {font-size:0.75rem;}

	.slideholder img {height:14em;width:auto;margin:0 auto;padding:0 auto;}
	#promo {max-height:70vh;}
}

@media (min-width: 768px){
	html {font-size:0.875rem;}
	/*#navdiv {margin:0 0 0 1em;}*/
	.navitem, .naviteminactive {margin:0 0.9em 0 0;}
	.slideholder img {height:14em;width:auto;margin:0 auto;padding:0 auto;}

	#slogan {font-size:2.5rem;}
	#logotext {font-size:3rem;}
	#promo {font-size:2rem;}
	/*header {text-align:left;}*/
}
@media (min-width: 1025px){
	html {font-size:1rem;}
	.navitem, .naviteminactive {margin:0 1.5em 0 0;}
	.slideholder img {height:16em;width:auto;margin:0 auto;padding:0 auto;}
	#promo {max-height:70vh;}
}

/* animation definitions */
@-webkit-keyframes fadeIn {0% {opacity:0;} 100% {opacity:1;}}
@keyframes fadeIn {0% {opacity:0;} 100% {opacity:1;}}

@-webkit-keyframes fadeOut {0% {opacity:1;} 100% {opacity:0;}}
@keyframes fadeOut {0% {opacity:1;} 100% {opacity:0;}}

.fadingIn {
	-webkit-animation: fadeIn 1s ease-out 0.5s 1 forwards; /* Chrome, Safari, Opera */
	animation: fadeIn 1s ease-out 0.5s 1 forwards;
}
.fadingOut {
	-webkit-animation: fadeOut 0.5s linear 0s 1 forwards; /* Chrome, Safari, Opera */
	animation: fadeOut 0.5s linear 0s 1 forwards;
}
#badge {
	display: block;
	float: right;
	margin: 0 1rem;
}
#badge a {
	display: flex;
	width: fit-content;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.25rem;
	text-align: center;
}