@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/open-sans-400.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/open-sans-700.ttf') format('truetype');
}

*, *::before, *::after { box-sizing: border-box; }

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: #fff;
	color: #5b5b5b;
	font-family: 'Open Sans', Arial, sans-serif;
}

.band { flex: 0 0 auto; background: #4054b2; height: 40px; }
.band--footer { height: 100px; }

main {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 100px 20px 120px;
	background: #ffb716;
	text-align: center;
}

.icon {
	display: block;
	width: 120px;
	max-width: 100%;
	height: 120px;
	margin: 10px;
	overflow: visible;
}

h1, h2 {
	max-width: 900px;
	margin: 20px 10px;
	padding: 0;
}

h1 { font-size: 42px; line-height: 42px; font-weight: 700; }
h2 { font-size: 32px; line-height: 40px; font-weight: 400; }

@media (min-width: 767.5px) {
	h1 { font-size: 56px; line-height: 56px; }
}
@media (min-width: 991.5px) {
	h1 { font-size: 70px; line-height: 70px; }
	h2 { font-size: 40px; line-height: 50px; }
}
@media (min-width: 1199.5px) {
	h1 { font-size: 84px; line-height: 84px; }
}