/*  chad.css    main stylesheet for Chad Cognata website   author: Mark Lamprey © 2017 iDesignMagic */

/*  tablets get chad-tablet.css: with media queries */
/*  phones get chad-phone.css */

/* download fonts
--------------------------------------------------*/
@font-face {	/*headline*/
	font-family: "sorts-mill-goudy-idm";
	src: url("../fonts/sortsmillgoudy-regular-webfont.eot");
	src: url("../fonts/sortsmillgoudy-regular-webfont.eot?#iefix") format("embedded-opentype"),
	url("../fonts/sortsmillgoudy-regular-webfont.woff2") format("woff2"),
	url("../fonts/sortsmillgoudy-regular-webfont.woff") format("woff"),
	url("../fonts/sortsmillgoudy-regular-webfont.ttf") format("truetype"),
	url("../fonts/sortsmillgoudy-regular-webfont.svg#sorts_mill_goudyregular") format("svg");
	font-weight: normal;
	font-style: normal;
}
@font-face {	/*body text*/
	font-family: "quattrocento-idm";
	src: url("../fonts/quattrocentosans-regular-webfont.eot");
	src: url("../fonts/quattrocentosans-regular-webfont.eot?#iefix") format("embedded-opentype"),
	url("../fonts/quattrocentosans-regular-webfont.woff2") format("woff2"),
	url("../fonts/quattrocentosans-regular-webfont.woff") format("woff"),
	url("../fonts/quattrocentosans-regular-webfont.ttf") format("truetype"),
	url("../fonts/quattrocentosans-regular-webfont.svg#quattrocento_sansregular") format("svg");
	font-weight: normal;
	font-style: normal;
}
@font-face {	/*menu, footer, cite */
	font-family: "raleway-idm";
	src: url("../fonts/raleway-light-webfont.woff2") format("woff2"),
	url("../fonts/raleway-light-webfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {	/* handwriting */
	font-family: "kavivanar-idm";
	src: url("../fonts/kavivanar-regular-webfont.woff2") format("woff2"),
	url("../fonts/kavivanar-regular-webfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {   /*icons*/
	font-family: "idm-smallset";
	src: url("../fonts/idm-smallset.eot?75355305");
	src: url("../fonts/idm-smallset.eot?75355305#iefix") format("embedded-opentype"),
	url("../fonts/idm-smallset.woff2?75355305") format("woff2"),
	url("../fonts/idm-smallset.woff?75355305") format("woff"),
	url("../fonts/idm-smallset.ttf?75355305") format("truetype"),
	url("../fonts/idm-smallset.svg?75355305#idm-smallset") format("svg");
	font-weight: normal;
	font-style: normal;
}
/* base page
--------------------------------------------------*/
html {
	height: 100%;
	font-size: 100%;
}
body {
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	min-height: 100%;
	background-color: hsl(232, 12%, 13%);     /* charcoal shows at edges (for desktops) and under foooter */
	color: #eee;
	font: normal normal normal 1em/1.5 quattrocento-idm, avenir-roman, "Maiandra GD", avenir-book, fontin, "trebuchet ms", Corbel, sans-serif;
	font-size: calc( .75em + (1.188 - .75) * (100vw - 25em) / (87.5 - 25));  /* 1em in font above is fallback */

	-webkit-font-smoothing: subpixel-antialiased;   /*stops flicker during transitions in Safari*/
	/*  -webkit-text-stroke: 0.4px;  if some text is broken, move this line to that div   */
}
.page {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 0 3%;
	min-height: 100vh;
	width: 94%;		/* body charcoal background shows at edges */
	background: #02283f;		/* gradient starts with a lighter version of this and adds transparent darkening */
	background: #032e48 linear-gradient(110deg, transparent 19%, hsla(0,0%,0%,.22) 39%, hsla(0,0%,0%,.19) 72%, hsla(0,0%,0%,.11) 83%);
}
.ie .page {
	position: absolute;
	display: block;
	padding-bottom: 4.5em;	/* for sticky footer */
	height: 100%;
}
.ie9 .page {
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxOSUiIHN0b3AtY29sb3I9IiMwMzJlNDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzOSUiIHN0b3AtY29sb3I9IiMwMjI1M2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI3MiUiIHN0b3AtY29sb3I9IiMwMjI4M2YiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4MyUiIHN0b3AtY29sb3I9IiMwMzJlNDgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.lt-ie9 .page {
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#032e48', endColorstr='#032e48',GradientType=1 )";
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#032e48', endColorstr='#032e48',GradientType=1 );
	zoom: 1;
}
p, h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
input, select, th, td {
	font-size: 1em;
}
li li, li p, td p, blockquote p {   /* keep nested elements from inheriting (doubling) em size */
	font-size: 1em;
}
a,
a:visited,
a img,
a img:visited {
	outline: none;
	border: none;
	text-decoration: none;
}
a:hover,
a img:hover,
a:active,
a img:active {
	outline: none;
	border: none;
	text-decoration: none;
	cursor: pointer;
}

/* in common
--------------------------------------------------*/
#overlay {
	display: none;
}
header {
	/*flex: Header is one row, 100% (of page) wide, with margins on top and sides. Justify: flex-start puts logo on left; menubutton is not child of header */
	display: flex;
	flex: initial;
	flex-flow: row nowrap;
	justify-content: flex-start;
	margin: 1.5em 3% 0;   /* no bottom margin allows taller main */
	width: 100%;
}
#logo-block {
	flex: initial;
	min-width: 4.375em;
	max-width: 6.25em;
	width: calc( 4.375em + (6.25 - 4.375) * (100vw - 25em) / (87.5 - 25));
}
#logo-block img {
	width: 100%;
	height: auto;
	transition: transform .3s cubic-bezier(.04,.53,.4,.86);
}
#logo-block a:hover img {
	transform: scale(1.04);
}
#menubutton {
	position: fixed;
	top: 4.5em;
	right: 6%;
	z-index: 500;
	visibility: visible;
	flex: none;
	color: #00e9ff;
	opacity: 1;
	cursor: default;
	transition: opacity .6s ease-in-out .5s;
}
#menubutton:before {
	position: absolute;
	top: -15px;
	right: -15px;
	bottom: -15px;
	left: -15px;
	content: "";
}
#menubutton.hide {
	visibility: visible;
	opacity: 0;
	transition: opacity 3.7s ease-in-out 3.2s;
}
#menubutton.gone {
	visibility: hidden;
	opacity: 0;
	cursor: default;
}
#navwrap {
	position: fixed;
	top: 0;
	right: -10em;	/* offscreen moveable panel */
	flex: none;
	width: 10em;
	height: 100%;
	background: #000;
	opacity: 0;
	transition: right .5s  ease-in-out, opacity .4s  ease-in .2s;
}
#navwrap.open {
	right: 0;
	z-index: 399;
	visibility: visible;
	opacity: 1;
}
.navtext {
	text-transform: uppercase;
	font-size: .875em;
	-webkit-text-stroke: 0.4px;
	font-family: raleway-idm, "century gothic", corbel, candara, tahoma, sans-serif;
}
#navwrap .navtext {
	z-index: 1;         /* link labels, not menu button */
	opacity: 0;
	transition: opacity .5s .3s ease-in-out;
}
#navwrap.open .navtext {
	z-index: 400;
	opacity: 1;
}
span[data-icon]:before {    /* space between label and icon within menu*/
	content: "\a0";
}
span[data-icon]:after {     /* icon code and spaces between icon and right margin */
	display: inline-block;
	content: attr(data-icon)"\a0\2006";
	text-transform: none;
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	font-size-adjust: .5;
	font-size: 1.125em;
	font-family: idm-smallset;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	speak: none;
}
nav {
	position: relative;        /* sits atop animated panel */
	top: 0;
	right: 0;
	padding: 0;
}
nav ul {
	position: relative;
	top: 0;
	right: 3%;               /* = page margin */
	float: right;
	margin: 9em 1.5em 0 0;
	padding: 0;
	list-style-type: none;
	text-align: right;
}
nav li {
	position: relative;
	display: list-item;
	padding: 1.5em 0 1em;
	min-width: 7.75em;    /*wider would allow audio-video on one line*/
	width: 100%;
}
nav a,
nav a:visited {
	display: list-item;
	color: #00e9ff;
	vertical-align: middle;
	cursor: default;
	transition: visibility .4s .1s ease-in;
}
#navwrap.open nav a:hover,
#navwrap.open nav a:active {
	outline: none;
	border: none;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}
