@font-face {
  font-family: 'Baumans';
  font-style: normal;
  font-weight: 400;
  src: local('Baumans'), local('Baumans-Regular'), url(fonts/Baumans-400.woff) format('woff');
}
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  src: local('Inconsolata'), url(fonts/Inconsolata-400.woff) format('woff');
}
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 700;
  src: local('Inconsolata Bold'), local('Inconsolata-Bold'), url(fonts/Inconsolata-700.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(fonts/OpenSans-400.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(fonts/OpenSans-600.woff) format('woff');
}


@media screen and (min-width: 800px) {
	.headline-copy { font-size: 1.75vw; }
	body,li { font-size:1.25vw; }
	.fatbutton { font-size:1.5vw;}
}

@media screen and (max-width: 799px) {
	.headline-copy { font-size: 1.5em; }
	body,li { font-size:100%; }
	.fatbutton { font-size:small;}
}

.headline-copy { text-shadow: 2px 2px white; }

p { 
	margin: 0 0 1em 0; 
	color: #333333;
}

p.lead { font-size: 1.5em;}

li { 
	color: #333333;
}

 root { 
	display: block;
}

h1 { 
	font-size: 4vw; 
	padding: 1em 0 0 0;
	margin: 0;
}

h1.home { color: #999; font-size: 2vw; font-style: italic; }


h2 {
	padding: 3vw 0 0 0;
	margin: 0;
}
h3 {
	padding: 2vw 0 0 0;
	margin: 0;
}


hr {
	margin-top: 4em;
	border: 0;
	height: 2px;
	background-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.25), rgba(0,0,0,0)); 
}

img.section {
	opacity: 0.5; 
	margin: 6em auto; 
	display: block;
	width: 128px;
	height: 128px;
}

img.shadow {
	border: 1px solid #999;
	box-shadow: 3px 2px 5px 0px #ccc;
}

sup {
	font-weight: normal;
	font-size: .5vw;
	vertical-align: text-top;
}

html {
	background-color: #fcfdff;
  min-height: 100vh;
}

body {
  min-height: 100vh;
	margin: 0;
	font-family: 'Open Sans', Calibri, Tahoma, sans-serif;
	vertical-align: middle;
  background: linear-gradient(-100deg, #eaf8f2 55%, #e0f0e8 55%);
}

pre {
	font-family: Inconsolata, monospace;
	color: #369;
}

a {
	color: #156595;
}

a.aMenu {
	color: #fff;
	text-decoration: none;
	border: 1px solid transparent;
	padding: 0 .35em;
	font-size: 16px;
	text-shadow: 1px 1px 0 #333;
	box-shadow: 1px 1px 2px transparent;
}

a.aMenu:hover {
	border-color: rgba(0,0,0,0.2) rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.2);
	background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.1);
	box-shadow: 1px 1px 2px rgba(255,255,255,0.3);
}

a.subMenu,a.subSubMenu,a.popMenu {
	margin: 0;
	text-decoration: none;
	font-size:16px;
	border: 1px solid transparent;
	text-shadow: 1px 1px 1px #FFF;
	padding: 0 .5em;
	box-shadow: 1px 1px 2px transparent;
}
a.subMenu:hover,a.subSubMenu:hover,a.popMenu:hover {
	border-color: #CCC #E0E0E0 #E0E0E0 #CCC;
	background-color: #EEE;
	box-shadow: 1px 1px 2px #FFF;
}

a.popMenu {
	text-decoration: none;
	/*border-bottom: 1px solid #666;*/
	padding: .1em;
	margin: .2em;
	display: block;
	text-align: center;
	font-size: 1.5em;
}

a.subSubMenu {
	display: block;
	margin-top: 1em;
}

div.subSubMenu {
	width:12%;
	position: fixed;
	top: 54px;
	left: 0;
	padding: 2em 1em;
	text-align: right;
	margin-right: 1em;
	border-style: solid;
	border-width: 0px 2px 0px 0px;
	border-color: #cde;
	margin-top: 2em;
}

div#menu { padding: 0; }

div#divBanner { 
	/*
	z-index: 2; 
	position: fixed; 
	top: 0; 
 */
	font-size: 14px; /* if relative/big (e.g. full screen), Augur logo may drop a line lower since it won't fit in its box */
	width: 100%; 
	height:36px; 
	background-image: url('/img/gradientblue55.png'); 
	/*linear-gradient(top , #3A7FCC, #268DEC, #2B70BD)*/ 
	background-repeat:repeat-x; 
}

div#divBannerLogo {
	display: inline-block; 
}

div#divBannerMenu {
	position: absolute; 
	top:10px; right: 9px; 
	display: inline-block; 
	text-align: right;	
	font-size:14px;
}

span.menu-title {
	float: left;
	text-shadow: 1px 1px 1px #FFF;
	color: #999;
	margin-bottom: 3px;
	font-size:14px;
	padding: 0 1em 1px .5em;
}

div.page {
	padding: 0 3em 0 12em; 
	color: #333;
}


div.page-home {
	margin: 0; 
	padding: 0 10%;
	color: #333;
}
@media screen and (max-width: 1000px) {
	div.page-home {
		padding: 0 1em 3em; 
		color: #333;
	}
}


