html {
    font-size: 16px;
    /*    font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif,'Open Sans', sans-serif;*/
    font-family:  'Open Sans', sans-serif;
    line-height: 2em;
    /*    box-sizing: border-box;*/
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
}


body {
	padding-top: 3rem;
    background-color: #FFF;
    height: 100%;
	color: #3a3b39;
	/*border-top: 0.3rem solid #4f514e;*/
}



nav {
    margin: 0;
    height: 3rem;
    position: fixed;
    top: 0;
	-webkit-transition: top 0.2s ease-in-out, background-color 200ms linear;
    -moz-transition: top 0.2s ease-in-out, background-color 200ms linear;
    -o-transition: top 0.2s ease-in-out, background-color 200ms linear;
    -ms-transition: top 0.2s ease-in-out, background-color 200ms linear;
    transition: top 0.2s ease-in-out, background-color 200ms linear;
    transition: top 0.2s ease-in-out, background-color 200ms linear;
    width: 100%;
	color: rgba(255,255,255,.8);
	text-align: center;
}

.nav-up {
    top: -3rem;
}


.nav-light {
    background: #fff;
	color: #949792;
	/*-webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;*/
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-top: 0.3rem solid #4f514e;
}

.nav-dark {
	background: #4f514e;
	color: rgba(255,255,255,.8);
}



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

nav li {
    display: inline;
	vertical-align: middle;
	text-transform: uppercase;
}

nav li > a, nav li > a:visited {
    text-align: center;
    padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
    text-decoration: none;
	color: #9d9d9d;
	line-height: 3rem;
	
	-o-transition:color .2s ease-out, background 0.2s ease-in;
	-ms-transition:color .2s ease-out, background 0.2s ease-in;
	-moz-transition:color .2s ease-out, background 0.2s ease-in;
	-webkit-transition:color .2s ease-out, background 0.2s ease-in;
	/* ...and now override with proper CSS property */
	transition:color .2s ease-out, background 0.2s ease-in;
}


nav li > a:hover, nav li > a:active {
    color: #FFF;
}



nav.nav-light li > a:hover, nav.nav-light li > a:visited, nav.nav-light li > a:active {
    background-color: #949792;
}



div.toggle-menu {
	cursor: pointer;
    display: block;
    position: fixed;
    right: 0;
    top: 0;
	 color: #949792;
    padding: 20px 25px;
	font-size: 2rem;
	/*-webkit-text-stroke: 1px #fff;*/
}



body > div.layout {
    
    /*display: inline-block;*/
    overflow: auto;
    padding: 0;
    margin: 2em auto;
	word-wrap: break-word;
}


div.layout > article
{
	
  max-width: 50rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

div.layout > article > h1 {
	
}

div.layout > article > h3 {
	margin-top: 2.25em;
	margin-bottom: 1.25em;
}

div.layout > article > p {
	margin-bottom: 1.5em;
	margin-top: 1.5em;
	padding: 0;
}