:root {
  --color1: #008da2;
  --color2: #fc8f3a;
}

body{
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  min-width: 305px;
  font-size: 19px;
  line-height: 1.3;
  font-family: serif;
  color: var(--color1);
}

h1, h2, h3, h4{
	font-family: sans-serif;
	font-weight: normal;
	font-size: 1.5em;
	width: fit-content;
	border-bottom: 2px solid var(--color1);
	color: var(--color1);
	margin:0;
}

p + h2, ul + h2 {margin-top: 2em;}
h3{ font-size: 1em; margin-top: 1em;}
a{ color: var(--color1);}
a:hover{ color: var(--color2);}
img{ max-width: 100%;}
figcaption{
	font-family: sans-serif;
	font-size: 0.8em;
}

.grey{ color: #B8B8B8;}
.row{ display: flex; flex-wrap: wrap}
.col-xs-12{ width: 100%;}

header{
	position: fixed;
	top:0;
	left: 0;
	padding: 1em 2em;
	background: #FFF;
	width: calc(100% - 4em);
}

header p{
	font-family: sans-serif;
	margin: 0.5em 0;
}

header h1 a {
	text-decoration: none;
}

nav{ padding-left: 6em;}

nav ul{
	display: flex;
	margin: 0;
	justify-content: flex-end;
}

nav ul li{
	list-style: none;
}

nav ul li a{
	color: var(--color1);
	text-decoration: none;
	font-family: sans-serif;
}

nav ul li a.active{
	color: var(--color2);
	border-bottom: 2px solid var(--color2);
}

nav ul li{ margin-right: 1em;}
nav ul li:last-child{ margin:0;}
nav ul li a:hover{
	border-bottom: 2px solid var(--color2);
	color: var(--color2);
}

main{ margin-top: 180px;}
section{ padding: 0px 2em;}
figure{ margin-bottom: 4em;}


@media only screen and (min-width: 48em) {
	.col-sm-6{
		width: calc(50% - 4em);
	}
}