<!DOCTYPE html>
<head>
<title>test1 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--link rel="stylesheet" type="text/css" href=“mystyle.css”-->
<!--https://fonts.google.com/ -->
<link href='https://fonts.googleapis.com/css?family=BenchNine' rel='stylesheet'  type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet'  type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto’ rel='stylesheet'  type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type='text/css'>

<STYLE>
html {	text-align:center; 
	}

body {	font-size:16px;
	font-family: Abel, Roboto, sans-serif;
	margin:auto
	}

p {	font-family: Abel, Roboto, sans-serif;
	line-height: 1.0;
	color:#555555; 
	}

a:link{text-decoration:none; color: #333355}  /* #ff7700; #444444; */
a:visited{text-decoration:none; color: #333355;}  /* #ff7700; */
a:hover{text-decoration:none; color: #cc4433;}  /* underline; #ee6600; #00ccaa; */
a:active{text-decoration:none; color: #cccc33;}

p.title	{display: block;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 2px; 
	margin-bottom: 0px;
	font-size:280%; /* 325%; */ 
	font-family: BenchNine, Abel, sans-serif; 
	line-height: 1.1;
	text-align:left;
	width:75%; /*768px*/
	}
span.title-dim { opacity:0.65;
	color: #333355;
	}

p.title-sub {display: block;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 0px; 
	margin-bottom: 0px;
	font-size:200%; /* 200%; */ 
	font-family: BenchNine, Abel, sans-serif; 
	line-height: 0.9;
	text-align:left;
	width:75%; /*768px*/
	opacity: 0.45
	}
p.title-body {display: block;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 20px; 
	margin-bottom: 0px;
	font-size:180%; 
	line-height: 1.25;
	text-align:left;
	width:74%; /*768px*/
	opacity: 0.75
	}

p.menu1{display: block;  /* */
	margin-left: auto;
	margin-right: auto; 
	margin-top: 20px; 
	margin-bottom: 30px;
	font-size: 120%;
	line-height: 0.1;
	cursor:default;  
	text-align:left;
	width:75%; /*766px*/
	color: #999999; 
	}
hr.hrc	{width: 50%;
	height: 1px; 
	border: 0; 
	background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	align: center;
	}
hr.hrl	{width:100%;/*765px*/
	height: 2px; 
	border: 0; 
	background-image: linear-gradient(to right, rgba(0,0,0,0.35), rgba(0,0,0,0));
	align: center;
	}

hr.hrr	{width:100%;/*765px*/
	height: 2px; 
	border: 0; 
	background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.35));
	align: center;
	margin-bottom: 20px; 
	}

img {display: block;
	margin: auto;
	max-width: 100%;
	height: auto;
	width:700px; 
	}



p.proj-head{	display: block;
	font-family: BenchNine, Abel, sans-serif; 
	font-size: 425%;
	color:#ffffff; 
	line-height: 1.0;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 20px; 
	margin-bottom: 12px;  
	text-align:center;
	width:800px; /*765px;*/
	cursor:default;  
	/*background-color: #eeeeee;*/
	text-shadow: 0px 0px 1px #333333;
	} 
p.proj-subhead{ display: block;
	font-size: 150%;
	color:#ffffff;
	line-height: 1.2;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 0px; 
	margin-bottom: 6px; 
	padding-top: 0px; 
	padding-bottom: 10px; 
	text-align:center;
	width:700px; /*765px;*/
	cursor:default;  
	/*background-color: #dddddd;*/
	text-shadow: 0px 0px 1px #333333;
	} 



p.text-head{	display: block;
	font-family: BenchNine, Abel, sans-serif; 
	font-size: 245%;
	line-height: 1.25;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 30px; 
	margin-bottom: 2px;  
	text-align:left;
	width:700px; /*765px;*/
	cursor:default;  
	/*background-color: #eeeeee;*/
	} 
p.text-body{ display: block;
	font-size: 150%;
	line-height: 1.4;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 0px; 
	margin-bottom: 6px; 
	padding-top: 0px; 
	padding-bottom: 10px; 
	text-align:left;
	width:700px; /*765px;*/
	cursor:default;  
	/*background-color: #dddddd;*/
	} 
p.text-caption{ display: block;
	font-style: italic;
	opacity: .65;
	font-size: 110%;
	line-height: 1.2;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 0px; 
	margin-bottom: 12px; 
	padding-top: 0px; 
	padding-bottom: 10px; 
	text-align:center; /*left;*/
	width:680px; /*765px;*/
	cursor:default;  
	} 


p.ul-head {  display: block;
	font-size: 120%;
	line-height: 1.4;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 0px; 
	margin-bottom: 0px; 
	padding-top: 0px; 
	padding-bottom: 0px; 
	text-align:left;
	width:700px;
	}
ul { list-style-type: square; /*circle, disc*/
	font-size: 140%;
	width: 690px;
	list-style-position: outside;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 0px; 
	margin-bottom: 24px; 
	padding-top: 0px; 
	padding-bottom: 0px; 
	text-align:left;
	color:#555555; 
	}
ul li {
	margin-left: 0;
	margin-right: auto; 
	margin-top: 0px; 
	margin-bottom: 0px; 
	padding-top: 0px; 
	padding-bottom: 0px; 
	text-align:left;
	line-height: 1.4;
	}

ol { list-style-type: 1; /* A, a, I, i */
	font-size: 140%;
	width: 690px;
	list-style-position: outside;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 0px; 
	margin-bottom: 24px; 
	padding-top: 0px; 
	padding-bottom: 0px; 
	text-align:left;
	color:#555555; 
	}
ol li {
	margin-left: 0;
	margin-right: auto; 
	margin-top: 0px; 
	margin-bottom: 0px; 
	padding-top: 0px; 
	padding-bottom: 0px; 
	text-align:left;
	line-height: 1.4;
	}



p.shout { display: block;
	width:700px;  /* 75% */ 
	font-size: 280%;
	/*font-style: italic; */
	color: #bbbbbb; /* #ff9933; */ 
	opacity:0.95;
	line-height: 1.2;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 0px; 
	margin-bottom: 0px; 
	padding-top: 6px; 
	padding-bottom: 12px; 
	text-align:center;
	}
hr.shout { width:740px; /*75%;*/
	height: 2px; 
	border: 0; 
	background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.25), rgba(0,0,0,0)); /*rgba(255,75,0,0.75)*/
	align: center;
	margin-top: 24px;
	margin-bottom: 28px;
	}