#navwrap nav a[href="#"],
#navwrap.open nav a[href="#"],
#navwrap.open nav a[href="#"]:visited,
#navwrap.open nav a[href="#"]:hover {
	color: #666;
	cursor: default;
}
.headline-block {			/* now within main, not header .*/
	color: #fff;
	font-family: sorts-mill-goudy-idm, "minion pro","palatino linotype", "book antiqua", palatino, serif;
}
.headline-block h1 {
	margin: 0 0 .375em;
	letter-spacing: 2px;
	font-size: 2.5em;
	line-height: 1.125;
}
.headline-block h2 {
	margin: 0;
	margin-left: .25em;   		/*lines up subhead with headline  */
	letter-spacing: 1px;
	font-size: 1.25em;
}
main {
	overflow-x: hidden;
	width: 100%;
}
.ie main {
	overflow: auto;
}
#mainimg img {
	width: 100%;
	height: auto;
}
blockquote {
	quotes: "“" "”" "‘" "’";
}
blockquote .quote:before {
	content: open-quote;
	font-size: 115%;
}
blockquote .quote:after {
	content: "\200a"close-quote;
	font-size: 115%;
}
blockquote {
	position: relative;
	margin: 0 auto;
}
blockquote .quote {
	color: #0ff;
	letter-spacing: 1px;
	font-size: 85%;
	font-family: kavivanar-idm,tillana,GraphiteStd-Light,BradleyHandITCTTBold,serif;
	line-height: 1.625;
}
.ie blockquote .quote {
	font-family: kavivanar-idm,tillana,"bradley hand", courier, "courier new", serif;
}
blockquote cite,
#contact .msgback cite {
	display: inline-block;
	float: right;
	margin-top: 1.375em;
	padding: .063em 3em 0 0;
	color: #888;
	text-align: right;
	letter-spacing: 0;
	font-style: italic;
	font-size: 87.5%;
	font-family: raleway-idm, "century gothic", corbel, candara, tahoma, sans-serif;
}
blockquote cite:before {
	content: "\203a\200a\203a\200a\203a\2009\a0";    /* > > >*/
	font-style: normal;
}

