@media ( min-width: 480px ) {

	.grid { width: 480px; }
	#header { margin-bottom: 2rem; }
	.page .blog article .thumb {
	  margin-left: 0;
	  margin-right: 0;
		height: 70vh;
	}
	.page .blog article .thumb.no-image {
		height: auto;
	}
	.page .blog article { margin: 1rem 0 2rem; }
	.page .blog article .thumb header { padding: 1rem; }

}

@media ( min-width: 768px ) {
	h1, h2 { font-size: 2.5em; }
	input, textarea {	width: 15em; }
	.grid {
		width: 768px;
		padding-right: 2rem;
		padding-left: 2rem;
	}
	.left {float: left}
	.right {float: right;}
	.page .blog article .text { padding: 1em 2rem; }
	.page .blog article .text .readmore,
	.page .blog article .text .prev { margin-left: -2rem; }
	.page .blog article .text .next { margin-right: -2rem; }
	.page .blog article .text .prev,
	.page .blog article .text .next { width: 52.5%; }
	blockquote { margin: 2em -2rem; }
	#footer { line-height: 1; }
	#footer .left { padding: 0.5em 0; }
}

@media ( min-width: 1024px ) {

	.grid { width: 100%; }
	#content { width: calc(100% - 320px - 2rem);  float: left; }
	#sidebar { width: 320px; float: right;}
	.page .blog article { margin: 0 0 2rem; }

}

@media ( min-width: 1366px ) {

	.grid { width: 1195px; }

}

@media ( min-width: 1600px ) {

.grid { width: 1195px; }

}

@media ( min-width: 1920px ) {

.grid { width: 1195px;; }

}