div.gray1 { width:100%; 
	background-color:#f0f0f0; /* rgba(50, 150, 100, 0.10); */
	padding-top:2px; 
	padding-bottom:22px; 
	margin-top:28px; 
	margin-bottom:28px;
	}


span.highlight1 { display:inline;
	background-color:#ffff99;
	}
span.colorbox1 {display:block; 
	float:right;
	width:300px; 
	max-width:400px; 
	max-height:400px;
	text-align:left;
	color:#eeeeee; /* #ff7744; */ 
	font-size: 120%;
	line-height: 1.3;
	background-color:#666666; 
	border:5px none #666666; /* solid double */
	padding: 8px 6px 12px 15px;
	margin: 14px 0px 2px 8px; /*top right bottom left */
	}

span.span-select{user-select:all;
	}

p.footer1{display: block;
	font-size: 100%;
	line-height: 1.5;
	margin-left: auto;
	margin-right: auto; 
	margin-top: 2px; 
	margin-bottom: 2px;  
	text-align:left;
	width:75%; /*765px*/
	cursor:default;  
	color:#777777; 
	/*background-color: #eeeeee;*/
	} 




@media only screen and (max-width:800px) { 
	p.title {font-size: 7vw; 
		line-height: 0.8; 
		margin-left: auto;
		margin-right: auto; 
		margin-top: 10px; 
		margin-bottom: 1.0px;
		width:98%; 
		}
	span.title-dim { opacity:0.55;
		font-size: 5vw;
		}

	p.title-sub {display: block;
		margin-left: auto;
		margin-right: auto; 
		margin-top: 0px; 
		margin-bottom: 0px;
		font-size:4.5vw; 
		font-family: BenchNine, Tahoma, Geneva, sans-serif; 
		line-height: 1.0;
		width:98%; 
		}

	hr.hrr	{width: height: 2px; 
		border: 0; 
		background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.5));
		margin-bottom: 10px; 
		}

	p.menu1 {font-size: 3vw; 
		line-height: 1.3; 
		margin-left: auto;
		margin-right: auto; 
		margin-top: 2px;
		margin-bottom: 0px;
		width:95%; 
		}

	div.top-text { 
		width: 85%;
		padding-left: 8px; 
		padding-right: 8px; 
		top: 45%;
		left: 45%;
		transform: translate(-45%, -45%);
		}
	p.proj-head{ 
		font-size: 9vw;
		margin-top: 4px; 
		width: 90%;
		} 
	p.proj-subhead{ 
		font-size: 5vw;
		margin-top: 0px; 
		width: 90%;
		} 

	img { 
		max-width: 100%;
		width:100%; 
		}
	p.text-caption{ 
		font-style: italic;
		opacity: .75;
		font-size: 3vw;
		width:90%;
		}

	p.text-head 	{font-size: 8vw; 
		line-height: 1.0; 
		margin-left: auto;
		margin-right: auto; 
		margin-top: 12px; 
		margin-bottom: 2px;
		width:90%; 
		}
	p.text-body 	{ font-size: 5vw; 
		line-height: 1.2; 
		margin-left: auto;
		margin-right: auto; 
		margin-top: 0px; 
		margin-bottom: 1px;
		width:90%; 
		}

	p.ul-head { font-size: 3vw;
		line-height: 1.2;
		width:90%;
		}
	ul { 	font-size: 5vw;
		line-height: 1.3; 
		width:90%;
		/* font-size: 160%; */
		}

	ul li { /* font-size: 3vw; */ 
		line-height: 1.2; 
		width:90%;
		margin-bottom: 10px;
		}

	ol { 	font-size: 5vw;
		line-height: 1.3; 
		width: 75%;
		/* font-size: 160%; */
		}

	ol li { /* font-size: 3vw; */ 
		line-height: 1.2; 
		/* width: 85%; */
		margin-bottom: 10px;
		}


	span.colorbox1 { display:block; 
		float:right;
		font-size: 3vw; 
		line-height: 1.2;
		width:50%; 
		}


	p.shout { 
		width:95%;
		font-size: 200%;
		}
	hr.shout { width:95%;
		}

	p.footer1{font-size: 2vw; 
		line-height: 1.0; 
		margin-left: auto;
		margin-right: auto; 
		margin-top: 10px; 
		margin-bottom: 25px;
		width:95%; 
		}

	hr.hrc	{width:95%;
		height: 2px; 
		}
	hr.hrl	{width:100%;
		height: 2px; 
		}
	hr.hrr	{width:100%;
		height: 2px; 
		margin-top: 0px;
		margin-bottom: 0px;
		}
	}

@media only screen 
	and (min-width:800px) 
	and (max-width:1400px) 
	{ 
	p.title	{margin-top: 1px; 
		margin-bottom: 0px;
		font-size:300%; 
		line-height: 0.9;
		}
	p.menu1{ margin-top: 16px; 
		margin-bottom: 24px;
		font-size: 110%;
		line-height: 0.1;
		}
	}

</STYLE>
</head>