/* index

Flex: Header, main, footer are all in a single flex row. Header and footer have flex: 100% so they wrap.
Main contains the figure and a section: a row.  Figure has align-self: flex-end to keep it against the footer. Width is in vw for resizing.
Section is a vertical stack of headline, ul, and testimonial.
--------------------------------------------------*/
#home main {		 /* flex: full-width row containing figure(#mainimg) and section, which is a stack of text blocks*/
	display: flex;
	flex: auto;
	flex-flow: row nowrap;
	justify-content: center;
}
#home #mainimg {
	flex: 1 1 0;
	align-self: flex-end;
	margin: 0;
}
.ie #home #mainimg {
	position: relative;
	bottom: -1.5em;
	float: left;
	clear: none;
	margin: 0 0 0 2em;
	width: 40%;
	height: auto;
}
#home section {
	display: flex;
	flex: 1 1 0;
	flex-flow: column;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 3.5em 0 18vh -6vw;		/* justify is space-around; 18vh shortens block, so moves ul up */
}
.ie #home section {
	position: relative;
	display: block;
	float: left;
	margin: 3.5em 0 18vh;
	width: 52%;
}
#home .headline-block {
	flex: auto;
	margin: 0;
	transform: translateX(-10vw);
}
.ie #home .headline-block {
	margin: 0;
}
#home main ul {
	flex: auto;
	margin: 0;
	padding: 0;
	max-width: calc(50vw - 6em);
	width: 90%;
	transform: translateX(-9.5vw);
}
#home main li {
	padding-bottom: .75em;
}
#home main li:last-child {
	padding-bottom: 0;
}
#home blockquote {
	flex: auto;
	max-width: calc(50vw - 8em);
	width: 100%;
	font-size-adjust: .53;
	transform: translateX(-10vw);
}
.ie #home blockquote {
	margin-top: 3em;
	max-width: 70%;
	transform: translateX(-6vw);
}
#home blockquote .quote:after {
	display: inline;
	content: "\2026"close-quote;     /*ellipsis before endquote*/
}

/* about
--------------------------------------------------*/
#about main {		 /* flex: full-width row containing figure and section. Section is a stack of text blocks*/
	display: flex;
	flex: 1;
	flex-flow: row nowrap;
	justify-content: flex-start;
}
.ie #about main {
	overflow: visible;		/* prevent scrollbar */
}
#about #mainimg {
	flex: 11 1 0;
	align-self: flex-end;
	margin: 0;
	width: 50%;
}
.ie #about #mainimg {
	position: relative;
	bottom: -5.5em;		/* why? who knows: ie*/
	float: left;
	clear: none;
	width: 40%;
	height: auto;
}
#about section {
	display: flex;
	flex: 14 1 0;
	flex-flow: column;
	justify-content: space-around;
	align-items: flex-start;
	margin: 2em 0 0 2em;
}
.ie #about section {
	position: relative;
	display: block;
	float: left;
	margin: 0 0 0 2em;
	width: 52%;
}
#about .headline-block {
	flex: initial;		/* flex for section contents adjusts vertical position*/
	margin: 1em 0 .5em;
	transform: translateX(-50%);
}
#about #bioblock {			/*When announcement is showing*/
	flex: auto;
	padding-bottom: 2em;		/* ensure this stays above footer when annoucement is showing */
	font-size: 90%;
	line-height: 1.625;
	transform: translateX(-20%);
}
.ie #about #bioblock {
	width: 120%;
}
#about .noshow + #bioblock {	/* when announcement is not showing */
	padding-bottom: 0;
	font-size: 100%;
	line-height: 1.75em;
}
.ie #about .noshow + #bioblock {
	margin-top: 4em;
}
#about #bioblock > p:nth-of-type(2) {
	width: 88%;
	transform: translateX(10%);
}
#about #bioblock > p:nth-of-type(3) {
	width: 82%;
	transform: translateX(21%);
}
#about #bioblock p {
	padding-bottom: .25em;
}
#about #announcement {
	margin: .5em 0;
	padding: .5em 1.5em;
	max-width: none;
	border: 8px solid hsl(225, 96%, 54%);
	background: #d5ebf3;
	box-shadow: 4px 2px 6px hsla(0, 0%, 0%, 0.90);
	color: #0a0650;
	transform: translateX(calc(-50% + 1.75em));    /* directly under headline*/
}
.ie #about #announcement {
	margin: .5em 0 .5em -12em;
	padding: .5em 1.5em;
	max-width: 70%;
	transform: none;
}
#about #announcement h3 {
	margin: 0;
	text-shadow: 1px 1px 5px hsla(0, 0%, 0%, 0.5);
	font-family: sorts-mill-goudy-idm, "minion pro","palatino linotype", "book antiqua", palatino, serif;
}
#about #announcement p {
	margin: 0;
	text-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.45);
	font-size: .938em;
	line-height: 1.375;
}

/* Listen
--------------------------------------------------*/
#listen main {    	 /* flex: full-width row containing figure and section.*/
	display: flex;
	flex: 1;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}
