#page {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	background: #fff;

	&:before {
		content: "";
		display: block;
		position: absolute;
		height: 100%;
		width: 300px;
		background: #333;
	}

	@media (max-width: @grid-float-breakpoint-max) {
		background: none;

		&:before {
			display: none;
		}

		> .container {
			background: #333;
		}
	}

	@media (min-width: @grid-float-breakpoint) {
		> .container > .row {
			display: flex;
		}
	}
}

#masthead {
	.hgroup {
		border-bottom: 1px solid rgba(255,255,255,.1);
	}

	.site-title {
		font-family: "Amatic SC";
		line-height: 50px;
		font-size: 50px;
		margin: 0;
		padding: 30px 0;
		text-align: center;

		@media (max-width: @grid-float-breakpoint-max) {
			border-bottom: 1px solid rgba(255,255,255,.1);
			padding: 15px 0;
		}
	}

	.site-title a {
		display: block;
	}

	.display-logo {
		line-height: 1;

		img {
			display: block;
			margin: 0 auto;
		}
	}

	.site-description {
		text-align: center;
		text-transform: uppercase;
		margin: -15px 0 30px;
		line-height: 20px;
		font-family: @font-family-condensed;
		font-size: @font-size-small;

		@media (max-width: @grid-float-breakpoint-max) {
			margin: 10px 0;
		}
	}
}

#secondary {
	position: relative;
	color: rgba(255,255,255,.5);
	padding: 0;

	@media screen and (max-width: @grid-float-breakpoint-max) {
		background: #333;

		#main-sidebar {
			border-right: 1px solid rgba(255,255,255,.1);
		}
	}

	a {
		color: #fff;
	}

	a:hover,
	a:active {
		color: @gray-light;
	}

	h1, h2, h3, h4, h5, h6 {
		color: rgba(255,255,255,.3);
	}

	ul, ol {
		margin: 0 0 0 15px;
		padding: 0;
	}

	.widget {
		padding: 25px;
		border-bottom: 1px solid rgba(255,255,255,.1);
		font-size: 14px;

		&:last-child {
			border-bottom: none;
		}
	}

	.widget-title {
		text-transform: uppercase;
		color: rgba(255,255,255,.3);
		font-family: @font-family-condensed;
		font-size: @font-size-small;
		line-height: 20px;
		margin: 0 0 10px;
	}

	.toggle-sidebar,
	.toggle-navigation {
		float: left;
		margin-top: -41px;
		width: 40px;
		height: 40px;
		border-color: rgba(255,255,255,.1);
		border-width: 0 1px 0 0;
		border-style: solid;
		color: #fff;
		outline: none !important;
	}

	.toggle-navigation {
		float: right;
		border-width: 0 0 0 1px;
	}
}

@media (max-width: @grid-float-breakpoint-max) {
	.row-offcanvas {
		overflow: hidden;
		position: relative;
		-webkit-transition: all 0.25s ease-out;
		-moz-transition: all 0.25s ease-out;
		transition: all 0.25s ease-out;

		&.active {
			overflow: visible;
		}
	}

	.row-offcanvas-left.active {
		left: 300px;
	}

	.sidebar-offcanvas {
		position: absolute;
		top: 0;
		width: 300px;
		background: #333;
	}

	.row-offcanvas-left .sidebar-offcanvas {
	    left: -300px;
	}
}

#primary {
	background: #fff;
	padding: 0;

	@media (min-width: @grid-float-breakpoint) {
		display: flex;
		flex-direction: column;

		#content {
			flex: 1;
		}
	}

	.page-title {
		padding: 20px 90px;
		margin: 0;
		border-bottom: 1px solid @gray-lighter;
		font-size: @font-size-base;
		font-family: @font-family-condensed;
		color: @gray-light;
		background: @gray-lighter;

		@media (max-width: @screen-md-max) {
			padding: 20px 125px;
		}

		@media (max-width: @screen-sm-max) {
			padding: 20px 60px;
		}

		@media (max-width: @screen-xs-max) {
			padding: 20px 30px;
		}
	}
}

