/* small screen layout */
/* common */
.desktop { display: none; }

#content
{
	position: relative;
	min-height: 369px;
	padding-top: 1.2em;
	background-color: #BA8;
	background-image: url("assets/cloth.jpg");
	transition: .8s ease-in-out;
}

/* Header */
header::before { height: 22vw; }

header nav
{
	display: flex;
	flex-wrap: wrap;
	position: relative;
	top: -0.1em;
	font-size: .9em;
}

.hover header nav a:hover, .touch header nav a:active
{
	transition: .2s;
	top: 2px;
	box-shadow: 0 2px 5px -1px black, 1px 1px 0 0.5px gray, 0 0 4px 0 gray inset;
}

header nav a
{
	flex-basis: 39%;
	cursor: pointer;
	display: inline-block;
	position: relative;
	line-height: 19px; /* iOS fix */
	height: 1.2em;
	padding: 8px 0;
	vertical-align: top;
	text-align: center;
	background-color: #FEC;
	background-image: url("assets/paper.jpg");
	box-shadow: 0 7px 5px -5px black, 1px 1px 0 0.5px gray, 0 0 4px 0 gray inset;
}

header nav a:nth-child(3) {flex-basis: 22%;}


/* Pane, enable more feature to keep screen clean */

@media screen and (max-width: 599px)
{
	.more.hide h2, .more.hide p, .more.hide ol { display: none; }
	
	.more span.mbutton
	{
		display: inline-block;
		margin: .5em 0 1em 0;
		cursor: pointer;
		font-style: italic;
		color: #877;
	}
	
	.more.hide span.mbutton::before { content: "More..."; }
	.more.show span.mbutton::before { content: "Less..."; }
	.hover .more span.mbutton:hover, .touch .more span.mbutton:active { text-shadow: 0 0 1px black; }
}