@charset "utf-8";
html {
	font-family: Verdana, Geneva, sans-serif;
}
 *, *::before, *::after{
	margin: 0 0 1em 0;
	padding: 0;
	text-decoration: none;
}

li {margin-left: 2em;}
dd {margin-left: 1em;}
dt {margin: 0; font-weight: bold;}

h5 { /* use for ul Header */
	font-size: 1rem;
	margin-bottom: 0;
}



/* --min-width-pc */
@media screen and (min-width: 1101px){
	
	#section-Title{
	  height: 60vh;
	}

	.section-Span, .section-Flow{
		width: 95%;
		max-width: var(--max-body-width);
	}
	.section-Flow {
		background-color: var(--section-Flow-bg-color);
	}
	.section-Flow-Container{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 1em;
		border-bottom: 2px dashed var(--header-bd-color);
	}

	.iframe-YouTube iframe{
		width: 400px;
		height:300px;
		margin: 0 auto 1em auto;
		border:0;
	}
	html {
		--Big-Text:1.5rem;
		--img-scale:1;
		--font-size-scale:1;
		--line-height-scale:1.5;
	}
}  /** min-width: 1101px  **/


/** Reference: https://tutorialzine.com/2015/08/quick-tip-css-only-dropdowns-with-the-checkbox-hack */

/*  i P h o n e  width about 385px*/
/* --max-width-tablet */
@media screen and (max-width: 1100px) {

	header div{
		line-height: 1.5rem;
		margin-bottom: .2rem;
		font-size: .7rem;
	}
	html {
		--Big-Text:1.1rem;
		--img-scale:.5;
		--font-size-scale:.8;
    --line-height-scale:1;
	}

	.iframe-YouTube iframe{
		width: 320px;
		height:240px;
		margin: 0 auto 1em auto;
		border-radius: 1em;
	}
}  /** max-width: 1100px **/




@media screen{
  html{
    --body-max-width:1200px;
		--body-bg-color: #fff;

  }
	
		
	#section-Title{
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: transparent;
	}
	#section-Title h1{
		margin: 0;
		padding: 3px 5px;
		text-align: center;
		font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
		font-size: calc(var(--Big-Text) * 2);
		color: var(--main-section-color);
		}

	main {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content:center;
		align-items: stretch;
	}

	main section{
		flex: 1 0 var(--min-body-width);
		color: var(--main-section-color);
		background-color: var(--main-section-bg-color);
		border: solid 6px var(--main-section-bd-color);
		min-width: var(--body-min-width);
		max-width: var(--main-section-max-width);
		border-radius: 2rem 2rem 0 0;
		border-bottom: 2px solid var(--header-bd-color);
		margin:1em;
		padding: 1em;
	}
 a img:hover{
    transform: scale(1.1);
    overflow: hidden;
    opacity: 0.7;
  }
	.iframe-YouTube p{
		display: none;
	}
}  /* s c r e e n   **/


@media print {

	html {
		--img-scale:.5;
		--font-size-scale:1;
		--line-height-scale:1;
}
	body {
		background-color:#fff;
		color:#000;
    max-width: 10in;
	}

	#section-Title{
		color: #000;
	}
	main, section {
		display: block;
	}
	
	.iframe-YouTube iframe{
		display:none;
	}
	.iframe-YouTube p {
		width: 100px;
		height:60px;
		margin: 0 auto 1em auto;
		border:3px solid #000;
		text-align: center;
	}
}  /**  p r i n t   ***/




/*--  C o l o r s  ---*/
html {
	/*	background:linear-gradient(rgba(255,255,255,1), rgba(155,155,155,1)); */
	--main-bg-color:        #fff;
  --header-color:         #111;
  --header-bg-color:      #ddd;
  --header-bd-color:      #555;
  --nav-bg-color:         #ddd;
  --nav-a-bg-color:       #aaa;
  --nav-a-bd-color:       #aaa;
	--main-section-color:   #111;
	--main-section-bg-color:#fff;
	--main-section-bd-color:#fff;
	--section-Flow-bg-color:#eee;
	/*
	--main-section-color:   #666;
	--main-section-bg-color:#ddd;
	--main-section-bd-color:#ddd;
  **/
	--a-color:              #00f;
  --a-hover-bg-color:     #eee;

}

a, a:visited {color:var(--a-color);}
a:hover {background-color:var(--a-hover-bg-color);}
nav a   {background-color:var(--nav-a-bg-color);}
nav     {background-color:var(--nav-bg-color);}

header {
	background-color: var(--header-bg-color);
	color: var(--header-color);}
main   {background-color:var(--main-bg-color);}


/* S i z i n g   */
body, header {
 	max-width:var(--body-max-width);
	min-width: var(--body-min-width);
	margin: 0 auto 1rem auto;
}

html {
	--body-min-width: 360px;
	--main-section-max-width:400px;
}

