* {
  box-sizing: border-box;
  font-family: 'Open Sans', "Lucida Grande", sans-serif;
}

body {
  font-family: "Arial";
  margin: 0;
	width: 100%;
  color: #1a1a1a;
}

footer {
	position: absolute;
	bottom: 0;
	height: 2.5rem;
}

p {
	
}

/* -^-^-^-^- =GENERAL= -^-^-^-^- */

.canvas {
	position: relative;
	margin: 0 auto;
	max-width: 100%;
	min-height: 100vh;
	padding: 0 32px;
}

.content {
	padding-top: 8px;
	padding-bottom: 2.5rem;
}

/* -v-v-v-v- =GENERAL= -v-v-v-v- */

/* -^-^-^-^- =HEADER= -^-^-^-^- */

.header {
	margin: auto;
	padding: 48px 48px 32px 48px;
}

.navigation {
	display: grid;
	grid-template-columns: 1fr repeat(3, fit-content(50px));
	grid-gap: 12px;
	justify-content: center;
	align-items: end;
}

.navigation div {
	grid-column: 1 / 2;
	vertical-align: center;
}

.navigation a {
	
}

.title {
	font-size: 1.8em;
	letter-spacing: 2px;
	text-decoration: none;
}

.nav-icon {
	display: none;
	text-decoration: none;
	position: absolute;
	top: 0;
	right: 0;
	font-size: 1.6em;
	color: #808080;
	padding: 22px 24px 16px 0;
}

.navigation a:not(.title):not(.nav-icon) {
	text-decoration: none;
	text-align: center;
	vertical-align: center;
	font-size: 1.1em;
}

.navigation a.active {
	color: #999999;
}

.navigation a:hover:not(.active):not(.title) {
	color: #bfbfbf;
}

/* -v-v-v-v- =HEADER= -v-v-v-v- */

/* -^-^-^-^- == -^-^-^-^- */

.content img {
	position: relative;
	max-width: 100%;
	height: 800px;
	margin: auto;
}