body {
	margin-top: 0;
}

#banner {
	background: #2d2d2d;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	height: 200px;
	text-align: center;
	display:table;
}

#banner h1 {
	color: white;
	margin-top:50px;
    padding:0;
	vertical-align:middle;
	display: block;
	font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-weight: 350;
	font-size: 48px;
	line-height: 1.04167;
	letter-spacing: 0.03em;
}

#banner .subtitle {
	color: white;
	margin: auto;
    padding:0;
	vertical-align:middle;
	display: block;
	font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-weight: 100;
	font-size: 20px;
	line-height: 1.6em;
	letter-spacing: 0.07em;
}

ul, li {
	list-style: none;
	line-height: 1.4em;
	padding-top: 0.75em;
	font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

}

a {
	color: #5ba2d9;
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.018em;
	font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

}

#logoFramework {
	width:80px;
}

.flexcontainer {
	width: 100%;
	display: grid;
	justify-content: center; /*centers items on the line (the x-axis by default)*/
	align-items: center;
	grid-template-columns: auto auto;
}

div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 250px;
    padding: 20px;
}
.caption {
    display: block;
    font-size: 20px;
    line-height:1.2;
    font-weight:350;
    letter-spacing:0.009em;
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

hr {
	margin: 40px 0 40px;
}