@media screen and (max-width: 1200px) {
	#page { width: 1140px - ( 150px + 60px ) }
	#primary { width: 780px - ( 150px + 60px ) }

	.gallery {
		.gallery-item {
			width: 150px;
			min-height: 150px + 66px;
		}

		.gallery-caption { margin-top: 8px; }

		&.gallery-columns-2 .gallery-item {
			&:nth-child(2n+1) { clear: left; }
			width: 255px;
			min-height: 255px + 57px;

			.gallery-caption { margin-top: 9px; }
		}

		&.gallery-columns-3 .gallery-item {
			&:nth-child(3n+1) { clear: left; }
			width: 150px;
			min-height: 150px + 66px;

			.gallery-caption { margin-top: 6px; }
		}

		/* Becomes 3 columns */
		&.gallery-columns-4 .gallery-item {
			&:nth-child(4n+1) { clear: none; }
			&:nth-child(3n+1) { clear: left; }
			width: 150px;
			min-height: 150px + 66px;

			.gallery-caption { margin-top: 6px; }
		}
	}
}

@media screen and (max-width: 992px) {
	#page { width: 1140px - ( 150px + 60px ) - 360px; }
	#primary { width: 100%; }
	#secondary { width: 100%; }

	/* Mobile Menu */
	div.semicolon-navigation ul,
	ul.semicolon-navigation {
		display: none;
	}

	.main-navigation {
		margin-bottom: 47px;

		.menu-toggle {
			display: block;
			font-family: $font-regular;
			font-size: 16px;
			line-height: 52px;
			height: 60px;
			font-weight: 400;
			border-top: solid 4px transparent;

			margin: 0;
			padding: 0;

			&:before {
				display: inline-block;
				font-weight: normal;
				font-family: Genericons;
				content: '\f419';
				font-size: 16px;
				line-height: 52px;
				padding-right: 10px;
				-webkit-font-smoothing: antialiased;
				vertical-align: top;
			}
		}
	}

	.main-navigation.toggled {
		.current_page_item,
		.current-menu-item,
		.current-post-ancestor,
		.current-menu-ancestor,
		.current-menu-parent,
		.current-post-parent {
			a {
				border-top-color: transparent;
			}
		}

		div.semicolon-navigation ul,
		ul.semicolon-navigation {
			display: block;
			border-bottom: solid 1px;

			li {
				display: block;
				float: none;
				clear: left;

				a {
					padding: 0 26px;
					margin-top: 0;
				}
			}
		}

		.menu-toggle {
			border-bottom: solid 1px;
		}
	}

	ul.semicolon-social {
		position: absolute;
		top: 0;
		right: 0;

		li a {
			line-height: 60px;
		}
	}
}

@media screen and (max-width: 680px) {
	#page { width: 1140px - ( 150px + 60px ) * 2 - 360px; }
	#primary { width: 100%; }

	h1 { font-size: 24px; line-height: 36px; }
	h2 { font-size: 18px; line-height: 24px; }
	h3 { font-size: 16px; line-height: 24px; }

	.site-title { font-size: 24px; line-height: 36px; }
	.grid article,
	.related-content article {
		.entry-title {
			font-size: 16px;
			line-height: 24px;
		}
	}

	.js.grid article.semicolon-featured {
		.entry-title {
			font-size: 24px;
			line-height: 36px;
		}
	}
}

@media screen and (max-width: 479px) {
	body { padding: 0 20px; }
	#page { width: 100%; min-width: 280px; }
	.site-header { margin-top: 24px; }

	.grid article,
	.related-content article {
		width: 100%;
		margin-right: 0;

		.post-thumbnail {
			width: 72px;
			height: 72px;
			position: absolute;
			margin-left: -90px;

			span { margin-left: -1 * ( ( 1000px - 72px ) / 2 ); }
		}

		.entry-header {
			padding-left: 90px;
			min-height: 72px;
		}

		.entry-title {
			width: 100% !important;
		}
	}

	.grid article.semicolon-featured {
		width: 100% !important;

		.entry-header {
			padding: 0;
			min-height: auto;
		}

		.post-thumbnail {
			margin-left: 0;
			position: static;

			width: 100% !important;
			height: 210px !important;
			max-width: 360px !important;

			span { margin-left: -1 * ( ( 1000px - 360px ) / 2 ); }
		}
	}
}

/* No-js grid compatibility */
@mixin grid-compat($columns) {
	body.no-js {
		&.grid article:nth-child(4n+0),
		.related-content article:nth-child(4n+1) {
			@if $debug { background: none; }
			margin-right: 60px;
		}

		&.grid article:nth-child(4n+0) + article,
		.related-content article:nth-child(4n+1) + article {
			@if $debug { background: none; }
			clear: none;
		}

		&.grid article:nth-child(#{$columns}n+0),
		.related-content article:nth-child(#{$columns}n+1) {
			@if $debug { background: red !important; }
			margin-right: 0 !important;
		}

		&.grid article:nth-child(#{$columns}n+0) + article,
		.related-content article:nth-child(#{$columns}n+1) + article {
			@if $debug { background: blue; }
			clear: left !important;
		}
	}
}

@media screen and (max-width: 1200px) and (min-width: 681px) {
	@include grid-compat(3);
}

@media screen and (max-width: 680px) {
	@include grid-compat(2);
}