@font-face {
	font-family:moderat-regular;
	src:url(../fonts/moderat-regular.otf)
}

@media screen and (max-width: 699px) {
	body { background:none; }

	header { width:100%; }
	header .logo { padding-top:30px; width:100%; box-sizing:border-box; }
	header .row p { width:100%; }
	
	main { background:none; }
	
	.row { flex-direction:column; margin:4em 0; }
	.row:nth-child(even) { flex-direction:column-reverse; }
	.row img { max-height:80%; max-width:80%; margin:1em 0; }
	
	article { max-width:100%; align-self:center !important; padding:1em; }
	article h2 { margin-top:auto; font-size:2em; }
	article:nth-child(1) h2 { margin-right:auto; text-align:right; }
	article:nth-child(2) h2 { margin-left:auto; }
}
@media screen and (min-width: 700px) {
	body { background:url(../img/header-pattern.svg) no-repeat left top; background-size: 90% auto; }
	header { width:auto; }
	header .logo { max-width:150px; padding-top:150px; }
	header .row p { max-width:35%; }

	main { background:url(../img/timeline.svg) no-repeat center top; background-size: auto 100%; }
	
	.row { flex-direction:row; margin:5em 0; }
	.row img { max-height:130%; max-width:40%; }

	article { max-width:35%; padding:2em; }
	article h2 { margin-top:-1.7em; font-size:2em; }
	article:nth-child(1) h2 { margin-right:-1.5em; text-align:right; }
	article:nth-child(2) h2 { margin-left:-1.5em; }
}

html, body {
	margin:0;
	padding:0;
}

body {
	font-size:1.4em;
	font-family:moderat-regular;
}

p { text-align:justify; }

.wrap {
	max-width:1200px;
	margin:0 auto;
	padding:0 1em;
}

h1 { color:#d63647; margin-bottom:0; clear:both; }
h2, h3 { color:#68c7d2; }

header .logo { padding:30px; float:right; text-align:center; }
header .logo img { max-width:150px; }
header .row { height:600px; margin:0; padding-bottom:150px; margin-bottom:-300px; }
header .row img { max-height:500px; }
header .row p { text-align:justify; }

main {
	padding-top:200px; margin-top:-200px;
	padding-bottom:100px; margin-bottom:-100px;
}

.row { height:auto; width:100%; display:flex; justify-content:space-between; align-items:center; }

article { background-color:#eee; }