*	{ box-sizing: border-box; }

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

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

div h3	{ font-size: 2.0rem; line-height: 1.8rem; margin-left: 2%; }
	
@media (min-width:  856px)
{
body	{ width: 100%; max-width: 1190px; margin: 0; padding: 0; }

div	{
	width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto;
	padding: 2% 1%;
	border-radius: 15px;
	}	
	
ul img  {
	width: 95%; max-width: 800px; padding: 0; margin-left: 0.25%; margin-right: auto;
	}

li	{
	list-style-type: none;
	font-size: 1.8rem !important;
	line-height: 1.95rem !important;
	}
}
	
@media (max-width:  855px) and (min-width:  521px)
{
    
section {padding: 0px;}
div	{
	width: 100%; max-width: 500px; margin-left: auto; margin-right: auto;
	padding: 3% 0.5%;
	border-radius: 10px;
	}

ul img  {
	max-width: 493px; padding: 0; margin-left: auto;margin-right: auto;
/*	float: left; */
	}
	
li	{
	padding-left: 3%;
	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; margin-left: auto; margin-right: auto;
	padding: 2%;
	border-radius: 5px;
	}
 
ul	{
	width: 99%; max-width: 506px; margin-left: auto; margin-right: auto;
	}
	
li	{
	padding-left: 3%;
	font-size: 1.7rem !important;
	line-height: 1.9rem !important;
	}

ul img  {
	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:last-child { padding-bottom:  4rem;margin: 0; } 
section { width: 100%; max-width: 334px; padding: 2px; margin: 0; }

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

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

ul img  {
	max-width:  330px;
	float: none;
	margin-left: 2%;
	}

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

/* .trio	{ visibility: hidden; }
formerly 'display' (wrong!) - but why?
} */

[title~="Dead"] { text-decoration:underline; color: #bbbbdd;}