@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Lato', sans-serif;
}

h1 { font-size: 2rem; margin: 1.67rem 0 1rem 0 }
h2 { font-size: 1.5rem; margin: 1.75rem 0 1rem 0 }
h3 { font-size: 1.17rem; margin: 1.83rem 0 1rem 0 }
h4 { margin: 1.12rem 0 1rem 0}
h5 { font-size: .83rem; margin: 1.5rem 0 1rem 0}
h6 { font-size: .75rem; margin: 1.67rem 0 1rem 0}
p  {margin: 1rem 0;}

html,
body {
	width: 100%;
	height: 100%;
	font-size: 100%;
}

@media screen and (min-width: 1500px) {
	html, body {
		font-size: 110%;
	}

	.nav-item > a {
		font-size: 1.1rem !important;
	}
}

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

section {
	padding-left: 8.4%;
	padding-right: 8.4%;
}

#wrapper {
	height: 100%;
	overflow: auto;
}

#wrapper > section:first-of-type {
	padding-top: 80px;
	min-height: 100%;
}


/* Navigation
   ----------*/

#navigation {
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
	height: 80px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	position: fixed;
	overflow: auto;
	z-index: 1;
}

#navigation ul {
	display: flex;
	margin: 0;
	padding: 0;
}

#navigation ul:first-child {padding-left: 8.4%;}
#navigation ul:last-child {padding-right: 8.4%;}

.nav-item {
	list-style: none;
	margin-right: 50px;
}

.social-icons .nav-item {
	list-style: none;
	margin: 0;
	margin-left: 50px;
}

.nav-item > a {
	font-size: 1.3rem;
	font-weight: bold;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.nav-item > a.active {
	text-decoration: underline;
}

.nav-item > a:hover,
#navigation svg:hover {
	color: grey;
	fill: grey;
}

#navigation  svg {
	width: 29px;
}