div.anchor {
	height: 0;
}

p.contents {
	color: #9ab;
	font-style: italic;
	text-align: left;
}

.screenshot {
	margin: 0 auto; 
	border: 1px solid #CCCCCC;
	box-shadow: 2px 2px 4px #888888;
}

.blueGrad {
	background: linear-gradient(#44B7FC, #0080CB);
}

var { /* used for comments, asides, inline descriptions of dir, etc. */
  font-style: italic;
	color:#999;
}

code
{
  font-family: Inconsolata, monospace;
	font-style: normal;
  /*color: #446699;*/
	background-color:#f2f2f2;
	border: 1px solid #d6d6d6;
	padding:0 1px;
}

div.slogan {
  color: #666666;
  font-size: small;
  text-align: right;
  text-shadow: 1px 1px 1px #FFFFFF;
	letter-spacing: .4em;
}

figure {
  color: #999;
  font-size: small;
	font-weight: bold;
  text-align: center;
	margin: 0;
	padding: 1em;
}

figcaption.long {
	width: 40em;
	margin: 0px auto;
	text-align: left;
}

a.button:hover {
	box-shadow: 1px 2px 2px #933;
}

a.button {
	background: none repeat scroll 0 0 #c33;
	border: 1px solid #900;
	border-radius: 0.25em;
	box-shadow: 1px 2px 2px transparent;
	color: #fff;
	padding: 0 1em;
	text-decoration: none;
	text-shadow:-1px -1px #666;
	display: inline-block;
}

div.menu {
	/*
	position: fixed;
	z-index: 1;
	top: 36px;
	left: 0px;
	right: 0px;
 */
	text-align: right;
	background-color: #D8D8D8;
	border-bottom: 1px solid #999;
	padding: 0 0 2px 0;
  background: linear-gradient(#EEEEEE, #CCCCCC);
	font-size:16px;
}

div.menu-base {
	display:none;
	/*
	position: absolute;
	bottom: 0px;
 */
	height: 2px;
	width: 100%;
	background-color: #D8D8D8;
	border-top: 1px solid #F0F0F0;
}


p.email {
	color: #156595;
}

div.column-left, div.column-right {
	display: inline-block; 
	/* width: 45%; Now controlled in JavaScript when window sized */
	vertical-align: top;
	margin-left: 2em;
}

div.card {
	background-color: #EEE;
	border-radius: 0.5em;
	border-style: solid;
	border-width: 1px;
	border-color: #CCC #DDD #DDD #CCC;
	box-shadow: 1px 1px 5px #AAA;
	padding: 1em;
}

.productName {
	/*font-family: Baumans, arial;*/
	text-decoration: none;
}

a.fatbutton {
	text-decoration: none; 
	font-weight: bold;
	color: #156595; 
	border: 1px solid transparent; 
	border-radius: 5px; 
	padding: .2em .5em;
	transition: border-width 0.15s linear;
}

a.fatbutton:hover {
	border-color: #DDD #EEE #EEE #DDD;
	box-shadow: 1px 1px 3px #AAA;
	background-color: white;
}

div.ballShow {
	display: block; 
	position: relative; 
	margin-left: auto; 
	top: 1.5em; 
	width: 16em;
	height: 16em;
	background-image: url(img/FwdSphereCutout.svg); 
	background-size: contain; 
	background-repeat: no-repeat;
	margin-right: auto;
	clear: both;
	animation: ballShow infinite 5s;
}

div.ball {
	position: absolute; 
	bottom: -50px; 
	border-radius: 1em; 
	height: 1em; 
	width: 1em; 
	z-index: 2; 
	border: 1px solid rgba(255,255,255,0.5); 
	background-color: rgba(51,102,153,0.5); 
	box-shadow: 1px 1px 2px #fff;
	animation: ball infinite 5s;
}

div.ball2 {
	Xleft: 87px; 
	bottom: 6em;
	opacity: 0;
	animation: ball2 infinite 5s;
}

div.ball3 {
	Xleft: 87px; 
	bottom: 6em;
	opacity: 0;
	animation: ball3 infinite 5s;
}

div.alarm {
	border-radius: 1.25em; 
	height: 1.25em; 
	width: 1.25em; 
	bottom: 0;
	font-family: serif;
	opacity: 0;
	color: white;
	background-color: #966;
	font-size: 1.25em;
	text-align: center;
	animation: alarm infinite 5s;
	transform: rotate(-30deg);
	box-shadow: none;
}


blockquote {
	display:inline-block;
	margin: 3em 1em;
	padding: 1em;
	background: #fff;
	border-radius: 1em;
	border: 1px solid #ccc;
	box-shadow: 1em 1em 1em #ccc
}

blockquote p {
	padding: 1em;
	background: #fff;
	border-radius: 1em;
	margin:0;
}

blockquote p img {
	display:block; 
	max-width:100%; 
	margin:1em auto;
}

blockquote p::before {
	content: '\201C';
	color:#c99;
	font-size: 5em;
	float: left;
	margin-top: -.5em;
	margin-right: .2em;
}

div.endquote { 
	content:'201D'; 
	color:#c99;
	font-size:5em;
	float:right;
	margin-top:-.35em;
	margin-left:.25em;
}
/*
blockquote p::after {
	content: '\201D';
	color:#900;
	font-size: 5em;
	float: right;
	margin-top: -.5em;
}
*/

blockquote footer {
	font-style: italic;
	color:#966;
	text-align: right;
}

p.drop-cap:first-letter {
	font-size: 4.5em;
	float: left;
	margin-top: .15em;
}





/*
	WORKING ON ELIMINATING REF TO left/right/top/bottom TO SPEED RENDERING, 
	VIA transforms WHICH ARE MORE EFFICIENT PER: 
	https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108
*/
/*
	@keyframes ball { 
	0% {
		opacity: 0;
		transform: translateX(0) translateY(0) scale(1,1);
	}
	40% {
		transform: translateX(0) translateY(-22.5em);
		opacity: .7;
	}
	42% {
		transform: translateX(-1%) translateY(-22.5em) scale(1,1);
		opacity: 1;
	}
	44% {
		transform: translateX(+2%) translateY(-22.5em);
	}
	46% {
		transform: translateX(-2%) translateY(-22.5em);
	}
	48% {
		transform: translateX(+2%) translateY(-22.5em) scale(.75,.75);
	}
	50% {
		transform: translateX(-1%) translateY(-22.5em);
	}
	70% {
		transform: scale(1,1) translateX(0) translateY(-22.5em);
	}
	100% {
		transform: translateX(0) translateY(-41em);
		opacity: 0;
	}
}
@keyframes ballShow {
    0%   { width:16em; height:16em;}
    41%   { width:16em; height:16em;}
    49%   { width:15.75em; height:15.75em;}
    53%   { width:16.25em; height:16.25em;}
    55%   { width:16em; height:16em;}
}

@keyframes ball2 {
    0%   { opacity: 0;  transform: translateX(0); }
    47%  { opacity: 0;  transform: translateX(0); }
    50%  { opacity: 1;  transform: translateX(0) scale(.75,.75);}
    100% { opacity: 0;  transform: translateX(-11.5em) translateY(-11.5em) scale(1,1);}
}
@keyframes ball3 {
    0%  { opacity: 0; }
    47% { opacity: 0; }
    50% { opacity: 1; transform: scale(.75,.75);}
    80% { opacity: 0;  transform: translateY(-11.5em) translateY(-13.5em) scale(1,1); }
}

@keyframes alarm {
	0% {
		opacity: 0;
		transform: translateY(-2em) translateX(0);
	}
	55% {
		opacity: 0;
		transform: translateY(-2em) translateX(0) rotate(-50deg) scale(.5,.5);
	}
	70% {
		opacity: 1;
		transform: translateX(4em) translateY(2em) rotate(0deg) scale(1.5,1.5);
	}
	100% {
		opacity: 0;
		transform: translateX(10em) translateY(2em) rotate(45deg) scale(1,1);
	}
}*/

@keyframes ball { 
	0% {
		opacity: 0;
		left: 46%;
		bottom: -15em;
		transform: scale(1,1);
	}
	40% {
		left: 46%;
		bottom:7.2em;
		opacity: .7;
	}
	42% {
		left: 45%;
		opacity: 1;
		transform: scale(1,1);
	}
	44% {
		left: 47%;
	}
	46% {
		left: 45%;
	}
	48% {
		left: 47%;
		transform: scale(.75,.75);
	}
	50% {
		left: 46%;
		bottom:7.2em;
	}
	70% {
		transform: scale(1,1);
		left: 46%;
	}
	100% {
		left: 46%;
		bottom: 26em;
		opacity: 0;
	}
}

@keyframes ballShow {
    0%   { width:16em; height:16em;}
    41%   { width:16em; height:16em;}
    49%   { width:15.75em; height:15.75em;}
    53%   { width:16.25em; height:16.25em;}
    55%   { width:16em; height:16em;}
}

@keyframes ball2 {
    0%   { opacity: 0; left:46%; bottom:7.2em;}
    47%  { opacity: 0; left:46%; bottom:7.2em;}
    50%  { opacity: 1; left:46%; bottom:7.2em; transform: scale(.75,.75);}
    100% { opacity: 0; left: -3em; bottom: 19em; transform: scale(1,1);}
}
@keyframes ball3 {
    0%  { opacity: 0; left:46%; bottom:7.2em;}
    47% { opacity: 0; left:46%; bottom:7.2em;}
    50% { opacity: 1; left:46%; bottom:7.2em; transform: scale(.75,.75);}
    80% { opacity: 0; left: 16em; bottom: 17em; transform: scale(1,1); }
}
@keyframes alarm {
    0%   { opacity: 0; left:46%; bottom:6em; }
    55%  { opacity: 0; left:46%; bottom:6em; transform: rotate(-50deg) scale(0,0); }
    70%  { opacity: 1; left: 75%; bottom 4em; transform: rotate(0deg) scale(1.5,1.5); }
    100% { opacity: 0; left: 115%; bottom 2em; transform: rotate(45deg) scale(1,1); }
}