@import "inter.css";
html * {box-sizing:border-box;}
html {font-family:Inter,sans-serif; font-size:12pt; line-height: 1.6; color:#666}
body {padding:0;position:relative;width:140vh;max-width:100%;margin:0 auto;}
a {color:#669}
a:visited {color:#969}
img {width:100%; height:auto}
#ctrl {position:absolute;top:0; left:0;font-size:50%;padding:0 1em;background-color:#000;color:#fff;cursor:pointer}
#head {padding:0}
#head h1 {margin:0 0 1rem 1rem}
#main .text, #design {max-width:98%;margin:0 auto;}
#main .text {padding:0 1rem}
nav {position:-webkit-sticky;position:sticky;top:0;padding:0;background:#fff}
nav li span, nav li a, nav li a:visited {color:#555;text-decoration:none;padding:0.5rem;display:block}
nav li span {color:#fff;background-color:#555}
nav ul {padding:0}
img.fw {width:100%;height:auto;}
ul.list {list-style:none;padding:0}
.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 500ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ham.active {
  transform: rotate(45deg);
}
.line {
  fill:none;
  transition: stroke-dasharray 500ms, stroke-dashoffset 500ms;
  stroke:#000;
  stroke-width:5.5;
  stroke-linecap:round;
}
.ham .top, .ham .bottom {
  stroke-dasharray: 40 121;
}
.ham.active .top, .ham.active .bottom {
  stroke-dashoffset: -68px;
}
.menu {
    display: none;
    margin:0;
    z-index:1;
}
.menu li {
  display:block;
  text-align:center;
}

.menu-toggle {
    font-size: 36px;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 5px;
    background-color:#fff;
    border:0;
    padding:0;
    margin:0
}

.menu a {
    display: block;
    cursor: pointer;
}
.menu a:hover {background:#000;color:#fff}
.active .menu {
    display: block;
}
.active #main {
	display:none;
}
.menu-toggle:focus {
    outline: 2px solid;
}
#logo {width:10em;padding:1em 0 0.5em}
/*#LogoImg {width:100%;height:auto}*/
#btn {text-align:center}
#enter {display:inline-block;color:#333;text-decoration:none;width:auto;margin:0 0 2rem;padding:0.5rem;font-size:1em;border-radius:1rem;border:1px solid #999;-webkit-box-shadow: 5px 5px 9px 3px #999999;box-shadow: 5px 5px 9px 3px #999999; background-color:#fff}
#enter:hover {-webkit-box-shadow:inset 5px 5px 9px 3px #999999;box-shadow:inset 5px 5px 9px 3px #999}
.btn1b #enter:hover,.btn2b #enter:hover,.btn5b #enter:hover {background-color:#111; box-shadow:inset 5px 5px 9px 3px #000}
#enter span {display:inline-block}
.btn1a span, .btn1b span {background: url("/images/btn/animate1.svg") 0% 50% no-repeat;}
.btn2a span {background: url("/images/btn/animate2a.svg") 0% 50% no-repeat;}
.btn2b span {background: url("/images/btn/animate2b.svg") 0% 50% no-repeat;}
.btn3 span, .btn4 span {background: url("/images/btn/animate3.svg") bottom no-repeat;}
.btn5a span, .btn5b span {background: url("/images/btn/animate5.svg") 0% 50% no-repeat;}
.btn1a span, .btn1b span, .btn2a span,.btn2b span,.btn5a span,.btn5b span {text-align:right; padding:0.5rem 0.5rem 0.5rem 4rem;}
.btn3 span, .btn4 span {text-align:center;padding:0 2rem 0.5rem 1.5rem;}
.btn1b #enter, .btn2b #enter, .btn5b #enter  {background-color:#000}
.btn1b span, .btn2b span, .btn5b span {color:#fff}
h2#subtitle {font-size:0.8em;margin-left:1rem}
.to, .to h2 {margin:0; padding:0;font-size:0.8rem; font-weight:normal;text-align:center}
.to h2 {margin:0 1rem}
.to h2.blk {color:#000}
.people details {font-size:.9rem}
summary {cursor:pointer}
summary strong {font-size:120%}
.people details summary img, .people p.summary img {float:right;padding:0 0 0.5rem 0.5rem;width:initial;max-width:30%}
details:after, details summary:after, p.summary:after {content:"";display:table;clear:both}
details[open]:after, details summary:after, .summary:after {width:100%;border-bottom:1px solid #666}
.tech details[open]:after, .tech details summary:after, .tech .summary:after {border-bottom:none}
.people details summary:after, .people .summary:after {height:1rem}
.people details[open] summary:after {border-bottom:none;height:0}
.people details[open] summary span {display:none}
.people details img {float:left;max-width:10rem;padding:0 1rem 0.5rem 0}
.people details {font-size:0.9rem}
summary:focus { outline: thin dotted; }
.people details summary, .people .summary {font-size:1rem}
details summary {
  position:relative;
}
.tech details {margin:1em 0}
.tech details details {margin-left:2rem}

summary h2, summary h3 {display:inline;font-size:initial}
figure img {background-color:#fff}
figcaption {text-align: center;font-size: 90%;color:#000}
#footnotes {font-size:0.6rem}
#footnotes:before {content:"";display:table;clear:both;width:25%;border-top:1px solid #666}
#foot {background-color:#17809B;color:#fff;text-align:center}
#foot { background: -webkit-linear-gradient(left, #F00, #F90 , #EC0, #090, #09C, #009, #909, #C0C); 
    background: -o-linear-gradient(right, o#F00, #F90, #EC0, #090, #09C, #009, #909, #C0C); 
    background: -moz-linear-gradient(right, #F00, #F90, #EC0, #090, #09C, #009, #909, #C0C);
    background: linear-gradient(to right, #F00, #F90, #EC0, #090, #09C, #009, #909, #C0C);
}
#foot .contact {font-size:85%}
#foot a {color:#fff}
#design {font-size:60%;text-align:center}
#design a {color:#666;text-decoration:none}
#funded {text-align:center;font-size:70%}
#funded img {width:150px; max-width:50%}
@media only screen and (min-width: 20rem) and (min-height: 15rem) {
	html {font-size:12pt}
	.to {
		position: relative;
		text-align: left;
		color: white;
	}
	.to h2 {
		position: absolute;
		top: 50%;
		left: 25%;
		-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);
		//text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
		margin-right:25%;
		font-size:1.1rem;
		text-align:left
	}
	.to h2.top {
		top: 10%;
		left:3%;
		-ms-transform: translate(-3%,-10%);transform: translate(-3%,-10%);
		margin-right:0
	}
	.to h2 span {
		display:none;
	}
}

@media only screen and (min-width:25rem) and (min-height: 18rem){
	html {font-size:14pt}
	.to h2 {
		font-size:1.2rem;
	}
	.right {float:right;margin:1em 0 1em 1em}
	.left {float:left;margin:1em 1em 1em 0}
	img.right, img.left {width:initial;max-width:50%}
	#main .text {padding:0 1.5rem}
	#foot {padding:1.5rem}
	#design {text-align:right}
}
@media only screen and (min-width:30rem) and (min-height: 21.5rem){
	html {font-size:16pt}
	.to h2 {
		font-size:1.5rem;
	}
	details summary, .summary {font-size:.8rem}
	details[open] {font-size:.8em}
}
@media only screen and (min-width:38rem)  and (min-height: 27rem) {
	.to h2 span {
		display:inline;
	}
	.ham {display:none}
	nav {position:absolute;top:0; right:1rem;background-color:transparent;font-size:0.75em}
	.menu {display:block}
	.menu li {display:inline-block}
	figure.f2 img {width:50%}
	figure.r60, figure.r50, figure.r25 {float:right;width:25%}
	figure.l60, figure.l50, figure.l25 {float:right;width:25%}
	figure.r60, figure.l60 {width:60%}
	figure.r50, figure.l50 {width:50%}
	.text p {clear:both}
}
@media only screen and (min-width:45rem) and (min-height: 33rem){
	.to h2 {
		font-size:1.6rem;
	}
	figure.cr {display:flex;justify-content:space-between;align-items:center}
	figure.cr img {flex: 0 0 600px;max-width:600px}
}
@media only screen and (min-width: 55rem) and (min-height: 40rem) {
	
	.active #main {display:block;}
	#head h1 {padding-top:2rem}
	h2#subtitle {font-size:0.9em}
	.to h2 {
		font-size:1.7rem;
	}
}
@media only screen and (min-width:60rem) and (min-height: 43rem){
	.to h2 {
		font-size:1.9em;
	}
}
@media only screen and (min-width: 64rem) {
	body {max-width:64rem}
}
@media only screen and (min-width: 64rem) and (min-height: 46rem) {
	.to h2 {font-size:2rem}
	#enter {padding:0.8rem;font-size:1.1em;border-radius:1.2rem;margin:1rem}
	.btn1a span, .btn1b span, .btn2a span,.btn2b span,.btn5a span,.btn5b span {padding:1rem 1rem 1rem 5rem;}
}