#site-navigation {
	padding: 0;
	border-top: none;
	box-shadow: none;

	@media (max-width: @grid-float-breakpoint-max) {
		display: none;
	}

	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	li {
		border-bottom: 1px solid rgba(255,255,255,.1);
		display: block;

		&.fa:before {
			border-right: 1px solid rgba(255,255,255,.1);
			display: block;
			float: left;
			height: 40px;
			line-height: 40px;
			text-align: center;
			text-decoration: inherit;
			width: 40px;
			font-size: 14px;
		}
	}

	a {
		line-height: 40px;
		padding: 10px 25px;
		color: #fff;
		font-family: @font-family-base;
		font-size: @font-size-small;
		text-transform: uppercase;
	}

	a:hover,
	a:focus {
		color: rgba(255,255,255,.5);
	}

	.toggle-sidebar {
		float: left;
		color: #fff;
		width: 40px;
		height: 40px;
		border-right: 1px solid rgba(255,255,255,.1);
		outline: none !important;
	}

	.menu-item-has-children .fa,
	.page_item_has_children .fa {
		float: right;
		font-size: 14px;
		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		.transition(all .1s);

		&.open {
			.rotate(90deg);
		}
	}

	.sub-menu,
	.children {
		display: none;
		overflow: hidden;
		background: rgba(0,0,0,.1);

		li:last-child {
			border-bottom: none;
		}

		li:first-child {
			border-top: 1px solid rgba(255,255,255,.1);
		}

		.sub-menu,
		.children {
			background: rgba(0,0,0,.3);

			.sub-menu,
			.children {
				background: rgba(0,0,0,.5);
			}
		}
	}

	.current-menu-item,
	.current-menu-parent,
	.current-menu-ancestor,
	.current_page_item,
	.current_page_parent,
	.current_page_ancestor {
		> a { color: rgba(255,255,255,.5) }
	}

	.current-menu-parent,
	.current-menu-ancestor,
	.current_page_parent,
	.current_page_ancestor {
		> .fa {
			.rotate(90deg);

			&.open {
				.rotate(0deg);
			}
		}

		> .sub-menu,
		> .children {
			display: block;
		}
	}
}

.page-content {
	padding: 90px;
	border-bottom: 1px solid @gray-lighter;
}

.hentry {
	border-bottom: 1px solid @gray-lighter;
	padding: 80px 90px;
	position: relative;

	@media (max-width: @screen-md-max) {
		padding: 60px 125px;
	}

	@media (max-width: @screen-sm-max) {
		padding: 60px;
	}

	@media (max-width: @screen-xs-max) {
		padding: 30px;
	}

	.entry-thumbnail,
	.entry-media {
		margin: 30px 0 0;
		text-align: center;
	}

	.entry-title {
		margin-top: 0;
		text-align: center;
		font-size: @font-size-entry-title;

		@media (max-width: @screen-md-max) {
			font-size: @font-size-h2;
		}

		@media (max-width: @screen-sm-max) {
			font-size: @font-size-h3;
		}

		@media (max-width: @screen-xs-max) {
			font-size: @font-size-h3;
		}
	}

	.entry-title a {
		color: @brand-darken;

		&:hover, &:focus {
			color: @gray-dark;
		}
	}

	.entry-meta {
		text-align: center;
		color: @gray-light;
		font-size: @font-size-small;
		font-family: @font-family-condensed;
		text-transform: uppercase;
		letter-spacing: 1px;

		.sep {
			margin: 0 10px;
		}
	}

	.entry-content,
	.entry-summary {
		padding: 30px 0 0;

		@media (max-width: @screen-xs-max) {
			padding: 10px 0 0;
		}
	}

	.page-links {
		padding: 30px 0 0;
		font-family: @headings-font-family;

		a {
			color: @brand-warning;
		}

		a:hover, a:focus {
			color: @gray-dark;
		}
	}

	.tags-links {
		margin: 40px 0 0;

		@media (max-width: @screen-sm-max) {
			margin: 30px 0;
		}

		a {
			background: @gray-lighter;
			color: @gray-dark;
			padding: 5px 10px;
		}

		a:hover, a:focus {
			background: @gray-dark;
			color: @gray-lighter;
		}
	}
}

.pagination {
	padding: 30px 90px;
	position: relative;
	text-align: center;
	margin: 0;
	display: block;
	.clearfix();

	@media (max-width: @screen-sm-max) {
		padding: 30px 120px;
	}

	@media (max-width: @screen-xs-max) {
		padding: 30px;
	}

	.page-numbers {
		.btn();
		.btn-default();
	}

	.current,
	.dots {
		.btn-default();
		.opacity(.5);
	}

	.prev {
		float: left;
	}

	.next {
		float: right;
	}
}

.single {
	.hentry {
		border-bottom: none;
	}

	.author-info {
		padding: 30px 90px;
		position: relative;
		background: @gray-lighter;

		@media (max-width: @screen-md-max) {
			padding: 30px 120px;
		}

		@media (max-width: @screen-sm-max) {
			padding: 30px;
		}

		.author-avatar {
			position: absolute;
			top: 50%;
			margin-top: -40px;

			@media (max-width: @screen-xs-max) {
				position: inherit;
				margin: 0 0 30px;
			}
		}

		.author-description {
			padding-left: 120px;

			@media (max-width: @screen-xs-max) {
				padding-left: 0;
			}
		}

		.author-link {
			clear: both;
			display: block;
			margin: 10px 0 0;
		}
	}

	.post-navigation {
		background: @brand-primary;
		color: #fff;
	}

	.post-navigation .nav-links > div {
		padding: 30px 90px;
		display: block;

		@media (max-width: @screen-md-max) {
			padding: 30px 125px;
		}

		@media (max-width: @screen-sm-max) {
			padding: 30px 60px;
		}

		@media (max-width: @screen-xs-max) {
			padding: 30px;
		}
	}

	.post-navigation .nav-links > div:first-child {
		border-bottom: 1px solid rgba(255,255,255,.1);
	}

	.post-navigation .meta-nav {
		display: block;
		color: rgba(255,255,255,.5);
	}

	.post-title {
		font-size: @font-size-h3;
		font-family: @headings-font-family;
		color: #fff;

		@media (max-width: @screen-sm-max) {
			font-size: @font-size-large;
		}
	}
}