#listen section {		/*section is stack of text: headline and clips list (which includes cite) */
	display: flex;
	flex: 6 1 0;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: center;	/* affects headline; clips are self-aligned */
	padding-top: 2em;
}
.ie #listen section {	/*section is stack of text: headline and clips list (which includes cite) */
	position: relative;
	float: left;
	width: 65%;
}
#listen .headline-block {
	flex: auto;
	align-self: flex-start;
	margin-left: 4em;
}
#listen #mainimg {
	flex: 5 1 0;
	align-self: flex-end;
	margin: 0;
	max-width: 600px;
	width: 26vw;
	height: auto;
}
.ie #listen #mainimg {
	position: absolute;
	right: 0;
	bottom: 4.5em;
	width: 33%;
}
#listen section cite {
	display: block;
	flex: auto;
	margin: -3.5em 1em .25em .5em;
	max-width: calc(85% - 1.5em);
	color: #aaa;
	font-style: normal;
	font-size: calc(10px + .375vw);
	font-family: quattrocento-idm,raleway-idm, "century gothic", corbel, candara, tahoma, sans-serif;
	line-height: 1.625;
	transition: opacity .5s;
}
#listen section cite p {
	margin: 0;
}
#listen section .clips {
	flex: auto;
	align-self: flex-start;
	margin: 1.5em 0 0 6vw;
	width: 100%;
	list-style: none;
}
.ie #listen section .clips {
	margin: 3.5em 0 0 6vw;
}
#listen section li {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	padding-bottom: 2em;
	width: 100%;
	font-size: 90%;
	transition: opacity .4s ;
}
.ie #listen section li {
	padding-bottom: 2em;
}
#listen [id^="item"] .timer {
	position: relative;	/* .timer for any item.  Without #item's clicked class .timer looks like play button */
	flex: none;
	overflow: hidden;
	padding: 8px;
	width: 16px;
	height: 16px;
	border-radius: 24px;
	background-color: #999;
	box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
	cursor: pointer;
	transition: .8s;
}
.ie #listen [id^="item"] .timer {
	float: left;
}
#listen [id^="item"] .timer:after {
	position: absolute;
	top: 2px;
	right: 0;
	bottom: 0;
	left: 0;
	color: #fff;
	content: "\a0"attr(data-button);
	text-align: center;
	text-transform: none;
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	font-size-adjust: .5;
	font-family: idm-smallset;
	line-height: 32px;
	opacity: 1;
	transition: opacity .1s .9s;

	speak: none;
}
#listen [id^="item"] .timer:hover:after {
	color: #f00;
}
#listen [id^="item"] .timer:active:after {
	color: #fff;
	cursor: default;
}
#listen .playtitle {
	flex: auto;
	align-self: flex-end;	/* moves text down toward center of player arrow */
	margin-left: 1em;
}
.ie #listen .playtitle {
	transform: translateY(.5em);
}
#listen [id^="item"].clicked .playtitle {
	display: none;
}
#listen .playtiming {
	flex: auto;
	max-width: 3em;
	word-break: keep-all;
}
#listen [id^="item"].clicked .timer {		/* length of progress bar when playing */
	width: 85%;
}
#listen [id^="item"].clicked .timer:after {
	opacity: 0;
	transition: none;		/* keep play button from reappearing too soon; content: "" doesn't work*/
}
#listen [id^="item"].clicked .meter {
	position: relative;
	display: block;
	overflow: hidden;
	height: 100%;
	border-top-left-radius: 20px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 20px;
	background-color: #f00;
	background-image: linear-gradien(to top, hsl(206, 100%, 1%) 37%, hsla(206, 91%, 9%, 0.75) 69%);
	box-shadow: inset 0 2px 9px  rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
	transition: width .8s linear;	/* otherwise stops each second */
}
#listen [id^="item"] [id^="stopplaying"] {		/* any stop button */
	position: relative;
	visibility: hidden;				/* visibility turned on with js */
	display: none;
	margin: .125em 0 0 .75em;
	font-size: 110%;
	font-family: idm-smallset;
}
#listen [id^="item"].clicked [id^="stopplaying"] {
	z-index: 100;
	display: inline;
	color: #f00;
	cursor: pointer;
	transition: 0s;
	animation: .6s whiten 3 steps(1) 4s;		/* 4 second delay before animation starts */
}
#listen [id^="item"].clicked [id^="stopplaying"]:hover {
	color: #fff;
}
#listen [id^="item"].clicked [id^="stopplaying"]:active {
	color: #f00;
}
#listen [id^="item"].clicked [id^="stopplaying"]:before {
	position: absolute;
	top: -1.375em;
	right: 1px;
	bottom: auto;
	left: -12px;
	color: #aaa;
	content: attr(data-timeleft);
	text-align: right;
	font-style: normal;
	font-size: calc(9px + .375vw);
	font-family: quattrocento-idm, avenir-roman, "Maiandra GD", avenir-book, fontin, "trebuchet ms", Corbel, sans-serif;
	line-height: 1.625;
}
@keyframes whiten {
	50% { color: #fff;
	}
}
#listen #duration {
	position: relative;
	display: inline;
	padding-left: .5em;
}

