/* CSS by James L. Mac Donald, Montreal QC (URL: jameslmacdonald.com) */
/* normalize */
body { line-height: 1; }

html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,a,em,img,strong,sub,sup,b,u,i,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,footer,header,audio,video
{
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}

footer,header,section { display: block; }

audio,canvas,video
{
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

audio:not([controls])
{
	display: none;
	height: 0;
}

[hidden] { display: none; }

html
{
	font-size: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

html,button,input,select,textarea { font-family: sans-serif; }
b,strong { font-weight: bold; }
i,em { font-style: italic; }

hr
{
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}

q { quotes: none; }
q:before,q:after { content: none; }

sub,sup
{
	font-size: 70%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup { top: -0.5em; }
sub { bottom: -0.25em; }
ol,ul { padding: 0 0 0 40px; }

nav ul,nav ol
{
	list-style: none;
	list-style-image: none;
}

img
{
	border: 0;
	-ms-interpolation-mode: bicubic;
}

svg:not(:root) { overflow: hidden; }

table
{
	border-collapse: collapse;
	border-spacing: 0;
}

html { background-color: #DBCDFF; }
body { font-family: "Open Sans",Verdana,sans-serif; }
section { clear: both; }

.wrap
{
	width: 96%;
	margin: auto;
}

h1,h2 { font-weight: 700; }

h1,h2,h3
{
	text-align: center;
	line-height: 1.2em;
}

h1
{
	font-size: 1.7em;
	margin: 0.5em 0;
}

h2
{
	font-size: 1.7em;
	text-align: center;
}

h3
{
	font-size: 1.5em;
	font-weight: 300;
	text-align: center;
}

h4
{
	margin-bottom: 0.5em;
	font-size: 1.1em;
	font-weight: 700;
	text-align: left;
}

h5
{
	margin-bottom: 0em;
	font-size: .9em;
	font-weight: 700;
	text-align: left;
}

audio
{
	width: 80%;
	margin: 1em 10% 0;
}

.keep { white-space: nowrap; }
.spc { letter-spacing: 0.2em; }
.nv0 { display: none; }

.main
{
	/*+display: flex;*/
	display: flex;
}

.intro
{
	/*+flex-basis: 80%;*/
	-webkit-flex-basis: 80%;
	-moz-flex-basis: 80%;
	-ms-flex-preferred-size: 80%;
	flex-basis: 80%;
}

.info
{
	line-height: 1.7em;
	text-align: center;
	font-style: italic;
	font-size: 1em;
}

.thumb
{
	margin-left: 1em;
	font-size: 0.8em;
	width: 75%;
}

.thumb img { width: 100%; }

.topic
{
	font-family: "Open Sans Condensed";
	margin-top: 1em;
	margin-bottom: 1em;
}

.reflect { margin: 1em 0; }

.band
{
	font-size: 0.7em;
	text-align: center;
	background-color: black;
	border-radius: 10px;
	font-weight: 600;
	clear: both;
}

.band a,.band a:visited { color: #DBCDFF; }

a,a:visited
{
	text-decoration: none;
	color: #4700FF;
}

a:hover,.band a:hover { color: #A381FF; }

.close
{
	background-color: #4700FF;
	border-radius: 10px;
	margin: 1em 0 .1em;
}

.badges
{
	padding: 0.8em 0;
	margin-left: 0.1em;
}

.badges img
{
	margin: 0 0 0 3.5%;
	width: 28%;
}
/* 
#iwrap {
  position: relative;
  padding-top: 2360%;
}
 */

#iwrap iframe {
/* 	position: absolute; */
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border: none;
}

#iwrap iframe:focus {
  outline: none;
}

#iwrap iframe[seamless] {
  display: block;
}

/* #archive #more {display:none;} */
#archive h3 {margin-top: 1em;}
#archive h4 {margin-top: 1em; margin-bottom: 0; color: #000;}
#archive h5 {color: #4700FF; margin: .3em 0 0; text-align: center;}
#archive h4+h5 {margin-top: 0;}
#archive h5 span {font-weight: 300; color: #000;}
#archive audio {margin-top: 0;}

#compare h4 {margin-top: .5em; margin-bottom: .5em; color: #000;}
#compare h5 {color: #000; margin: 0 0 .3em 0; text-align: center;}
#compare p {text-align: center;}
#compare hr {margin-top: 1em;}
#compare audio {margin-top: 0;}


@media only screen and (min-width: 25em)
{
.info { font-size: 1.1em; }
/* #iwrap { padding-top: 4200%; } */
}

@media only screen and (min-width: 32em)
{
	html
	{
		font-size: 120%;
		-ms-text-size-adjust: 120%;
		-webkit-text-size-adjust: 120%;
	}
	
	.wrap { width: 90%; }
/* #iwrap { padding-top: 5150%; } */
	.info
	{
		margin: 2em 2em 0 0.5em;
		border-top-left-radius: 0;
		font-size: 1em;
	}
}

@media only screen and (min-width: 39em)
{
/* #iwrap { padding-top: 9000%; } */
	.nv2 { display: none; }
	.nv0 { display: block; }
	.topic { margin-bottom: 0; }
}

@media only screen and (min-width: 51.5em)
{
	.badges { margin-left: 1.2em; }
/* #iwrap { padding-top: 3030%; } */
	.badges img
	{
		margin: 0 1.8em;
		width: 22%;
	}
}

@media only screen and (min-width: 59em)
{
	.wrap { width: 46em; }
/* #iwrap { padding-top: 2400%; } */
	.topic
	{
		margin-top: 2em;
		margin-bottom: 1em;
	}
}