#comments {
	padding: 90px;
	border-bottom: 1px solid @gray-lighter;

	@media (max-width: @screen-md-max) {
		padding: 60px 125px;
	}

	@media (max-width: @screen-sm-max) {
		padding: 60px;
	}

	@media (max-width: @screen-xs-max) {
		padding: 30px;
	}

	.comments-title {
		margin: 0;
		font-size: @font-size-base;
		line-height: 20px;
		text-transform: uppercase;
	}

	.comment-list {
		margin: 0 0 40px;
		padding: 0;
		list-style: none;
	}

	.children {
		margin: 0 0 0 120px !important;
		padding: 0;
		list-style: none;
	}

	.comment {
		position: relative;
		border-bottom: 1px solid @gray-lighter;

		.comment-body {
			padding: 40px 0 40px 120px;

			@media (max-width: @screen-xs-max) {
				padding: 30px 0;
			}
		}

		.avatar {
			position: absolute;
			left: 0;

			@media (max-width: @screen-xs-max) {
				position: inherit;
				width: 48px;
				height: 48px;
				float: left;
				margin-right: 20px;
			}
		}

		.fn {
			font-family: @headings-font-family;
			font-size: @font-size-base * 1.25;
		}

		.says {
			display: none;
		}

		.comment-meta {
			margin: 0 0 10px;
		}

		.comment-metadata {
			position: absolute;
			right: 0;
			top: 40px;
			font-size: 11px;

			@media (max-width: @screen-xs-max) {
				position: inherit;
			}

			a {
				color: @gray-light;
			}

			a:hover, a:focus {
				color: @gray;
			}
		}
	}

	.children {
		margin: 40px 0 0;
		border-top: 1px solid @gray-lighter;

		.children .comment .comment-metadata {
			margin: 10px 0 0;
		    position: relative;
		    top: auto;
		}

		li:last-child {
			border-bottom: none;
			padding-bottom: 0;
		}
	}

	.trackback,
	.pingback {
		position: relative;
		padding: 40px 0;
		border-bottom: 1px solid @gray-lighter;
	}

	.edit-link {
		margin: 0 0 0 10px;
		padding: 0 0 0 10px;
		border-left: 1px solid @gray-lighter;
	}

	.comment-navigation {
		border-bottom: 1px solid @gray-lighter;
		margin: -25px 0 30px;
		padding: 0 0 15px;
		.clearfix();

		.screen-reader-text {
			display: none;
		}

		.nav-next {
			float: right;
		}
	}
}

#respond {

	.comment & {
		padding: 40px 0;
		border-top: 1px solid @gray-lighter;
	}

	#reply-title {
		margin: 0 0 20px;
		font-size: @font-size-base;
		line-height: 20px;
		text-transform: uppercase;

		small a {
			float: right;
			color: @gray;
		}
	}

	#commentform {
		margin: 0;

		.form-submit {
			margin: 0;
		}

		textarea {
			width: 100% !important;
			min-height: 120px;
			height: 120px;
			.box-sizing(border-box);
		}

		.form-allowed-tags {
			display: none;
		}

		.comment-form-comment label {
			display: none;
		}
	}
}

.site-info {
	text-align: center;
	padding: 30px;
	font-size: @font-size-small;
	background: @gray-lighter;

	a {
		color: @gray-dark;
	}
}

#disqus_thread {
	margin: 60px;
}

.search-form {
	margin: 0;

	.field {
		width: 100%;
		.box-sizing(border-box);
	}

	.assistive-text,
	.submit {
		display: none;
	}
}

.archive {
	.taxonomy-description {
		padding: 30px 0;
		margin: 0 60px;
		border-bottom: 1px solid @gray-lighter;
	}

	&.author .author-info {
		padding: 30px 0;
		margin: 0 90px;
		position: relative;
		border-bottom: 1px solid @gray-lighter;

		.author-avatar {
			position: absolute;
			top: 50%;
			margin-top: -40px;

			@media (max-width: @screen-xs-max) {
				position: inherit;
				margin: 0 0 30px;
			}
		}

		.author-description {
			padding-left: 120px;

			@media (max-width: @screen-xs-max) {
				padding-left: 0;
			}
		}
	}
}