/* Lessons
--------------------------------------------------*/
#lessons main {
	/*display: flex;*/   /* at one point, adding this made photos disappear in Chrome; seems fixed now */
	flex: initial;
	flex-flow: column;
	overflow: hidden;
	margin: 0 auto;
	max-width: 1200px;
	width: 100%;
}
#lessons .headline-block {
	flex: initial;
	margin: 2.5em 0 0 5em;
}
#lessons .subhead-bloom {    /* "click each photo for details" */
	color: #fff;
	vertical-align: -2px;
	font-size: .875em;
	opacity: 0;
	transition: opacity 1.3s ease-in-out .8s, color 1.5s ease-out 1.6s;
}
#lessons .subhead-bloom:before {
	content: "\a0\a0";
}
#lessons .subhead-bloom.open {
	color: #0ff;
	opacity: 1;
}
#lessons section {		/* holds texttarget and photospread */
	position: relative;
	flex: initial;
	margin: 2em auto auto;
}
#lessons #texttarget {
	position: absolute;
	top: 0;
	left: 30%;
	overflow: visible;		/*make sure closer is visible to right of text block*/
	width: 55%;
	height: auto;
	opacity: 0;
	transition: opacity .8s .9s ease-in;
}
#lessons #texttarget.show {
	z-index: 10;
	opacity: 1;
}
#lessons #photospread {
	position: relative;
	left: 2vw;
	margin: 1em auto 2em;
	min-height: 400px;
	transition: all 1.5s .2s ease-in-out;
	transform: scale(.88,.88);
}
#lessons #photospread.big {
	min-height: 460px;
	transform: scale(1,1);
}
#lessons #photospread figure {        /* each <figure> holds an <img> and <figcaption> */
	position: absolute;
	top: 0;
	z-index: 5;
	display: flex;
	flex-flow: column;
	align-items: center;
	margin: 0;
	max-width: 260px;
	max-height: 430px;
	width: 23%;			/* change width, maxwidth for chrome*/
	cursor: pointer;
	transition: all 1.5s .2s ease-in-out;
}
#lessons #photospread figcaption {
	flex: initial;
	margin: .75em 0 0;
	width: 96%;
	color: #eee;
	text-align: center;
}
#lessons #photospread img {
	width: 92%;
	height: auto;
	border: 1px solid #777;
	box-shadow: 3px 3px 10px rgba(0, 32, 13, 0.862);
	transition: .15s ease-in;
}
#lessons #photospread figure:hover img {
	border-color: #bbb;
}
#lessons figure:nth-child(1) {
	left: 2%;
	left: 2vw;
}
#lessons figure:nth-child(2) {
	left: 25%;
	left: calc(23% + 2vw);
}
#lessons figure:nth-child(3) {
	left: 48%;
	left: calc(46% + 2vw);
}
#lessons figure:nth-child(4) {
	left: 71%;
	left: calc(69% + 2vw);
}
#lessons figure.leftmar {
	left: 4%;
	left: 3vw;
}
#lessons figure.leftmar figcaption {
	margin: 1.5em 0 0;
	color: transparent;
}
#lessons #texttarget blockquote {
	padding-bottom: 2em;
}
#lessons #texttarget .show a,
#lessons #texttarget .show a:visited {
	color: hsl(180, 70%, 80%);
}
#lessons #texttarget .show a:hover {
	color: #0ff;
}
#lessons #texttarget .show a:active {
	color: hsl(180, 70%, 80%);
}
#lessons #text0,
#lessons #text1,
#lessons #text2,
#lessons #text3 {
	display: none;
	opacity: 0;
	transition: opacity .6s ease-in-out .4s;	/* faster transition for closing*/
}
#lessons #text0.transparent,
#lessons #text1.transparent,
#lessons #text2.transparent,
#lessons #text3.transparent {
	display: block;
	opacity: 0;
}
#lessons #text0.show,
#lessons #text1.show,
#lessons #text2.show,
#lessons #text3.show {
	display: block;
	opacity: 1;
	transition: opacity 1s ease-out .8s ;	/* transition for opening*/
}
@keyframes blink {
	50% { visibility: hidden;
	}
}
#lessons .closex {
	position: absolute;
	top: 0;
	left: 110%;
	z-index: 0;
	color: #98eded;
	text-transform: lowercase;
	font-variant: small-caps;
	font-size: 1.125em;
	font-family: raleway-idm, "century gothic", corbel, candara, tahoma, sans-serif;
	animation: .5s blink 3 steps(1) 3.5s;
}
#lessons span[data-icon]:after {
	display: inherit;
	font-size: .75em;
}
#lessons .closex.hoverstate {	/* use js so hover, active won't bleed across to #lessons #texttarget .show a */
	color: #0ff;
	cursor: pointer;
}
#lessons .closex.activestate {
	opacity: 0;
	cursor: default;
}
#lessons blockquote {
	margin-top: 2em;
}

/* Contact
--------------------------------------------------*/
#contact main {
	display: flex;
	flex: initial;
	flex-flow: column;
	overflow: hidden;
}
#contact .headline-block {
	flex: initial;
	margin: 2.5em 0 0 5em;
}
#contact main section {
	display: flex;		/* contains .leftcol and .formwrap */
	flex: initial;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	margin: 0 2.5em 0 0;
}
.ie #contact main section {
	margin-left: 2.5em;
}
#contact .leftcol {
	display: flex;
	flex: initial;
	flex-flow: column;
	justify-content: space-between;
	align-items: flex-start;
	margin: 1em 4em 0 0;
	max-width: 31em;
	width: calc(40% - 3.5em);
}
.ie #contact .leftcol {
	position: relative;
	float: left;
	margin: 3em 5em 0;
}
#contact .textpane {
	display: flex;
	flex: initial;
	flex-flow: column;
	justify-content: space-around;
	align-items: flex-start;
	margin-bottom: 2em;
	padding: 0 1.75em 1em;
	width: 100%;
	background: hsl(63, 61%, 95%);
	box-shadow: 3px 2px 12px hsla(270, 7%, 0%, 0.87);
	color: hsl(353, 95%, 13%);
	font-size: 90%;
}
#contact .textpane p {
	margin-top: 0;
}
#contact blockquote {
	flex: initial;
	margin-left: 2em;
}
.ie #contact blockquote {
	flex: initial;
	margin: 2em 1em;
	width: 100%;
}
#contact .formwrap {
	flex: initial;
	align-self: flex-start;
	width: calc(40% - 2.5em);
}
#contact .formwrap {
	position: relative;
	float: left;
}
#contact form,
#contact .msgback {	/* backing for error & success messages */
	margin: 0  auto 3em 2.5em;
	padding: 1em 2em 3em;
	max-width: 28em;
	width: 98%;
	height: fit-content;
	background: hsl(359, 100%, 11%) url("../images/red-wood-final.jpg") repeat;
	box-shadow: 3px 2px 12px hsla(270, 7%, 0%, 0.87);
	color: hsl(75, 38%, 92%);
	font-size: 80%;
}
#contact .g-recaptcha {
	position: relative;
	top: 1em;
	bottom: 2em;
	left: auto;
	float: right;
	transform: scale(.9);
}
#contact input[type="submit"],
#contact input[type="submit"]:visited {
	position: relative;
	display: block;
	float: right;
	clear: both;
	margin-right: 1em;
	border: 1px solid hsl(0,0%,10%);
	border-radius: 5px;
	background: red linear-gradient(hsla(0, 18%, 80%, 0.15), red 50%);
	color: hsl(0, 0%, 100%);
	transform: scale(.9);
}
.ie #contact input[type="submit"],
.ie #contact input[type="submit"]:visited {
	background: red;
}
#contact input[type="submit"]:hover,
#contact input[type="submit"]:active {
	border: 1px solid currentColor;
	background: cyan linear-gradient(hsl(0, 18%, 90%), cyan 50%);
	color: hsl(240, 100%, 27%);
}
.ie #contact input[type="submit"]:hover,
.ie #contact input[type="submit"]:active {
	background: cyan;
}
#contact input[type="submit"]:active {
	transform: scale(.85);
}
#contact .msgback {
	display: flex;
	flex-flow: column;
	align-self: flex-start;
	background-color: hsl(359, 100%, 11%) ;
	background-image: url("../images/bocalC260x115.png"), url("../images/red-wood-final.jpg");
	background-position: 25% 70%, top left;
	background-size: 35%, cover;
	background-repeat: no-repeat, repeat;
}
#contact .msgback p {
	flex: initial;
	padding: 1em 0;
	font-size: 125%;
}
#contact .msgback p.txcenter {
	transform: translateY(1.75em);
}
#contact .msgback a,
#contact .msgback a:visited {
	color: hsl(180, 70%, 80%);
	text-transform: uppercase;
	font-size: 62%;		/* < click here > */
	font-family: raleway-idm, "Century Gothic", Geneva, Corbel, Calibri, sans-serif;
}
#contact .msgback a:hover {
	color: #0ff;
}
#contact .textpane cite {
	flex: initial;
	align-self: flex-end;
	float: right;
	clear: both;
}
#contact .textpane cite:before {
	content: "\2014\a0";
}
#contact .msgback p cite {
	color: #fff;
}
#contact .msgback p cite:before {
	content: "\2014\a0";
	font-style: normal;
}

