@viewport{width:device-width;zoom:1;}
@-webkit-viewport{width:device-width;zoom:1;}
@-moz-viewport{width:device-width;zoom:1;}
@-ms-viewport{width:device-width;zoom:1;}
@-o-viewport{width:device-width;zoom:1;}
@viewport{width:device-width;zoom:1;}

@font-face {
	font-family:"St";
	src:url('../fnt/st.eot'); src:url('../fnt/st.eot?#iefix') format('embedded-opentype'), url('../fnt/st.woff2') format('woff2'), url('../fnt/st.woff') format('woff'), url('fnt/st.ttf') format('truetype'), url('../fnt/st.svg#open_sansregular') format('svg');
}

@font-face {
	font-family:"Txt";
	src:url('../fnt/txt.eot'); src:url('../fnt/txt.eot?#iefix') format('embedded-opentype'), url('../fnt/txt.woff2') format('woff2'), url('../fnt/txt.woff') format('woff'), url('fnt/txt.ttf') format('truetype'), url('../fnt/txt.svg#open_sansregular') format('svg');
}

@media screen {

	html, body {
		margin:0;
		padding:0;
		font-family:Txt;
		font-size:80%;
		color:#111111;
		scroll-behavior:smooth;
		-webkit-transition: all .1s ease-in-out;
		-moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		-o-transition: all .1s ease-in-out;
		transition: all .1s ease-in-out;
	}

	body {
		background:#333333;
		background-image:url(../img/backgroundmobile.jpg);
	}

	#header, #footer, .aside { opacity:1; }

	.flex {
		display: flex;
		flex-direction: column;
	}

	#banner, #header, #footer {
		flex: none;
		-khtml-user-select:none;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
	}

	#banner {
		background:#555555;
		opacity:1;
		height:50px;
	}

	#header {
		background:#FF6600;
		display:none;
	}

	.logo {
		display:inline-block;
		font-size:2.4em;
		color:#C8C7C8;
		padding-left:.5em;
		float:left;
	}

	#trigram {
		font-size:2.15em;
		background:black;
		padding-top:.1em;
		padding-bottom:.2em;
		padding-left:.4em;
		padding-right:.4em;
		cursor:pointer;
		position:fixed;
		top:6px;
		right:6px;
		opacity:1;
	}

	#trigram a {
		color:white;
		text-decoration:none;
	}

	#trigram a:hover {
		background:black;
		color:orange;
	}

	#options {
		float:right;
		margin-right:4.5em;
		margin-top:4px;
		padding:.2em;
		font-size:1.2em;
	}

	#header img {
		float:right;
		margin-left:0;
		margin-top:10px;
		margin-right:8px;
		opacity:.4;
	}

	#menu { float:left; }

	#footer {
		background:#111111;
		padding:.3em;
		border-bottom-left-radius:15%;
		border-bottom-right-radius:50%;
		margin-bottom:2em;
	}

	.footeritem { display:inline-block; }

	.wrapper {
		display: flex;
		flex: 1 0 auto;
		flex-direction: column;
	}

	#main {
		padding:.3em;
		background:lightgrey;
		opacity:1;
	}

	.mainphoto {
		float:right;
		margin-left:1.5em;
		margin-bottom:1em;
		background:white;
		border:.3em solid white;
		font-size:1.2em;
		text-align:right;
	}

	.nav, .aside {
		-khtml-user-select:none;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
	}

	.nav {
		order: -1;
		background:#AAAAAA;
		padding:1.3em;
		display:none;
	}

	.aside {
		background:#7E5E4F;
		padding:1.3em 1em .4em 1em;
		margin:0;
		text-align:center;
	}

	.asidepic {
		opacity:.7;
		margin-bottom:10px;
	}

	#header ul {
		list-style-type:none;
		margin:0.3em;
	}

	#header li {
		padding:0.3em;
		margin-left:-40px;

	}

	#header li a {
		background-color:#C75C15;
		background:transparent linear-gradient(to bottom, #FA6C0E, #B35415) repeat scroll 0% 0%;
		border:thin solid white;
		border-radius:20%;
		color:white;
		font-family:St;
		font-size:2em;
		text-decoration:none;
		padding-top:0.3em;
		padding-bottom:.15em;
		padding-left:1em;
		padding-right:.5em;
		display:block;
		width:5em;
	}

	#header li a:hover {
		background:black;
		border:thin solid orange;
		transition: opacity 1s ease-in-out;
		opacity:.7;
		color:orange;
	}

	#header li a:active {
		transition: all .1s ease-in-out;
		opacity:1;
		color:white;
	}

	h1, h2, h3 {
		font-family:St;
		font-weight:normal;
		margin:0;
	}

	h1 {
		padding-top:.5em;
		padding-left:.2em;
	}

	h2 {
		padding-top:.5em;
		padding-left:.3em;
	}

	p {
		text-align:justify;
		max-width:36em;
		font-size:1.2em;
		margin-left:.3em;
		margin-right:.3em;
	}

	.justified { text-align:justify; }

	a { color:brown; }

	a:hover {
		color:white;
		background:#D75907;
		text-decoration:none;
	}

	ul {
		list-style-image: url(../img/li.jpg);
		margin-bottom:2em;
		margin-left:0;
	}

	#main ul li {
		margin-bottom:.5em;
		max-width:28em;
		font-size:1.2em;
	}

	#main ul li ul li { font-size:.9em; }

	#main ul li ul li ul li { font-size:.9em; }

	#main ul li a {
		padding-left:.2em;
		padding-right:.2em;
	}

	#main ul > li > ul > li { list-style-image: url(../img/lismall.jpg); }

	#main ul > li > ul { margin-top:0; }

	ol li {	font-size:1em; }

	button { outline:none; }

	.button {
		font-size:1.2em;
		background:#8A6E5F;
		background:transparent linear-gradient(to bottom, #8A6E5F, #2B2223) repeat scroll 0% 0%;
		color:white;
		border: thin solid white;
		border-radius:20%;
		margin:0.4em;
		padding-top:.1em;
		padding-bottom:.3em;
		padding-left:.5em;
		padding-right:.5em;
		display:inline-block;
		text-decoration:none;
	}

	.button:hover {
		background:#8A6E5F;
		background:transparent linear-gradient(to bottom, #AF7D8E, #372124) repeat scroll 0% 0%;
		color:white;
		border: thin solid orange;
		border-radius:25%;
		cursor:pointer;
		transition: all .1s ease-in-out;
		opacity:1;
		color:white;
	}

	.buttonicon {
		display:inline-block;
		margin:0;
		float:left;
		font-size:155%;
		color:orange;
		padding-left:.3em;
		padding-right:.5em;
		padding-top:0;
		padding-bottom:0;
	}

	.touch {
		display:inline-block;
		padding:.5em;
		border:thin solid black;
		border-radius:20%;
		min-width:8.5em;
		font-size:1.5em;
	}

	.activebutton {
		background:black;
		color:white;
	}

	.red { color:red; }

	.green { color:green; }

	.ralign { text-align:right; }

	.info {
		display:inline-block;
		background-image:url(../img/info.jpg);
		opacity:.7;
		border:thin solid white;
		margin-top:.5em;
		margin-bottom:1.5em;
		padding-left:1.5em;
		padding-right:1.5em;
		min-width:26.5em;
	}

	.form {
		margin-top:1em;
		margin-bottom:1em;
		font-size:120%;
	}

	input {
		margin-bottom:1em;
		padding:.5em;
	}

	.video {
		width:426px;
		height:300px;
		margin-top:2em;
		margin-bottom:2em;
		-moz-user-select: none;
		-webkit-user-select: none;
		user-select: none;
		border:thin solid white;
	}

	audio, video {
		-khtml-user-select:none;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
	}

	.video:hover { cursor:pointer; border:thin solid orange;}

	.videocaption {
		width:422px;
		margin-top:.5em;
		margin-bottom:1em;
		border:2px solid darkgrey;
		background-color:#929294;
	}

	.videocaption p { margin-left:1em; }

	.videocaption .lighttext {
		font-size:.8em;
		color:white;
	}

	.sound {
		display:inline-block;
		background-image:url(../img/info.jpg);
		width:32em;
		height:9em;
		margin:.5em;
		padding:1em;
		border:thin solid white;
	}

	.list {
		border:thin solid black;
		margin-top:1em;
		margin-bottom:1em;
	}

	.icon {
		margin-top:0;
		margin-bottom:0;
		margin-right:.1em;
		margin-left:.1em;
		padding-top:0;
		padding-bottom:0;
		padding-left:.3em;
		padding-right:.3em;
		font-size:1.5em;
		text-decoration:none;
	}

	th {
		color:white;
		font-weight:normal;
		font-size:1.2em;
		background:#FF6600;
		padding-left:.5em;
		padding-right:.5em;
	}

	td {
		font-size:1.2em;
		background:#AAAAAA;
		padding:.3em;
	}
}

@media screen and (min-width:600px) {

	body {
		font-size:85%;
		background-image:url(../img/background.jpg);
	}

	.flex, #banner, #footer, .nav, .aside {	padding:.5em; }

	.nav { display:block; }

	#banner { height:46px; }

	#navgram {
		display:block;
		position:fixed;
		bottom:10em;
		background:black;
		color:white;
		font-size:2em;
		background:black;
		padding-top:.05em;
		padding-bottom:.2em;
		padding-left:.4em;
		padding-right:.4em;
		cursor:pointer;
		margin-left:-29px;
		border:thin solid black;
	}

	#navicons {
		display:block;
		position:fixed;
		bottom:10em;
		margin-left:-10px;
	}

	.navicon {
		display:block;
		background:black;
		color:white;
		font-size:1em;
		background:black;
		padding-top:.1em;
		padding-bottom:.2em;
		padding-left:.3em;
		padding-right:.3em;
		cursor:pointer;
		margin-left:0px;
		border:thin solid black;
		margin-bottom:4px;
	}

	#navgram:hover, .navicon:hover { border:thin solid orange; }

	#navgram a, .navicon a {
		color:white;
		text-decoration:none;
	}

	#navgram a:hover, .navicon a:hover {
		color:orange;
		background:black;
	}

	.logo {
		margin-left:0;
		padding-top:0.2em;
		font-size:2.5em;
	}

	#header, #footer, .aside { opacity:.9; }

	#header {
		display:block;
		padding:0;
	}

	#header li a {
		font-size:1.5em;
		border:none;
		background:none;
		padding-left:.5em;
		padding-right:.5em;
		padding-bottom:.3em;
		border-radius:0;
		margin-left:-10px;
	}

	#header li a:hover { border:none; }

	#header li a:hover:before { width:100%;}

	#header li a:before {
		content:"";
		display:block;
		position:relative;
		left:0;
		top:1.3em;
		height:.1em;
		width:0;
		-webkit-transition:width .25s;
		-moz-transition:width .25s;
		-ms-transition:width .25s;
		-o-transition:width .25s;
		transition:width .25s;
		background-color:white;
	}

	#trigram { display:none; }

	#header img { display:none; }

	.wrapper { flex-direction: row; }

	#main {
		flex: 1;
		padding:1em;
		opacity:.9;
	}

	.nav {
		flex: 0 1 0;
		opacity:.3;
	}

	.nav:hover { flex: 0 1 0;
		transition: opacity .5s ease-in-out;
		opacity:.5;
	}

	.aside {
		flex: 0 1 8em;
		padding:1em;
	}

	#header li {
		display:inline-block;
		margin-left:.2em;
		padding-right:2em;
	}

	#header li a { width:auto; }

	.touch { font-size:.9em; }

	.info { min-width:24.8em; }

	#options {
		margin-right:1em;
		margin-top:0;
		padding:.2em;
		font-size:1em;
	}

	.sound { width:27.5em; }
}

