*	{ box-sizing:border-box; }

h1, h2, p { margin-bottom: 1em !important; }

h1	{font-size:2.4rem; line-height:2.6rem; margin-left:2%;}

div h2	{font-size:2.3rem; line-height:2.2rem; margin-left:2%;}

div h3	{font-size:2.0rem; line-height:1.8rem; margin-left:2%;}

section img  { margin-bottom:0; }

li	{
	padding-left:0.5%;
	font-size:1.7rem !important;
	line-height:1.9rem !important;
	}

@media (min-width: 856px)
{

html	{ width:100%; max-width:1140px; }

body	{ width:100%; max-width:1120px; }

div	{
	width:100%;
	max-width:1100px;
	padding:2%;
	border-radius:15px;
	margin-left:2%;
	margin-right:auto;
	}

section img  { margin-bottom:0; }

.vid	{
	position:relative; padding-bottom:45%; height:0; overflow:hidden;
	width:80%;max-width:640px; margin : 0 auto 1rem auto;
	}

li.vid iframe {
    	position:absolute; top:0; left:0; margin : 0 0 0 0; padding: 0 0 56% 0;
  }

ul img  {
	width:95%;
	max-width:800px;padding:0;
	margin-left:5%; margin-right:auto; margin-bottom:1em;
	}

li	{
    	margin-left:3%;
	list-style-type:none;
	font-size:1.8rem !important;
	line-height:1.95rem !important;
	margin-bottom:1em !important;
	}
}

@media (max-width: 855px) and (min-width: 521px)
{

section {padding:0px;}

div	{
	width:97%; max-width:500px;
	padding:3% 0.5%;
	border-radius:10px;
	margin-left:auto; margin-right:auto;
	}

.vid	{
    position:relative; top:0; left:0; padding-bottom:76.25%; max-width:100%;
height:69%; overflow:hidden; margin : 0 auto 0 auto;
  }

ul img  {
	max-width:493px; padding:0;
	margin-left:auto; margin-right:auto;
/*	float:left; */
	}

li	{
	width:100%;
	padding-left:1%;
	font-size:1.6rem !important;
	line-height:1.8rem !important;
	}
}

@media (max-width: 520px) and (min-width: 361px)
{

html, body	{
	width:100%; max-width:520px;
	border-radius:15px;
	margin:0; padding:0;
	}

section {padding:0px; margin-left:auto; margin-right:auto;}

section:last-child {padding-bottom: 4rem;}

div	{
	width:96.5%; max-width:508px;
	padding:2%;
	border-radius:5px;
	margin-left:auto; margin-right:auto;
	}

ul	{
	width:99%;
	max-width:506px;
	margin-left:auto; margin-right:auto;
	}

ul img  {
	width:96%;
	max-width:490px;
	margin-left:0%; margin-right:auto;
	}

ul iframe  {width:100%;
	max-width:490px;
	margin-left:auto; margin-right:auto;
	}

nav	{
	width:		99%;
	position:	fixed;
	bottom:		0%;
	left:		0%;
	}

a nav	{ width:30%;display:inline !important;}

a.trio	{ white-space:nowrap !important;}

}

@media (max-width: 360px)
{

html, body	{
	width:100%; max-width:360px; padding:0; margin:0;
	}

nav {
	position:		fixed;
	bottom:			0;
	left:			0;
	width:			100%;
	max-width:		334px;
	margin:			20px 0px 0px 0px;
	padding:		5px 6px 5px 4px;
	background-color:	black;
	z-index:		10;
}

nav a {display:inline;}

/* width:100%; padding-right:9px; */

section {width:100%; max-width:334px; padding:2px; margin:0;}

section:last-child {padding-bottom: 5rem;margin:0;}

div	{
	width:100%; max-width:334px;margin:0;
	padding:3% 1%;
	border-radius:0px;
	}

p	{ padding-bottom: 1rem !important; }

ul	{
	float:none;
	width:100%; max-width:330px;
	margin:0;
	}

ul img  {
	max-width:330px;
	float:none;
	margin-left:2%; margin-bottom: 0.01em !important;
	}

li {
	font-size:1.6rem !important;
	line-height:1.8rem !important;
	}
	/*section last child space-after ? */
}

/* .trio	{display:hidden;} */

@media (max-width: 360px) {
p { padding-bottom: 1rem !important; }

li img  { margin-bottom: 0.01em !important; }
}

@media (max-width: 855px) {
 .vid {
    position:relative; padding-bottom:52%; max-width:100%;
height:0; overflow:hidden; margin : 0 auto 0 auto;
  }
}

@media (min-width: 856px) {
  .vid {
    position:relative; padding-bottom:48%; height:0; overflow:hidden;
	width:85%;max-width:640px; margin : 0 auto 1rem auto;
  }

li.vid iframe {
    position:absolute; top:0; left:0; margin : 0 0 0 0; padding: 0 0 0 20%;
  }
}