@charset "UTF-8";
/*   Kumiko Shimizu CSS   */

body {
	font-size: 14px; /* 16/320 */
	line-height: 1.3em;
	background-color: white;
	text-align: center;
}
html, body {
	height: 100%;
	/* overflow: hidden; */
}
body, p, th, td, li, h1, h2, h3, h4, legend, input, label {
	color: #7f7f7f;
	font-family: Arial, sans-serif;
	line-height: 1.3em;
	text-align: left;
}
strong {
	font-weight: bold;
}
a:link, a:visited {
	color: #6699CC;
	text-decoration: none;
}
a:hover, a:active, a:focus {
	text-decoration: underline;
}
.wrapper {
	height: 100%;
}

/* HEADER */
/* ====== */

header {
  background-color: white;
  position: fixed;
  top: 0;
  width: 100%;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
header > .header-wrapper {
  display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height:      10vh; /*  header height  */
}
main {
	padding-top: 10vh; /* space for header */
	margin: 0 auto;    /* center for responsive */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-left: 10px;
	padding-right: 10px;
}
/* offset anchors to show titles */
.anchor {
  display: block;
  position: relative;
  top: -10vh; /* postion under header */
  visibility: hidden;
}
.anchor-top {
	float: right;
	padding: 0;
}
.anchor-top img {
	width: 0.6em;
}
header h2 {  /* logotype */
	color: black;
	font-size: 20px;
	margin: 0 15px;
}
.nav-title p {
	margin: 0;
}
.logo-and-title {
	display: flex;
	flex-direction: row;
	align-items: center;
}
#menu-icon {
	width: 5.625vw;
	margin-right: 4.6875vw;
}
#menu-icon {
	display: block; /* removes img pixel gap */
}
.header-wrapper > .nav-links {
  font-size: 14px;
  position: absolute;
  /* display: block; */
  width: 100%;
  height: 0px;
  overflow-y: hidden;
  top: 10vh; /* 50/498 */
  left: 0;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
/*  link styles   */
header a:link, header a:visited {
  width: 100%;
  display: block;
  color: #333;
  background-color: white;
  border-bottom: 1px solid #ccc;
	font-family: Arial, sans-serif;
	font-size: 1.4em;
	line-height: 2;
	text-align: center;
	text-decoration: none;
}
/* all active states + current */
header a:hover, header a:active, header a:focus, header a.current {
  color: white;
	background-color: #333;
  /* border-bottom: 1px solid white; */
}
.header-wrapper > #nav-check {
  display: none;
}
.header-wrapper > #nav-check:not(:checked) + .nav-links {
  height: 0px;
}
.header-wrapper > #nav-check:checked + .nav-links {
  height: auto;
  overflow-y: auto;
}
/* HEADERS */

p, h1, h2, h3, h4 {
	margin-bottom: 1em; /* vertical ONLY margins on text */
}
h1 {
	display: none;
}
h2 {
	color: #333;
	font-size: 30px;
	font-family: 'Rock Salt', cursive;
	line-height: 1.6em;
	margin-top: 2em;
	margin-bottom: 2em;
	text-align: center;
}
article > h2:first-of-type {
	/* margin-top: 1em; */
}
h3 {
	color: #cc6666;
	font-size: 20px;
	line-height: 1em;
	font-family: 'Barlow Condensed', sans-serif;
	margin-bottom: 0.3em;
	padding-bottom: 0.3em;
	border-bottom: 1px solid #ffcccc;
	text-transform: uppercase;
}
h4 {
	color: #cc9999;
	font-size: 20px;
	font-family: 'Barlow Condensed', sans-serif;
	margin-bottom: 0.5em;
}
table h4 {
	border-bottom: 1px dotted #ccc;
	margin-bottom: 0;
}
td {
	padding: 3px 0;
}
td:first-of-type {
	color: #666;
	width: 23%;
}
blockquote {
	border-top: 1px solid #6699cc;
	border-bottom: 1px solid #6699cc;
	padding: 20px 5px;
	margin-top: 2em;
	margin-bottom: 2em;
	background-color: #f8fdff;
}
blockquote p {
	color: #6699cc;
	font-size: 19px;
	line-height: 1.2em;
	font-family: 'Barlow Condensed', sans-serif;
	text-align: center;
	font-style: italic;
	margin-bottom: 0.8em;
}
.link-telephone, .link-email {
	font-family: 'Barlow Condensed', sans-serif;
  margin: 0;
	text-align: center;
	font-size: 20px;
	line-height: 30px;
}
.link-telephone a, .link-email a {
	color: #6699cc;
	padding: 3px 0 3px 30px;
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: 0 6px;
}
.link-email a {
	background-size: 18px;
	background-position: 0 11px;
}
.link-telephone a {
	background-image: url("../images/contact-telephone.svg");
}
.link-email a {
	background-image: url("../images/contact-email.svg");
}
.link-no-border img {
	border: none;
}


