body {
	font-family: 'Roboto', sans-serif;
	background-color: #eef4f9;
}

img {
	display: block;
	margin: 50px auto;
	max-width: calc(100% - 40px);
}

#ribbon {
	background-color: #20a3d1;
	text-align: center;
	margin: 40px 0;
	padding: 40px;
}

#ribbon h1 {
	color: #ffffff;
	font-size: 2.75rem;
	font-weight: 300;
	margin: 20px auto;
}
@media only screen and (min-width: 360px) {
	#ribbon h1 {
		font-size: 3.75rem;
	}
}

#ribbon p {
	color: #b5ddeb;
	font-size: 1.5rem;
	font-weight: 300;
	margin: 0 auto 40px auto;
	max-width: 1140px;
}

#ribbon ul {
	color: #ffffff;
	font-size: 1.5rem;
	font-weight: 400;
	padding-left: 0;
}

#ribbon ul li {
	display: block;
	list-style-type: none;
}

#ribbon ul li:not(:last-of-type):after {
	content: "|";
	display: none;
	padding: 0 20px 0 28px;
	color: #55c4eb;
}

@media only screen and (min-width: 800px) {
	#ribbon ul li {
		display: inline-block;
	}
	#ribbon ul li:not(:last-of-type):after {
		display: inline-block;
	}
}