/* reset  */

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

body {
margin: 0;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
display: block;
}

[hidden],template {
display: none;
}

a {
background-color: transparent;
}

b,strong {
font-weight: bold;
}

small {
font-size: 80%;
}

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

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}

img {
border: 0;
}

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

ul {
list-style: circle inside; }
ol {
list-style: decimal inside; }
ol, ul {
padding-left: 0;
margin-top: 0; 
}
ul ul,ul ol,ol ol,ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%; 
}
li {
margin-bottom: 1rem; 
}

/* Spacing */
pre,blockquote,dl,figure,table,p,ul,ol,form {
margin-bottom: 2.5rem; }

/* Self Clearing Goodness */
.container:after, .row:after {
content: "";
display: table;
clear: both; 
}


/* Grid / flex */

#pagearea, header {
display: flex;
flex-flow: row wrap;
}

header {
align-items: center;
justify-content: center;
}

.container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; 
}

#logo, #title {
flex: 1 100%;
}

#content {
flex: 1 100%;
padding-left: 0;
order: 1;
}

#sidemenu{
overflow: auto;
-webkit-overflow-scrolling: touch;
flex: 1 100%;
padding: 0 0 2em 0;
order: 2;
}


/* For devices larger than 855px */
@media (min-width: 999px) {

#content {
flex: 7;
padding: 0 0 5rem 2.5rem;
order: 2;
}

#sidemenu{
flex: 2;
order: 1;
}

#logo {
flex: 2;
}

#title {
flex: 9;
}

}


/* mobile nav */

#navskip a {
display: block;
background: #03c;
color: #fff;
border: 0;
padding: .5em .8em;
margin: -1em auto 1em auto;
cursor: pointer;
text-align: center;
text-decoration: none;
border-radius: 4px;
}

#navskip a:hover {
background: #090;
}

@media (min-width: 1000px) {

#navskip a {
display: none;
}

}


/* general stuff*/

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1em;
line-height: 1.5;
text-align: left;
background: #fff;
color: #111;

background-size: 100% 100%;
background-attachment: fixed;
background-image: linear-gradient(339deg, rgba(47, 47, 47,0.02) 0%, rgba(47, 47, 47,0.02) 42%,transparent 42%, transparent 99%,rgba(17, 17, 17,0.02) 99%, rgba(17, 17, 17,0.02) 100%),linear-gradient(257deg, rgba(65, 65, 65,0.02) 0%, rgba(65, 65, 65,0.02) 11%,transparent 11%, transparent 92%,rgba(53, 53, 53,0.02) 92%, rgba(53, 53, 53,0.02) 100%),linear-gradient(191deg, rgba(5, 5, 5,0.02) 0%, rgba(5, 5, 5,0.02) 1%,transparent 1%, transparent 45%,rgba(19, 19, 19,0.02) 45%, rgba(19, 19, 19,0.02) 100%),linear-gradient(29deg, rgba(28, 28, 28,0.02) 0%, rgba(28, 28, 28,0.02) 33%,transparent 33%, transparent 40%,rgba(220, 220, 220,0.02) 40%, rgba(220, 220, 220,0.02) 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
}

a:focus { outline: 1px solid #0A74A9; border-radius: 2px; }

a, a:visited {
color: #03c;
text-decoration: underline;
}

main p a, main li a, main dd a, main table a {
text-decoration: underline;
}

a:hover, a:focus {
color: #090;
text-decoration: underline;
}

.hide a {
left: 50%;
position: absolute;
transform: translateY(-100%);
background: #fff!important;
color: #0A74A9!important;
border: 2px solid #0A74A9;
height: auto;
padding: 8px;
}

.hide a:focus {
transform: translateY(0%);
z-index: 1000000;
}

img {
max-width: 100%;
height: auto;
}

h1, h2, h3, h4 {
font-style: normal;
font-weight: 600;
color: #009;
}

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

h2 {
font-size: 1.6em;
margin: 1.2rem 0 .7rem 0;
}

h3 {
margin: .7rem 0;
font-size: 1.4em;
}

h4 {
margin: .7rem 0 .3rem 0;
font-size: 1.2em;
}

p { 
margin: 0 0 1.3rem 0;
}

main p, main li {
font-size: 1.1em;
}

#back-to-top {
bottom: 50px!important;
background: rgba(0,51,204,.7);
transition: all 200ms linear;
}

#back-to-top:hover, #back-to-top:focus {
background: rgba(0,51,204,1);
}

main img {
margin: 5px;
padding: 0;
}

main ul {
margin: 0 0 1.5em 1.5em;
padding: 0 0 0 .5em;
list-style: disc;
list-style-position: outside;
}

main ol {
margin: 0 0 1.5em 1.5em;
padding: 0;
list-style-position: outside;
}

main li { 
margin: 0 0 0 0;
padding: 0;
}

main li p { 
font-size: 100%;
margin: 10px 0 0 0;
}


/* header */

header {
padding-top: 1em!important;
margin-bottom: 2em!important;
}

#title {
color: #03c;
font-size: 120%;
font-style: italic;
}


/* nav */

nav ul {
margin:0;
padding:0;
list-style:none;
}

nav li {
margin:0;
padding: .4em 0;
}

nav li.menuspacer {
margin-bottom: 1em;
}

nav ul ul {
margin: .5em 0 0 1em;
}

nav ul ul li {
font-size: 95%;
}

nav ul ul li a {
padding: .5em;
}


/* media queries */

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

#title {
font-size: 80%;
}

main {
margin: 0 0 2em 0;
}

img {
max-width: 100%;
}

}