/* CALL TO ACTION */
.action {
	width: 100%;
	margin: 2em auto;
	padding: 0.5em;
	border: 1px solid #6699cc;
	background-color: #f8fdff;
}
.action p, .action h4 {
	text-align: center;
	margin: 0.5em;
}
.action h4 {
	color: #336699;
	font-family: 'Rock Salt', cursive;
	border: none;
}
/* FOOTER */
footer {
	padding: 1em 0;
}
.return-to-top {
	text-align: center;
}
.return-to-top a {
	height: 20px;
	font-size: 70%;
	font-weight: bold;
	text-align: center;
	padding-left: 20px;
	margin: 2em 0;
	background-image: url("../images/triangle-top.svg");
	background-size: 10px;
	background-repeat: no-repeat;
	background-position: 0px 2px;
}
.copyright {
	color: #999;
	font-size: 8px;
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1em;
}
.multi-box {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 2em;
}
figure + figure, figure + .multi-box {
	margin-top: -1em;
}
figure {
	margin-bottom: 3em;
}
.text-box {
	margin-bottom: 2em;
}
.multi-box > figure {
	width: 48.333333%;
	margin: 0;
}
.multi-box > .multi-small {
	width: 30%;
}
.multi-box > .multi-large {
	width: 70%;
}
figcaption, .photo-credit {
	font-size: 8px;
	text-transform: uppercase;
	text-align: right;
	line-height: 1.5em;
}
.photo-credit {
	margin-top: -3.5em;
	margin-bottom: 2em;
}
.hidden { display: none; }
.unhidden { display: block; }

ol.list-numbered {
	list-style-type: decimal;
	list-style-position: outside;
	margin-left: 0.5em;
	padding-left: 1em;
}
ol.list-numbered li {
	margin-bottom: 0.5em;
}
ul.submenu {
	margin-top: 1em;
	margin-bottom: 1em;
}
ul.submenu li {
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 0.6em;
}
ul.submenu a {
	padding-bottom: 0.3em;
	background-image: url("../images/line-gradient.jpg");
	background-repeat: no-repeat;
	background-position: center bottom;
}
ul.submenu a:hover {
	color: #333;
	font-weight: bold;
	text-decoration: none;
}
.credit {
	font-size: 10px;
}
.logo {
	width: 50%;
	padding: 10px;
}
.subtitle {
	font-size: 0.8em;
}
.hyperdensity {
	height: 22px;
	background-image: url("../gallery/02-hyperdensity-01.gif");
	background-repeat: repeat-x;
	background-size: contain;
	background-position: left;
	margin-left: -10px;
	margin-right: -10px;
}
#youtube {
	width: calc(100vw - 20px); /* ratio of box 4:3 */
	height: calc((100vw - 20px) * 0.75); /* unit relative to width */
	position: relative;
	z-index: -1000;
}
#youtube iframe {
	position: absolute;
  	top: 0;
	left: 0;
  	width: 100%;
	height: 100%;
}
.text-center {
	text-align: center;
}
.photo-small {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.link-small {
	font-size: 0.9em;
}

/*  MEDIA QUERIES   */
/* ================ */

/*  MEDIUM screens  */
@media screen and (min-width: 600px) {
	body {
		font-size: 16px;
	}
	header > .header-wrapper {
		height: 125px;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	/* offset anchors to show titles */
	.anchor {
	  top: -125px; /* postion under header */
	}
	.header-wrapper > #nav-check:not(:checked) + .nav-links {
	  height: 40px;
		position: static;
		box-shadow: none;
	}
  .header-wrapper > .nav-btn {
    display: none;
  }
  .header-wrapper > .nav-links {
		text-align: center;
    overflow-y: visible;
		background-color: #333;
  }
	header h2 {
		font-size: 35px; /* logotype */
		margin: 0 30px 0 0;
  }
	.nav-title p {
		font-size: 1.1em;
	}
  header ul {
		display: inline-block;
  }
  header li {
    display: inline; /* horizontal list */
  }
	.logo-and-title {
		height: 85px;
	}
  header a:link, header a:visited {
		height:      40px;
		line-height: 40px;
  	width: auto;
		display: inline-block;
    color: #999;
    background: none;
		border: none;
  	font-size: 1.2em;
		margin: 0 1em;
  }
	/* hover and focus - yellow */
	header a:hover, header a:focus {
		color: #ff6666;
	}
	/* active and current - red */
	header a:active, header a.current {
	  color: white;
	}
	main {
		max-width: 600px;
		/* extra space for 2nd line in header */
		padding-top: 125px;
	}
	h1 {}
	h2 {font-size: 50px;}
	h3 {font-size: 25px;}
	h4 {font-size: 25px;}
	figcaption, .photo-credit {
		font-size: 11px;
	}
	.photo-credit {
		margin-top: -3em;
	}
	.copyright {
		font-size: 10px;
	}
	td {
		font-size: 14px;
	}
	td:first-of-type {
		width: 12%;
	}
	#two-logos {
		width: 60%;
		margin: 0 auto;
	}
	.multi-box > .multi-small {
		width: 15%;
	}
	.multi-box > .multi-large {
		width: 60%;
	}
	#youtube {
		width: 580px; /* ratio of box 4:3 */
		height: 435px; /* unit relative to width */
		margin-left: 0;
		margin-right: 0;
	}
	.hyperdensity {
		height: 31px;
	}
	.mobile-only {
		display: none;
	}
	.photo-smaller {
		width: 60%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.photo-small {
		width: 30%;
	}
}