@media screen and (min-width:800px) {

	body { font-size:92%; }

	.flex, #banner, #header, #footer, .nav, .aside { padding:1em; }

	.wrapper { flex-direction: row; }

	#banner { height:40px; }

	#header { height:2.5em;}

	#header li { margin-top:-8px; margin-left:-3px;padding-right:3em;}

	#header li a {padding-bottom:.5em;}

	#options { font-size:.85em; }

	#footer { padding-left:1.4em; }

	#main {	flex: 1; padding:1.5em;	}

	.nav { flex: 0 1 0; }

	.aside { flex: 0 1 12em; }

	h1 {padding-top:0;}

	.asidepic { margin-bottom:1em; }

	.info { min-width:22.7em; }

	.sound { width:25.5em; }
}

@media screen and (min-width:1000px) {

	body { font-size:100%; }

	.flex {
		padding-top:2em;
		padding-left:5em;
		padding-right:5em;
		padding-bottom:2em;
	}

	.logo { font-size:2em; }

	#main {	padding:2em; }

	.aside { flex: 0 1 12em; padding-top:1.5em;}

	.asidepic { margin-bottom:1.3em; }

	.video { width:640px; height:440px; }

	.videocaption {	width:636px; }

	.info { min-width:19.5em; }

	.sound { width:23.5em; }
}

@media screen and (min-width:1400px) {

	.flex {
		padding-left:9em;
		padding-right:9em;
	}

	body { font-size:105%; }

	.aside { flex: 0 1 16em; padding-top:3em;}

	.video { width:854px; height:560px; }

	.videocaption { width:850px; }

	.sound { width:22em; }

	.asidepic { margin-bottom:3em; }
}

@media print { #header, #footer, .aside, .nav, audio, video { display:none; } }