@media only screen and (max-width: 1200px) {
	:root {
		--content-width: 100%;
	}
}

@media only screen and (max-width: 1000px) {
	.timeline {font-size: 0.75em}
	.qualities {flex-flow: column nowrap; row-gap: 2em; align-items: center;}
	.qualities .numbers {width: 100%;}
}

@media only screen and (max-width: 700px) {
	html {font-size: 1rem;}
	#topbar .content {justify-content: center;}
	#navigation {display: none;}
	.banner {min-height: 15em;}
	.timeline {flex-flow: column;}
	.timeline .item.total {margin-top: 1em;}
	.qualities .numbers {height: 40em;}
	.qualities .numbers .list {background-size: cover; background-position: center; text-align: center; align-items: center; justify-content: flex-end; padding-bottom: 1em;}
	.section.bottom-logo .content {text-align: center;}
}