// Medium screens
@media only screen and (min-width: 40.063em) {

	blockquote {
		font-size: $font__size-h4;
	}
	.site {
		margin: 0 auto;
		max-width: $size__site-width;
	}

	.site-header,
	.single .entry-footer,
	.page .entry-footer {
		margin-bottom: 3em;
	}

	.entry-footer span {
		clear: none;
		margin-right: 1.5em;
		width: auto;
	}

	body .post,
	body .page {
		margin-bottom: 4.5em;
	}

	.single .entry-title,
	.single .portfolio-entry-title {
		font-size: $font__size-h2;
		margin-top: -16px;
	}

	.entry-content {
		font-size: $font__size-content;
	}

	.comments-area .comment-form-author input,
	.comments-area .comment-form-email input,
	.comments-area .comment-form-url input {
		width: 75%;
	}

	h1 {
		font-size: $font__size-h1;
	}
	h2 {
		font-size: $font__size-h2;
	}
	h3 {
		font-size: $font__size-h3;
	}
	h4 {
		font-size: $font__size-h4;
	}
	h5 {
		font-size: $font__size-h5;
	}

	.entry-wrapper {
		padding: 0;
	}

	.comment-navigation,
	.posts-navigation,
	.post-navigation {
		a {
			width: auto;
		}

		& .nav-previous {
			float: left;
			margin-bottom: 0;
			text-align: center;
		}

		& .nav-next {
			float: right;
			text-align: center;
		}
	}
}

@media screen and ( min-width: 50em ) {
	.site-title {
		font-size: $font__size-extra-large;
		letter-spacing: 8px;
	}

	.site-description {
		font-size: 17px;
	}

	.navigation-wrapper {
		margin-bottom: 6em;
	}

	.main-navigation {

		clear: none;
		float: left;
		max-width: 70%;
		margin-bottom: 4.5em;
		padding-top: 0;

		a {
			padding-bottom: 0;
		}
		
		a:after {
			display: inline;
			bottom: .85em;
		}
	
		ul {
			list-style: none;
			margin: 0;
			padding-left: 0;

			ul {
				padding-left: 0;
			}

			ul > li {

				&:first-of-type {
					padding-top: .75em;

					&:before {
						content: "";
						display: block;
						border-width: 0 10px 10px 10px;
						border-color: transparent transparent $color__light-black transparent;
						border-style: solid;
						position: absolute;
						width: 0;
						height: 0;
						top: -10px;
						left: 50%;
						margin-left: -10px;
					}
				}

				&:last-of-type {
					padding-bottom: .75em;
				}
			}

			ul {
				background-color: $color__light-black;
				position: absolute;
				text-align: center;
				top: 2.7em;
				left: -999em;
				z-index: 99999;

				li:hover > ul,
				li.focus > ul {
					left: 100%;
					margin-left: 0;
				}

				ul {
					left: -999em;
					margin-left: 0;
					top: 0;

					& > li:first-of-type:before {
						display: none;
					}
				}

				li {
					margin-right: 0;
					padding-bottom: 0;

					&:hover > ul,
					&.focus > ul {
						left: 100%;
					}
				}

				a {
					display: block;
					padding: .75em 1.5em;
					width: 170px;
					
					&:after,
					&:hover:after {
						display: none;
					}
				}

				> li:last-of-type a {
					border-bottom: 0;
				}

				:hover > a,
				.focus > a {

				}

				a:hover,
				a.focus {

				}
			}

			li:hover > ul,
			li.focus > ul {
				left: 50%;
				margin-left: -85px;
			}
		}

		li {
			float: left;
			margin-right: 1.5em;
			position: relative;
			padding-bottom: .75em;

			&:hover > a,
			&.focus > a {
				&:after {
					visibility: visible;
					opacity: 1;
				}
			}
		}
	}

	.jetpack-social-navigation {
		clear: none;
		float: right;
		width: 25%;
		text-align: right;

		li {
			float: none;
		}
	}

	.comment-navigation,
	.posts-navigation,
	.post-navigation {
		a {
			font-size: $font__size-default;
			width: 235px;
		}
	}

	.entry-meta {
		float: left;
		width: 15%;
	}

	.home .entry-date span {
		display: block;
		width: 100%;
	}

	.single .entry-meta {
		margin-bottom: 1.5em;

		&:before {
			display: block;
			content: "";
			width: 100%;
			clear: both;
			margin: 0 0 1.5em;
			background: $color__light-black;
			height: 6px;
		}
	}
	.entry-wrapper {
		float: right;
		width: 80%;
	}
	#infinite-handle span,
	.infinite-loader {
		margin-left: 20%;
	}
	.single .entry-meta {
		margin-bottom: 3em;
		width: 25%;
	}
	body.page .featured-image,
	.single .featured-image {
		float: right;
		width: 100%;
	}
	.single,
	body.page {

		.entry-wrapper {
			clear: none;
			float: right;
			width: 70%;
		}

		.post,
		.page {
			float: right;
			width: 100%;
		}
	}
	.site-content .widget-area {
		width: 25%;
		float: left;
	}

	.single .entry-title,
	.single .portfolio-entry-title {
		clear: none;
		float: right;
		width: 70%;
	}
	.comments-area {

		.comment-list,
		.comment-list .children {
			list-style: none;
			margin-left: 0;
			padding-left: 0;
		}

		.comment-list .children {
			padding-left: 0;
		}

		.comment-list {
			margin-left: 110px;
		}

		.comment-list > .parent {
			border-left: 4px solid $color__dark-grey;
			padding-left: 70px;
			margin-left: -70px;
		}

		.pingback {
			margin-left: -110px;
		}

		.comment-body {
			margin-bottom: 4.5em;
		}
		.avatar {
			max-width: 75px;
			width: 75px;
			height: 75px;
			margin: 0;
		}

		.comment-author {
			float: left;
			max-width: 60%;
			position: relative;

			.avatar {
				position: absolute;
				left: -110px;
				top: 0;
			}
		}

		.comment-metadata {
			float: right;
			max-width: 40%;
			text-align: right;
		}
	}
	.comments-area .comment-form-author input,
	.comments-area .comment-form-email input,
	.comments-area .comment-form-url input {
		width: 87%;
	}
}