/* error pages
--------------------------------------------------*/
#error .headline-block {
	flex: initial;
	margin: 2.5em 0 0 5em;
	font-size: 90%;
}
#error .text {
	position: relative;
	margin: 0 auto;
	padding-top: 6em;
	width: 36em;
	color: #fff;
	font-size: 90%;
}
#error .text a,
#error .text a:visited {
	color: #a8f9d1;
}
#error .text a:hover {
	color: #00c7cf;
}
#error .text a:active {
	color: red;
}

/* footer stuff
--------------------------------------------------*/
footer {
	z-index: 25;
	display: flex;
	flex: initial;
	flex-flow: row wrap;
	justify-content: flex-end;	/* when no footnote, iDM block still on right */
	align-items: space-between;
	margin: 0 3%;			/* sets footer width */
	padding: 0 2%;
	height: fit-content;
	background: #2f2f2f;
}
.ie footer {
	position: absolute;
	bottom: -4.5em;
	left: 0;
	margin: 0 3%;     /* old stifcky footer: bottom div touching footer should have padding-bottom: 4.5em */
	width: 90%;
	height: 4.5em;
}
#footermenu {
	display: flex;
	flex: none;
	flex-flow: row nowrap;
	justify-content: space-around;
	order: 1;
	width: 100%;
	text-transform: lowercase;
	font-variant: small-caps;       /* menu is sring of <span>s wrapped in <p> tags */
}
.ie #footermenu {
	margin: 0 auto;
	width: calc(100% - 60em);
}
/* all visited, hover, active codes at bottom */
#footermenu span {
	flex: initial;
	margin: 0;
	padding: 0 3em;
	text-align: center;
}
.footnote {
	flex: auto;
	order: 2;
	line-height: 1.313;
}
.footnote:last-of-type {
	margin-bottom: 1.5em;
}
.ie .footnote,
.ie .footnote p {
	line-height: .625;
}
#iDM-block {
	flex: 0 1 13em;
	order: 3;
	text-align: right;
	line-height: 1.5;
}
.ie #iDM-block {
	position: relative;
	float: right;
	clear: right;
}
.valid {
	z-index: 10;
	display: none;
	flex: 100%;
	order: 4;
	text-align: right;
}
.valid p {
	font-variant: small-caps;
	font-size-adjust: .5;
	line-height: .75em;
}
footer a,
footer a:visited {
	color: #757a9c;
}
footer a:hover {
	color: #2ceada;
}
footer a:active {
	color: #f5634a;
}
#footermenu a[href="#"],
#footermenu a[href="#"]:visited,
#footermenu a[href="#"]:hover {
	color: #606060;
	cursor: default;
}

/* Utility classes:  fonts, tops, spacing, noshow
--------------------------------------------------*/
.letterspread-thin {
	letter-spacing: 1px;
}
.diffident {
	color: #888;
	font-size: 0.688rem;
	font-family: raleway-idm, "Century Gothic", Geneva, Corbel, Calibri, sans-serif;
	line-height: 1.25;
	cursor: default;
}
.credit {
	color: #888;
	font-size: 0.688rem;
	font-family: raleway-idm, "Century Gothic", Geneva, Corbel, Calibri, sans-serif;
	line-height: 1.313;
}
.noshow,
.hide {           /* see .kill in ipad styles below */
	display: none;
}
.hidethis {
	opacity: 0;
}
.clearfix:before,
.clearfix:after {
	display: table;
	content: "";
}
.clearfix:after {
	clear: both;
}
.txcenter {
	margin: 0 auto;
	text-align: center;
}
.sc {
	font-weight: normal;
	font-variant: small-caps;
}
.tp125 {
	top: 1.25em;
	top: 0;
}
::-moz-selection {
	background: #b3d4fc;    /*light blue*/
	text-shadow: none;
}
::selection {
	background: #b3d4fc;
	text-shadow: none;
}
ul {
	list-style-type: square;
}
hr {
	display: block;
	margin: 1em 0;
	padding: 0;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
}
img {
	vertical-align: middle;
}
fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}
textarea {
	resize: vertical;
}

