* {
	box-sizing: border-box;
}

body {
	margin:0;
	color:#444;
	font-family: Arial;
	line-height: 160%;
}

@media screen and (max-width: 600px) {
	body {
		font-size:0.9em;
	}
}

img {
	max-width: 100%;
}

.container {
	max-width: 1400px;
	margin: 0 auto;
}

.site-header {
	height:250px;
	background: grey;
}

@media screen and (min-width: 500px) {
	.site-header {
		height:350px;
	}
}

.site-nav {
	background: #333;
	position: fixed;
	z-index:1;
	top:0;
	left:0;
	right:0;
	padding:1em;
}

.site-nav a {
	color:white;
	text-decoration: none;
	display: inline-block;
	padding:.7em 1.5em;
	background: rgba(255,255,255,0.2);
}

@media screen and (min-width:1400px) {
	.site-nav a {margin:0 0 0 1em;}
}

main.container {
	margin-top:3em;
}

.site-footer {
	background: #333;
	height:300px;
	margin-top:3em;
}

.content {
	padding:1em;
}

.sidebar {	
	padding:1em;
	display: flex;
	align-items: flex-start;
}

@media screen and (min-width: 800px) {
	.content {
		width:65%;
	}

	.sidebar {
		width:35%;
	}
}

@media screen and (min-width: 1000px) {
	.sidebar {
		padding-left:50px;
	}
}


@media screen and (min-width: 801px) {

	main.container {
		display: flex;
	}

}



@media screen and (min-width: 801px) {

	.homepage {
		flex-wrap: wrap;
	}

	.homepage > * {
		width:calc(50% - 2em);
	}
	
}

@media screen and (min-width: 801px) {

	.page-2 {
		flex-direction: column;
	}

	.page-2 .content {
		margin:0 auto;
		text-align: center;
	}

	.page-2 > .featured {
		width:100%;
		display: flex;
	}

	.page-2 > .featured .card {
		width:calc(33.333333% - 2em);
	}
	
}