header {
	text-align: center;
	padding: .4rem;
	border: solid 5px var(--header-bd-color);
	border-radius: 1rem;
}
header img{
	width: calc(155px * var(--img-scale));
	margin-right: 1em;
}

header > div  {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 0;
}
nav {
	display: flex;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	border-radius:2em;
}
nav a, nav a:visited{
	font-weight:bold;
	display: inline-block;
	margin: .2em .3em;
	padding:.2em .4em;
	border: 1px solid transparent;
	border-radius: 6px;
	color:var(--a-color);
	text-decoration:none;
}
nav a:hover {border:1px solid var(--a-color); }

html {
	--body-min-width: 360px;
	--main-section-max-width:400px;
}

header {
	text-align: center;
	padding: .4rem;
	border: solid 5px var(--header-bd-color);
	border-radius: 1rem;
}
header > div  {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 0;
}

nav {
	display: flex;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	border-radius:2em;
}
nav a{
	font-weight:bold;
	display: inline-block;
	margin: .2em .3em;
	padding:.2em .4em;
	border-radius: 6px;
}

main section img{
	border-radius: 10px;
}
main nav{
	width:100%;
}

/* .flex-grow needed for .Continuum */
.flex-grow {
	flex:9999 1 auto;
}


footer {
	padding:.5em;
	font-size:.9em;
	border: solid 6px var(--header-bd-color);
	border-radius: 1em;
	text-align:center;
}
footer h3 {
	margin-bottom: .1em;
}
footer div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	margin: 1em;
}
footer address {
	padding: 0 1em 1em 1em;
	font-size:.9em;
}
footer address::first-line {
	font-weight: bold;
}

.Block{
	margin: 1em 2em;
}
.Block::first-line{
	font-weight: bold;
}
	
.list-img-Link > div{
	display: flex;
	flex-direction: row;
}
.list-img-Link img, .list-img-Link span {
	width: 60px;
	margin:0 1em 0 0;
}

.list-style-type-none li{list-style-type: none;}
.list-style-type-disc li{list-style-type: inherit;}

.list-style-type-Center li{
	list-style-type: none;
	margin-left: 0;
}
.list-style-type-Center dd{
	margin-left: 0;
}
.list-style-type-Bullet      dd:before{content: "\2022\ ";}
.list-style-type-Dash        dd:before{content: "- ";}
.list-style-type-Star        dd:before{content: "\2605\	";}
.list-style-type-Box-Empty   dd:before{content: "\2610\ ";}
.list-style-type-Box-Checked dd:before{content: "\2611\ ";}
.list-style-type-Box-Exed    dd:before{content: "\2612\ ";}
.list-style-type-Face-Frown  dd:before{content: "\2639\ ";}
.list-style-type-Face-Smile  dd:before{content: "\263A\ ";}
.list-style-type-Heart       dd:before{content: "\2661\ ";}
.list-style-type-Diamond     dd:before{content: "\2662\ ";}

.margin-bottom-0{
	line-height: 1em
}
.margin-bottom-0, .margin-bottom-0 dt, .margin-bottom-0 dd{
	margin-bottom:0;
}
.div-Tip{
	display: flex;
	flex-direction: row;
}
.div-Tip p{
	font-size: calc(2rem * var(--font-size-scale));
	line-height: calc(1.5rem * var(--line-height-scale));
	font-weight: bold;
	margin: 0 3px 0 0;	
	transform: rotate(-20deg);
}
.div-Tip *{
	text-align: center;
	margin: 0;
}
.div-Tip h3{
	margin-top: 1em;
}

blockquote{
	margin: 0 3rem 1rem 3rem;
	font-style: italic;
}
blockquote::before{
	content: "\201C";
	font-weight: bold;
}
blockquote::after{
	content: "\201D";
	font-weight: bold;
}
	
/* i m g   D e f a u l t s  */
.img-Landscape, .img-Portrait{
	float: right;
	padding: 1px 0 1px 3px;
}
.img-Landscape{
	width: calc(200px * var(--img-scale));
}
.img-Portrait{
	width: calc(140px * var(--img-scale));
}  /*  i m g   D e f a u l t s   */

.hr-visibility-hidden{
	width: 95%;
	margin: 0;
	visibility: hidden;
}
.Emoji-Left{
	float: left;
	width: 3rem;
	padding: 0 2px 1px 0;
}
.Emoji-Right{
	float: right;
	width: 3rem;
	padding: 0 0 1px 2px;
}
.BigText {
	font-size: 1.6rem;
	font-weight: bold;
}
.MediumText {
	font-size: 1.4rem;
	font-weight: bold;
}
.Caps{
	text-transform: uppercase;
	letter-spacing: 1.7px;
}
.SlantText{
	font-size: calc(2rem * var(--font-size-scale));
	line-height: calc(1.5rem * var(--line-height-scale));
	font-weight: bold;
	margin: .5em .5em .5em 0;
	float: left;
	transform: rotate(-20deg);
}