/* =Navigation
----------------------------------------------- */

.site-main [class*="navigation"] {
	overflow: hidden;

	.post-nav-box {
	    padding: 1em 0;
	    margin-bottom: 4em;
	    border-top: 1px solid $horizontal-line;
	    border-bottom: 1px solid $horizontal-line;
	    a {
			color: $post-navigation-text;
			font-weight: 300;
			text-decoration: none;
		}
	}

	.nav-indicator {
		text-transform: uppercase;
		font-size: 2rem;
		font-weight: 100;
		color: $post-navigation-text;
	}
	
	.nav-previous {
		float: left;
		width: 50%;
		padding-right: 10px;
		@media screen and (max-width: $prev-next-nav-small) {
			width: 100%;
			text-align: center;
		}

		&:hover .nav-indicator,
		&:hover a {
			color: $post-navigation-text-hover;
		}

		.nav-indicator {
			&:before {
				font-family: 'Fontawesome';
				content: '\f104';
				-webkit-font-smoothing: antialiased;
				padding-right: 10px;
				vertical-align: top;
			}
			a {
				font-weight: 300;
			}
		}

		h1 a {
			font-style: italic;
		}
	}

	.nav-next {
		float: right;
		text-align: right;
		width: 50%;
		padding-left: 10px;
		@media screen and (max-width: $prev-next-nav-small) {
			clear: both;
			width: 100%;
			margin-top: 15px;
			text-align: center;
		}

		&:hover .nav-indicator,
		&:hover a {
			color: $post-navigation-text-hover;
		}

		.nav-indicator:after {
			font-family: 'Fontawesome';
			content: '\f105';
			-webkit-font-smoothing: antialiased;
			padding-left: 10px;
			vertical-align: top;
		}

		h1 a {
			font-style: italic;
		}
	}
}

// Pagination
.paging-navigation {
	margin: 0 4rem;
	border-top: 1px solid $horizontal-line;
	padding-top: 1em;
	padding-bottom: 1em;
	list-style-type: none;
	ul {
	    margin: 0;
	    text-align: center;
	}
	li {
		display: inline-block;
	}
	a.page-numbers,
	span.page-numbers {
		display: inline-block;
	    padding: 0 .6em;
	    text-decoration: none;
		font-size: 14px;
		font-size: 1.4rem;
		font-weight: 400;
		font-family: $base-font;
		line-height: 25px;
		color: $button;
		border: 2px solid $button;
		@include border-radius( 4px );
		cursor: pointer;
		text-align: center;
		vertical-align: middle;
		&:hover {
			border-color: $button-hover;
			color: $button-hover;
		}
	}
	span.dots {
	    border: none;
	    color: $button;
	    padding-bottom: 8px;
	    &:hover {
	    	color: $button;
	    }
	}
	span.current {
	    border-color: $button-hover;
		color: $button-hover;
	}
}