/* Large screens
--------------------------------------------------*/
@media screen and (min-width: 85em) {
	body {
		font-size: 1.188em;
	}
	#home #mainimg {
		flex: none;
		transform: scale(1.1);
	}
	#home section {
		display: flex;
		flex: 1;
		flex-flow: column;
		justify-content: space-around;
		justify-content: flex-start;
		align-items: flex-start;
		margin: 3.5em 0 18vh -6vw;		/* justify is space-around; 18vh shortens block, so moves ul up */
		font-size: 100%;
	}
	#home .headline-block {
		transform: translateX(-4.5vw);
	}
	#home main ul {
		transform: translateX(-3.5vw);
	}
	#home blockquote {
		max-width: 46%;
		transform: translateX(-9vw);
	}
}

/* Laptops
-------------------------------------------------------------------------------------*/
@media screen and (min-aspect-ratio: 160/96) and (max-height: 739px) {		/* 16x10 fails, 16x9 passes */
	.headline-block h1 {
		margin: 0 0 .125em;
		letter-spacing: 2px;
		font-size: 2.25em;
		line-height: 1.125;
	}
	.headline-block h2 {
		margin: 0;
		margin-left: .25em;   		/*lines up subhead with headline  */
		letter-spacing: 1px;
		font-size: 1.188em;
	}
	#home #mainimg {
		flex: 7 1 0;
	}
	#home section {
		flex: 10 1 0;
		margin: 3.5em 0 6vh 6vh;	/* justify is space-around; 18vh shortens block, so moves ul up */
	}
	/* About: laptops */
	#about #mainimg {
		flex: 5 1 0;
	}
	#about section {
		flex: 9 1 0;
	}
	#about #bioblock {		/*When announcement is showing*/
		font-size: 88%;
		line-height: 1.625;
	}
	#about .noshow + #bioblock {	/* when announcement is not showing */
		font-size: 92%;
	}
	#about #bioblock > p:nth-of-type(3) {
		width: 84%;
		transform: translateX(22%);
	}
	#about #announcement {
		font-size: 86%;
	}
	/* Listen: laptops */
	#listen section {		/*section is stack of text: headline and clips list (which includes cite) */
		flex: 7 1 0;
	}
	#listen #mainimg {
		flex: 4 1 0;
	}
	#listen section li {
		padding-bottom: 1em;
	}
	#listen [id^="item"].clicked .timer {		/* length of progress bar when playing */
		width: 80%;
	}
	/* Lessons: laptops */
	#lessons #photospread figure {        /* each <figure> holds an <img> and <figcaption> */
		position: absolute;
		top: 0;
		z-index: 5;
		display: flex;
		flex-flow: column;
		align-items: center;
		margin: 0;
		max-width: 260px;
		max-height: 430px;
		width: 18%;			/*change width, maxwidth for chrome*/
		cursor: pointer;
		transition: all 1.5s .2s ease-in-out;
	}
	#lessons figure:nth-child(1) {
		left: 7%;
		left: 7vw;
	}
	#lessons figure:nth-child(2) {
		left: 27%;
		left: calc(23% + 4vw);
	}
	#lessons figure:nth-child(3) {
		left: 47%;
		left: calc(46% + 1vw);
	}
	#lessons figure:nth-child(4) {
		left: 67%;
		left: calc(69% - 2vw);
	}
	#lessons figure.leftmar {
		left: 5%;
		left: 5vw;
	}
	#lessons #texttarget {
		line-height: 1.375;
	}
	#lessons .closex {
		position: absolute;
		top: 0;
		left: 105%;
	}
	/* Contact: laptops */
	#contact .leftcol {
		margin: 1em 4em 0 0;
	}
	#contact .textpane {
		margin-bottom: 1em;
		padding: 0 1.25em .5em;
		font-size: 85%;
		line-height: 1.25;
	}
	#contact form,
	#contact .msgback {	/* backing for error & success messages */
		margin: -3em auto 2em 2.5em;
		padding: 1em 2em 2em;
	}
	#contact .msgback {
		background-position: 42% 80%, top left;
		background-size: 33%, cover;
	}
	#contact .msgback p {
		font-size: 125%;
	}
	#contact blockquote cite {
		margin-top: .5em;
	}
}

/* Portrait
------------------------------------------------*/
/* Home page:  main (row) changed from justify:flex-start to justify:center. Main and section each given flex:1 to set equal widths. Figure scaled larger and moved 3vw toward center with transform--but it still flexes in size.  Elements of section (headline, ul, blockquote) are moved individually with translateX.
---------------------------------------------------------------------------------------*/
@media screen and (max-aspect-ratio: 99999/100000) {
	.page {
		z-index: 3;
		margin: 0;
		width: 100%;
	}
	footer {
		z-index: 25;
		margin: 0;
	}
	/* home: portrait*/
	#home main {
		justify-content: center;
	}
	#home #mainimg {
		flex: 1;
		margin: 0;
		transform: scale(1.35) translateX(3vw);
		transform-origin: bottom;
	}
	#home section {
		flex: 1;
		justify-content: flex-start;
		margin: 3.5em 0 14vh;		/* 14vh shortens block, so moves ul up*/
		font-size: 110%;
	}
	#home .headline-block {
		margin: 0;
		width: 150%;		/* since moved so far to left, allow greater width */
		transform: translateX(calc(-50vw + 3em));	/* 50vw to left edge, 3em to create left margin */
	}
	#home main ul {
		margin: 0;
		padding: 0;
		max-width: calc(50vw - 3em);
		width: 90%;
		transform: translateX(-7vw);
	}
	#home main li {
		padding-bottom: .75em;
	}
	#home main li:last-child {
		padding-bottom: 0;
	}
	#home blockquote {
		max-width: calc(50vw - 3em);
		width: 90%;
		transform: translate(-8vw, -2vh);
	}
	/*about: portrait*/
	#about main {
		align-self: flex-start;	/* flex: full-width row containing figure and section. Section is a stack of text blocks*/
		height: inherit;
	}
	#about #mainimg {
		flex: none;
		margin: 0;
		width: 60%;		/*vw is viewport, % is of page - margins */
		transform: translateX( -4em);
		transform-origin: bottom;
	}
	#about section {
		flex: none;
		justify-content: flex-start;
		margin-top: 3.5em;
		margin-left: -64%;
		width: 80%;
		transform: translateX(0);
	}
	#about .headline-block {
		flex: none;
		margin: 0 0 .5em;
		width: 150%;
		transform: translateX(9vw);
	}
	#about #bioblock {
		flex: auto;
		padding-bottom: 0;
		width: 100%;
		hyphens: auto;
		font-size: 105%;
		transform: scale(1.05);
		transform-origin: top;
	}
	#about .noshow + #bioblock {
		padding-bottom: 0;
		font-size: 115%;
		line-height: 1.75em;
		transform: translate(0) scale(1);
	}
	#about #bioblock > p {
		padding-bottom: .25em;
	}
	#about .noshow + #bioblock p {
		padding-bottom: .5em;
	}
	#about #bioblock > p:nth-of-type(1) {
		margin-left: 33vw;
		width: 70%;
	}
	#about .noshow + #bioblock > p:nth-of-type(1) {
		margin-left: 9vw;
		width: 100%;
	}
	#about #bioblock > p:nth-of-type(2) {
		margin-left: 33vw;
		width: 70%;
	}
	#about .noshow + #bioblock > p:nth-of-type(2) {
		margin-left: 28vw;
		width: 70%;
	}
	#about #bioblock > p:nth-of-type(3) {
		margin-left: 56vw;
		width: 47%;
		transform: translateX(0);
	}
	#about .noshow + #bioblock > p:nth-of-type(3) {
		margin-left: 55vw;
		width: 52%;
	}
	#about #bioblock p {
		padding-bottom: .25em;
	}
	#about #announcement {
		max-width: none;
		transform: translateX(9vw);
	}
	/* listen: portrait */
	#listen #mainimg {
		flex: none;
		margin: 0 0 0 -28%;
		max-width: none;
		width: 60%;
	}
	#listen section {
		flex: none;
		justify-content: flex-start;
		margin-top: 3.5em;
		padding-top: 0;
		width: 80%;
	}
	#listen .headline-block {
		flex: none;
		align-self: flex-start;
		margin: 0 0 .5em 3.5em;
	}
	#listen section cite {		/* cite is info while tune is playing: section li is composer and title*/
		font-size: 95%;
	}
	#listen section .clips {		/* <ul class="clips"> */
		margin: 2.5em 0 0;
	}
	#listen section li {
		font-size: 99%;
	}
	#listen [id^="item"].clicked .timer {
		width: 65%;
	}
	#listen [id^="item"] [id^="stopplaying"] {
		margin: -.063em 0 0 .75em;       /* any stop button */
		font-size: 170%;
	}
	#listen [id^="item"].clicked [id^="stopplaying"] {
		animation: .7s whiten 3 steps(1) 5s;
	}
	/* lessons: portrait */
	#lessons .headline-block {
		flex: none;
		margin: 3.5em 0 0 3.5em;
	}
	#lessons #texttarget p:not(.quote) {
		font-size: 110%;
	}
	#lessons .closex {
		left: 105%;
		font-size: 1.25em;
	}
	/* contact: portrait*/
	#contact main {
		margin-top: 3.5em;
	}
	#contact .headline-block {
		flex: none;
		margin: 2px 0 .75em 3.5em;
	}
	#contact main section {		/* contains .leftcol and .formwrap */
		flex-flow: column;
		justify-content: flex-start;
		margin: 0 2.5em;
		padding-top: 0;
	}
	#contact .leftcol {			/* full width above form in portrait */
		justify-content: flex-start;
		align-items: center;
		margin: .5em 4em;
		max-width: none;
		width: 100%;
	}
	#contact .textpane {
		margin-bottom: 1em;
		padding: .25em 1.75em 0;
		width: 66%;
		font-size: 105%;
	}
	#contact .textpane p {
		line-height: 1.375;
	}
	#contact blockquote {
		margin: 0 auto;
		width: 76%;
	}
	#contact .formwrap {
		flex: none;
		align-self: center;
		margin: 1em auto 2em;
		width: 100%;
	}
	#contact form,
	#contact .msgback {	/* backing for error & success messages */
		margin: auto;
		padding: .75em 2em;
		max-width: none;
		width: 64%;
		font-size: 110%;
		-webkit-text-stroke: 0.4px;
	}
	#contact .g-recaptcha {
		top: 0;
		bottom: 0;
		margin: 0;
	}
	#contact input[type="submit"],
	#contact input[type="submit"]:visited {
		margin: 0 1em 0 0;
	}
	#contact .msgback {
		min-height: 10em;
	}
}