/*---------------------------------------------------------------------------------

	Theme Name: Branches
    Text Domain: branches
	Theme URI: http://www.flohauck.de/themes/branches/
	Version: 1.0
	Description: Branches is a simple, minimalistic magazine/blog theme. It has only a few options but that should be enough. Its fully retina ready and dont need a single image or additional javascript file for the layout itself, so its very lightweight.
	Tags: blog, featured-images, sticky-post, theme-options, threaded-comments, translation-ready, custom-menu, right-sidebar, threaded-comments, one-column, two-columns
	Author: Flo Hauck
	Author URI: http://www.flohauck.de
	License: GNU General Public License version 2.0
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	
	All files, unless otherwise stated, are released under the GNU General Public License
	version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

-----------------------------------------------------------------------------------

	0.	CSS Reset & Clearfix
	1.	Document Setup
	2.  Structure
	3.	Posts / Pages
	4.	Sidebar
	5.	Comments

----------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------- */
/*	0. CSS Reset
/* -------------------------------------------------------------------------------- */

html, body { margin:0; padding:0;}

h1, h2, h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	font-weight:normal;
	font-style:normal;
	font-size:100%;
	line-height:1;
	font-family:inherit;
	text-align:left;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

ol, ul {
	list-style:none;
}

blockquote:before, blockquote:after {
	content:"";
}

a { outline:none; }

input[type=search] {
   -moz-appearance:none;
   -webkit-appearance:none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}


/* -------------------------------------------------------------------------------- */
/*	1. Document setup
/* -------------------------------------------------------------------------------- */


$colorBlack: #1f1f1f;
$colorMiddleGrey: #aaaaaa;
$colorBorder: #f0f0f0;

html { 
	-webkit-text-size-adjust: 100%; 
	font-size: 14px;
}

body {
	margin: 0;
	padding: 0;
	border: none;
	color: #1f1f1f;
    font-family: 'Open Sans', sans-serif; //400 -> regular	//600 -> semibold	//700 -> bold	//800 -> extra bold
    //font-family: 'Noto Serif', serif;
	font-size: 18px;
	background-color: #FFFFFF;
}

body * { -webkit-font-smoothing: subpixel-antialiased; }

body a {
	text-decoration: none;
}

body a:hover {
	text-decoration: none;
}

* { 
	box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
}

img {
	max-width: 100%;
	height: auto;
}

.hidden { display: none; }
.clear { clear: both; }
.fleft { float: left; }
.fright { float: right; }

::selection {
	background: #444;
	color: #FFF;
}

::-webkit-input-placeholder { color: #999; }
:-ms-input-placeholder { color: #999; }


/* -------------------------------------------------------------------------------- */
/*	2.	Structure
/* -------------------------------------------------------------------------------- */

#outer-wrapper {
	width: 100%;
	background-color: #FFFFFF;
}

#wrapper {
	width: 94%;
	max-width: 1160px;
	margin: 0 auto;
	overflow-x: hidden;
}

header {
	position: relative;
	padding: 65px 0 55px 0;
	
	.social {
		position: absolute;
		right: 0;
		top: 25px;
		font-size: 0.85rem;
		line-height: 0.85rem;
		color: $colorMiddleGrey;
		text-transform: uppercase;
		text-align: right;
		
		@media only screen and (max-width: 520px) {
			text-align: center;
			right: auto;
			left: 0;
			width: 100%;
		}
		
		a {
			color: inherit;
			margin-left: 15px;
			display: inline-block;
			
			@media only screen and (max-width: 520px) {
				margin-left: 7px;
				margin-right: 7px;	
			}
			
			&:hover {
				color: $colorBlack;
			}
		}
	}
}

#logo-maintitle {
	font-size: 3.75rem;
	line-height: 4.25rem;
	font-weight: 800;
	font-style: italic;
	color: $colorBlack;
	text-align: center;
	text-transform: uppercase;
	
	a {
		color: inherit;
	}
}

#logo-subtitle {
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: $colorMiddleGrey;
	text-align: center;
	
	a {
		color: inherit;
	}
}

#logo-img {
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
	display: block;
}

nav {
	border-top: 1px solid $colorBorder;
	border-bottom: 1px solid $colorBorder;
	position: relative;
	z-index: 9;
	height: 50px;
	
	.burger-menu {
		position: relative;
		padding-left: 35px;
		text-transform: uppercase;
		font-weight: 600;
		color: $colorBlack;
		margin-top: 11px;
		display: none;
	}
	.burger-menu:before {
		content: "";
		position: absolute;
		left: 0;
		top: 3px;
		width: 25px;
		height: 4px;
		background: black;
		box-shadow: 0 8px 0 0 black, 0 16px 0 0 black;
	}
	
	@media only screen and (max-width: 820px) {
		text-align: center;	
		
		.burger-menu {
			display: inline-block;
		}
	}
	
	ul {
		width: 100%;
		text-align: center;
		font-size: 0;
		line-height: 0;
		
		@media only screen and (max-width: 820px) {
			display: none;
			position: absolute;
			top: 48px;
			background-color: $colorBorder;
			width: 100%;
			padding: 10px 0 !important;
			
			li {
				display: block;
				width: 100%;
				line-height: 2.2rem !important;
				
				ul {
					position: relative !important;
					display: block !important;
					left: 0 !important;
					top: auto !important;
					width: 100% !important;
					transform: translateX(0) !important;
					-moz-transform: translateX(0) !important;
					-ms-transform: translateX(0) !important;
					-webkit-transform: translateX(0) !important;
					padding-top: 0 !important;
					padding-bottom: 0 !important;
				}
			}
		}
		
		
		li {
			font-size: 1rem;
			line-height: 48px;
			display: inline-block;
			font-weight: 600;
			color: $colorMiddleGrey;
			padding: 0 15px;
			position: relative;
			
			@media only screen and (max-width: 980px) {
				padding: 0 8px;
			}
			
			&.menu-item-has-children,
			&.page_item_has_children {
				a {
					padding-right: 20px;
					
					&:after {
						top: 50%;
						right: 15px;
						margin-top: -2px;
						border: solid transparent;
						content: " ";
						height: 0;
						width: 0;
						position: absolute;
						pointer-events: none;
						border-color: rgba(170, 170, 170, 0);
						border-top-color: #aaaaaa;
						border-width: 5px;
						margin-left: -5px;
					}
				}
				
				ul {
					
					padding: 10px 0;
					
					li {
						
						a {
							padding: 5px 10px;
							font-weight: normal;
							
							&:after {
								display: none;
							}
						}
						
						ul {
							margin: 0;
							padding: 0;
						}
					}
				}
			}
			
			a {
				display: block;
				color: inherit;
				padding: 0 10px;
			}
			
			ul
			{
				display:none;
				position:absolute;
				top:100%;
				left:50%;
				background: $colorBorder;
				padding:0;
				width: 200px;
				transform: translateX(-50%);
				-moz-transform: translateX(-50%);
				-ms-transform: translateX(-50%);
				-webkit-transform: translateX(-50%);
				
				&::after {
					bottom: 100%;
					left: 50%;
					border: solid transparent;
					content: " ";
					height: 0;
					width: 0;
					position: absolute;
					pointer-events: none;
					border-color: rgba(240, 240, 240, 0);
					border-bottom-color: #f0f0f0;
					border-width: 6px;
					margin-left: -6px;
				}
				
				li {
					ul {
						position: relative;
						display: block;
						top: auto;
						left: auto;
						width: auto;
						transform: translateX(0);
						-moz-transform: translateX(0);
						-ms-transform: translateX(0);
						-webkit-transform: translateX(0);
						margin: 0;
					}
				}
			}
			
			ul li
			{
				float:none;
				display: block;
				text-align: left;
			}
			
			ul a
			{
				line-height:120%;
				padding:10px 15px
			}
			
			ul ul
			{
				top:0;
				left:100%
			}
			
			&:hover > ul
			{
				display:block;
			}
		}
	}
}

footer {
	margin-top: 60px;
	width: 100%;
	background-color: $colorBorder;
	padding: 60px 0;
	
	.footer-inner {
		width: 94%;
		max-width: 1160px;
		margin: 0 auto;
		position: relative;
	}
	
	.theme-linklove {
		float: right;
		font-size: 0.9rem;
		line-height: 0.9rem;
		font-family: 'Open Sans', sans-serif;
		color: $colorMiddleGrey;
		text-align: right;
		
		a {
			color: $colorMiddleGrey;
			
			&:hover {
				text-decoration: underline;
			}
		}
	}
	
	.social {
		position: absolute;
		left: 50%;
		top: 0;
		font-size: 0.85rem;
		line-height: 0.85rem;
		color: $colorMiddleGrey;
		text-transform: uppercase;
		text-align: center;
		transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		
		a {
			color: inherit;
			margin-left: 7px;
			margin-right: 7px;
			display: inline-block;
			
			&:hover {
				color: $colorBlack;
			}
		}
	}
	
	.theme-copyright {
		float: left;
		font-size: 0.9rem;
		line-height: 0.9rem;
		font-family: 'Open Sans', sans-serif;
		color: $colorMiddleGrey;
		text-align: left;
		
		a {
			color: $colorMiddleGrey;
			
			&:hover {
				text-decoration: underline;
			}
		}
	}
}

/* -------------------------------------------------------------------------------- */
/*	3. Posts / Pages
/* -------------------------------------------------------------------------------- */

.sticky {
	
	font-size: 0;
	line-height: 0;
	width: 100%;
	margin-top: 40px;
	position: relative;
	
	&::before {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 15%;
		left: 0;
		top: 0;
		background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
		z-index: 1;
		opacity: 0.3;
		-moz-opacity: 0.3;
		-webkit-opacity: 0.3;
		-ms-opacity: 0.3;
	}
	
	&::after {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 35%;
		left: 0;
		bottom: 0;
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
		z-index: 1;
		opacity: 0.5;
		-moz-opacity: 0.5;
		-webkit-opacity: 0.5;
		-ms-opacity: 0.5;
	}
	
	img {
		width: 100%;
		height: auto;
		display: block;
		position: relative;
		z-index: 0;
	}	 
	
	h2,
	h1 {
		position: absolute;
		text-align: center;
		bottom: 30px;
		font-size: 2.857rem;
		line-height: 3.285rem;
		color: #FFFFFF;
		font-weight: 800;
		z-index: 2;
		width: 80%;
		max-width: 420px;
		left: 50%;
		transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		display: block;
		
		@media only screen and (max-width: 720px) {
			font-size: 2.257rem;
			line-height: 2.685rem;
		}
		
		@media only screen and (max-width: 500px) {
			font-size: 1.857rem;
			line-height: 2.285rem;
		}
		
		a {
			color: inherit;
			
			&:hover {
				text-decoration: underline;
			}
		}
	}
}


.post-info-right-top {
	position: absolute;
	color: #FFFFFF;
	font-size: 0.725rem;
	line-height: 0.725rem;
	text-transform: uppercase;
	right: 20px;
	top: 20px;
	z-index: 2;
	
	@media only screen and (max-width: 520px) {
		right: 10px;
		top: 10px;
	}
}

.post-info-left-top {
	position: absolute;
	color: #FFFFFF;
	font-size: 0.725rem;
	line-height: 0.725rem;
	text-transform: uppercase;
	left: 20px;
	top: 20px;
	z-index: 2;
	
	@media only screen and (max-width: 520px) {
		left: 10px;
		top: 10px;
	}
}

.post-info-left-bottom {
	position: absolute;
	color: #FFFFFF;
	font-size: 0.725rem;
	line-height: 0.725rem;
	text-transform: uppercase;
	left: 20px;
	bottom: 20px;
	z-index: 2;
	
	@media only screen and (max-width: 520px) {
		left: 10px;
		bottom: 10px;
	}
	
	a {
		color: inherit;
	}
}

#post-area {
	width: 76%;
	float: left;
	padding-right: 40px;
	
	@media only screen and (max-width: 820px) {
		padding-right: 0;
		width: calc(100% + 40px);
		margin-left: -20px;
		font-size: 0;
		line-height: 0;
		
		&.single-post-wrapper {
			width: 100%;
			margin-left: 0;
		}
		
		.pagination,
		.page-links {
			width: calc(100% - 40px);
			margin-left: auto;
			margin-right: auto;
		}
	}
	
	@media only screen and (max-width: 520px) {
		margin-bottom: 40px;	
	}
	
	article {
		
		margin-top: 40px;
		
		.teaser-image {
			float: left;
			width: 42%;
			font-size: 0;
			line-height: 0;
			position: relative;
			
			&::before {
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				height: 25%;
				left: 0;
				top: 0;
				background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
				z-index: 1;
				opacity: 0.4;
				-moz-opacity: 0.4;
				-webkit-opacity: 0.4;
				-ms-opacity: 0.4;
			}
			
			&::after {
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				height: 35%;
				left: 0;
				bottom: 0;
				background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
				z-index: 1;
				opacity: 0.5;
				-moz-opacity: 0.5;
				-webkit-opacity: 0.5;
				-ms-opacity: 0.5;
			}
			
			img {
				width: 100%;
				height: auto;
			}
			
			a.teaser-image-link {
				
				display: block;
				overflow: hidden;
				
				img {
					-webkit-transition: 200ms ease-out;
					-moz-transition: 200ms ease-out;
					-o-transition: 200ms ease-out;
					transition: 200ms ease-out;
				}
				
				&:hover {
					img {
						transform: scale(1.05);
						-moz-transform: scale(1.05);
						-webkit-transform: scale(1.05);
						-ms-transform: scale(1.05);
					}
				}
			}
		}
		
		.teaser-content {
			float: left;
			width: 58%;
			padding-left: 40px;
			font-size: 1rem;
			line-height: 1.428rem;
			font-family: 'Noto Serif', serif;
			
			&.full-width {
				padding-left: 0;
				float: none;
				width: 100%;
			}
			
			p {
				font-size: 1rem;
				line-height: 1.728rem;
				margin: 1rem 0;
			}
			
			
			h2 {
				font-size: 2rem;
				font-weight: 800;
				color: $colorBlack;
				line-height: 2.428rem;
				font-family: 'Open Sans', sans-serif;
				margin-top: -0.55rem;
				
				@media only screen and (max-width: 720px) {
					font-size: 1.8rem;
					line-height: 2.228rem;
				}
				
				@media only screen and (max-width: 500px) {
					font-size: 1.6rem;
					line-height: 2.028rem;
				}
				
				a {
					color: inherit;
					
			
					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
		
		@media only screen and (max-width: 820px) {
			display: inline-block;
			width: 50%;	
			vertical-align: top;
			padding-left: 20px;
			padding-right: 20px;
			
			.teaser-image {
				width: 100%;
				float: none;
				margin-bottom: 30px;
			}
			
			.teaser-content {
				width: 100%;
				float: none;
				padding-left: 0;
			}
		}
		
		@media only screen and (max-width: 520px) {
			display: block;
			width: 100%;
		}
		
	}
	
	
	&.fullwidth {
		padding-right: 0;
		width: calc(100% + 40px);
		margin-left: -20px;
		font-size: 0;
		line-height: 0;
		
		.page-title {
			margin-bottom: 0;
		}
		
		&.single-post-wrapper {
			width: 100%;
			margin-left: 0;
		}
		
		article {
			display: inline-block;
			width: 33.3333%;
			vertical-align: top;
			padding-left: 20px;
			padding-right: 20px;
			
			@media only screen and (max-width: 820px) {
				width: 50%;	
			}
			
			.teaser-image {
				width: 100%;
				float: none;
				margin-bottom: 30px;
			}
			
			.teaser-content {
				width: 100%;
				float: none;
				padding-left: 0;
			}
		}
		
		.pagination,
		.page-links {
			margin-left: 20px;
			margin-right: 20px;	
		}
	}
}

.read-more {
	font-family: 'Open Sans', sans-serif;
	position: relative;
	
	
	&:hover {
		text-decoration: underline;
	}
}

.page-title {
	text-align: center;
	font-size: 2.857rem;
	line-height: 3.285rem;
	color: $colorBlack;
	font-weight: 800;
	margin: 40px auto 60px auto;
	max-width: 420px;
	display: block;
}

.wp-caption-text.gallery-caption {
	font-size: 0.9rem;
	line-height: 1.2rem;
	color: $colorMiddleGrey;
}

#single-post {
	
	.post-info {
		font-size: 0.85rem;
		line-height: 0.85rem;
		text-align: center;
		border-top: 1px solid $colorBorder;
		border-bottom: 1px solid $colorBorder;
		padding: 8px 0;
		color: $colorMiddleGrey;
		margin-top: -0.5rem;
		margin-bottom: 1.5rem;
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
		
		.bypostauthor {
			font-weight: bold;
		}
	}
	
	h1 {
		text-align: center;
		font-size: 2.857rem;
		line-height: 3.285rem;
		color: $colorBlack;
		font-weight: 800;
		margin: 40px auto 40px auto;
		max-width: 420px;
		display: block;
		
		@media only screen and (max-width: 720px) {
			font-size: 2.657rem;
			line-height: 3.085rem;
		}
		
		@media only screen and (max-width: 500px) {
			font-size: 2.457rem;
			line-height: 2.885rem;
		}
	}
	
	h2 {
		text-align: center;
		font-size: 2.457rem;
		line-height: 2.885rem;
		color: $colorBlack;
		font-weight: 800;
		margin: 2.5rem auto;
		max-width: 420px;
		display: block;
		
		@media only screen and (max-width: 720px) {
			font-size: 2.357rem;
			line-height: 2.785rem;
		}
		
		@media only screen and (max-width: 500px) {
			font-size: 2.257rem;
			line-height: 2.685rem;
		}
	}
	
	h3 {
		text-align: center;
		font-size: 2.057rem;
		line-height: 2.485rem;
		color: $colorBlack;
		font-weight: 800;
		margin: 2.5rem auto;
		max-width: 420px;
		display: block;
		
		@media only screen and (max-width: 720px) {
			font-size: 1.957rem;
			line-height: 2.385rem;
		}
		
		@media only screen and (max-width: 500px) {
			font-size: 1.857rem;
			line-height: 2.285rem;
		}
	}
	
	h4 {
		text-align: center;
		font-size: 1.657rem;
		line-height: 2.085rem;
		color: $colorBlack;
		font-weight: 800;
		margin: 2.5rem auto;
		max-width: 420px;
		display: block;
		
		@media only screen and (max-width: 720px) {
			font-size: 1.557rem;
			line-height: 1.985rem;
		}
		
		@media only screen and (max-width: 500px) {
			font-size: 1.457rem;
			line-height: 1.885rem;
		}
	}
	
	h5 {
		text-align: center;
		font-size: 1.257rem;
		line-height: 1.685rem;
		color: $colorBlack;
		font-weight: 800;
		margin: 2.5rem auto;
		max-width: 420px;
		display: block;
		
		@media only screen and (max-width: 720px) {
			font-size: 1.157rem;
			line-height: 1.585rem;
		}
		
		@media only screen and (max-width: 500px) {
			font-size: 1.057rem;
			line-height: 1.485rem;
		}
	}

	
	h6 {
		text-align: center;
		font-size: 1rem;
		line-height: 1.4rem;
		color: $colorBlack;
		font-weight: 800;
		margin: 2.5rem auto;
		max-width: 420px;
		display: block;
		
		
		@media only screen and (max-width: 720px) {
			font-size: 0.957rem;
			line-height: 1.3rem;
		}
		
		@media only screen and (max-width: 500px) {
			font-size: 0.857rem;
			line-height: 1.2rem;
		}
	}
		
	.sticky {
		h1 {
			color: #FFFFFF;
			margin: 0;
		}
	}
	
}

.entry {
	margin: 0 auto;
	width: 100%;
	max-width: 960px;
	font-size: 1rem;
	line-height: 1.728rem;
	font-family: 'Noto Serif', serif;
	
	p,
	ul {
		font-size: 1rem;
		line-height: 1.728rem;
		margin: 1.5rem 0;		
	}
	
	a {
		color: inherit;
		text-decoration: underline;
		
		&:hover {
			text-decoration: none;
		}
	}
	
	blockquote {
		position: relative;
		border-left: 3px solid $colorBorder;
		padding-left: 17px;
		font-style: italic;
		opacity: 0.8;
		-moz-opacity: 0.8;
		-webkit-opacity: 0.8;
		-ms-opacity: 0.8;
		
		p,
		ul {
			font-style: italic;
		}
	}
	
	cite {

	}
	
	pre {
		width: 100%;
		overflow: auto;
		background-color: $colorBorder;
		padding: 20px;
	}
	
	ul,
	ol {
		li {
			font-size: 1rem;
			line-height: 1.728rem;	
		}
	}
	
	ul {
		margin-left: 14px;
		li {
			list-style-type: disc;
		}
	}
	
	ol {
		margin-left: 14px;
		li {
			list-style-type: decimal;
		}
	}
	
	.alignleft {
		float: left;
		margin: 5px 40px 25px 0;
		
		&.wp-caption {
			margin-bottom: 0;
		}
	}
	
	.alignright {
		float: right;
		margin: 5px 0 25px 40px;
		
		&.wp-caption {
			margin-bottom: 0;
		}
	}
	
	.aligncenter {
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	
	p.wp-caption-text {
		text-align: center;
		margin-top: 0.5rem;
		color: $colorMiddleGrey;
		font-size: 0.9rem;
		line-height: 1.2rem;
	}
	
	.size-medium,
	.wp-caption {
		max-width: 100% !important;
		height: auto !important;
	}
}

.pagination,
.page-links {
	
	margin-top: 40px;
	
	.nav-links {
		line-height: 0;
		font-size: 0;
		text-align: center;
		padding-top: 11px;
		position: relative;
	}
	
	.screen-reader-text {
		display: none;
	}	
	
	
	.page-numbers {
		display: inline-block;
		font-size: 1rem;
		line-height: 1rem;
		border: 1px solid $colorBorder;
		padding: 5px 8px;
		margin: 0 5px;
		color: $colorMiddleGrey;
		
		&.next {
			padding: 0;
			border: 0;
			padding-top: 5px;
			margin: 0;
			position: absolute;
			right: 0;
		}
		
		&.prev {
			position: absolute;
			left: 0;
			padding: 0;
			border: 0;
			padding-top: 5px;
			margin: 0;
		}
		
		&.current {
			background-color: $colorBorder;
			color: $colorBlack;
		}
		
		&:hover {
			color: $colorBlack;
		}
	}
}

.tag-list {
	font-size: 0.9rem;
	line-height: 1.2rem;
	font-family: 'Open Sans', sans-serif;
	color: $colorMiddleGrey;
	
	a {
		color: inherit;
		
		&:hover {
			text-decoration: underline;
		}
	}
}

/* -------------------------------------------------------------------------------- */
/*	4. Sidebar
/* -------------------------------------------------------------------------------- */

#sidebar {
	width: 24%;
	float: right;	
	font-size: 0;
	line-height: 0;
	
	@media only screen and (max-width: 820px) {
		float: none;
		width: calc(100% + 40px);
		margin-left: -20px;
	}
}

.widget {
	margin-top: 40px;
	
	@media only screen and (max-width: 820px) {
		display: inline-block;
		width: 50%;
		padding: 0 20px;	
		vertical-align: top;
	}
	
	@media only screen and (max-width: 520px) {
		display: block;
		width: 100%;
	}
}

.widget-title {
	font-size: 1.471rem;
	line-height: 1.614rem;
	color: $colorMiddleGrey;
	font-weight: 500;
	margin-top: 0.5rem;
	border-bottom: 1px solid $colorBorder;
	padding-bottom: 0.2rem;
	font-family: 'Open Sans', sans-serif;
}

.widget-content {
	
	font-size: 1rem;
	line-height: 1.628rem;
	font-family: 'Noto Serif', serif;
			
	ul,
	p {
		margin: 1rem 0;
		font-size: 1rem;
		line-height: 1.628rem;
		color: $colorMiddleGrey;
		
		a {
			color: inherit;
			
			&:hover {
				color: $colorBlack;
			}
		}
		
		ul.children,
		ul.sub-menu {
			margin-top: 0;
			margin-left: 20px;
			margin-bottom: 0;
		}
	}
	
	li {
		font-size: 1rem;
		line-height: 1.628rem;	
		position: relative;
		padding-left: 15px;	
		
		&:before {
			content: '» ';
			display: block;
			position: absolute;
			left: 0;
		}
	}
}

#wp-calendar {
	width: 100%; 
	
	caption { 
		text-align: center; 
		color: #333; 
		font-size: 12px; 
		margin-top: 15px; 
		margin-bottom: 15px; 
	}
	
	thead { 
		font-size: 10px; 
		
		th { 
			border: 1px solid $colorBorder; 
			background-color: $colorBorder; 
			text-align: center; 
			padding: 8px 0;
		}
	}
	
	tbody { 
		color: $colorMiddleGrey; 
		
		td {
			border: 1px solid $colorBorder; 
			text-align: center; 
			padding: 8px 0;
		}
		
		.pad { 
			background: none; 
		}
		
		a {
			color: $colorBlack;
			
			&:hover {
				text-decoration: underline;
			}
		}
	}
	
	tfoot {
		#next { 
			font-size: 10px; 
			text-transform: uppercase; 
			text-align: right; 
		}
		
		#prev { 
			font-size: 10px; 
			text-transform: uppercase; 
			padding-top: 10px; 
			text-align: left;
		}
		
		td {
			border: 1px solid $colorBorder; 
			background-color: $colorBorder; 
			text-align: center; 
			padding: 8px 10px;
		}
	}
	
	a {
		color: inherit;
		
		&:hover {
			text-decoration: underline;
		}
	}
}

.tagcloud {
	margin: 1rem 0;
	
	a {
		color: $colorMiddleGrey;
		
		&:hover {
			color: $colorBlack;
		}
	}
	
}

.widget_search {
	#searchform {
		label {
			display: block;
			padding: 5px 0;
			margin-top: 10px;
			color: $colorMiddleGrey;
		}
		input[type=text] {
			width: calc(100% - 80px);
			border: 1px solid $colorBorder;
			font-size: 1rem;
			line-height: 1rem;
			padding: 5px 10px;
			float: left;
			height: 34px;
			font-family: 'Open Sans', sans-serif;
		}
		input#searchsubmit {
			float: left;
			width: 80px;
			background-color: $colorBorder;
			height: 34px;
			border: 0;
			font-family: 'Open Sans', sans-serif;
			color: $colorBlack;
			font-size: 1rem;
			line-height: 32px;
			cursor: pointer;
		}
	}
}

/* -------------------------------------------------------------------------------- */
/*	5. Comments
/* -------------------------------------------------------------------------------- */

.respond-container {
	border-top: 1px solid $colorBorder;
	margin-top: 20px;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.comment-respond {
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
}

.comments-container {
	border-top: 1px solid $colorBorder;
	margin-top: 40px;	
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.comment-meta {
	font-size: 0.9rem;
	line-height: 1.2rem;
	font-family: 'Open Sans', sans-serif;
	color: $colorMiddleGrey;
	
	a {
		color: inherit;
		
		&:hover {
			text-decoration: underline;
		}
	}
}

#commentform {
	label {
		display: block;
		font-family: 'Open Sans', sans-serif;
		font-size: 1rem;
		color: $colorMiddleGrey;
		line-height: 1rem;
		padding-bottom: 5px;
	}
	input,
	textarea {
		border: 1px solid #d7d7d7;
		font-size: 1rem;
		line-height: 1rem;
		padding: 5px 10px;
		display: block;
		height: 34px;
		font-family: 'Open Sans', sans-serif;
		width: 100%;
		margin-bottom: 25px;
	}
	
	textarea {
		height: 160px;
		padding-top: 10px;
		padding-bottom: 10px;
		line-height: 1.5rem;
	}
	
	#submit {
		float: right;
		background-color: $colorBlack;
		color: #FFFFFF;
		font-weight: 600;
		border: 0;
		height: auto;
		padding: 10px 20px;
		width: auto;
		cursor: pointer;
	}
	
	.form-submit {
		&::after {
			content: '';
			clear: both;
			display: block;
			font-size: 0;
			line-height: 0;
		}
	}
	
	.logged-in-as {
		border-bottom: 1px solid $colorBorder;
		margin-bottom: 20px;
		padding-bottom: 20px;
		text-align: center;
		font-size: 1rem;
		color: $colorMiddleGrey;
		
		a {
			color: inherit;
		}
	}
}

#reply-title {
	a {
		color: inherit;
		
	}
	
	small {
		display: block;
		text-align: center;
		font-size: 1.1rem;
		line-height: 1.5rem;
		margin-top: 20px;
	}
}

.commentlist {
	
	li {
		border-top: 1px solid $colorBorder;
		margin: 20px 0;
		padding-top: 20px;
		
		.children {
			li {
				padding-left: 80px;
				
				img.avatar {
					width: 30px !important;
					height: 30px !important;
					
				}
				
				.comment-inner {
					width: calc(100% - 30px);
				}
				
				.children {
					li {
						padding-left: 50px;
					}
				}
			}
		}
	}
	
	img.avatar {
		float: left;
		width: 60px !important;
		height: 60px !important;
		margin-top: 6px;
	}
	.comment-inner {
		float: left;
		width: calc(100% - 60px);
		text-align: left;
		padding-left: 20px;
		
		h4 {
			font-size: 1.1rem !important;
			line-height: 1.4rem !important;
			margin: 0 !important;
			text-align: left !important;
			max-width: none !important;
			font-weight: 600 !important;
			color: $colorBlack !important;
			
			a {
				color: inherit;
			}
		}
	
	}
	
	.comment-content {
		
		font-size: 1rem;
		line-height: 1.728rem;
		font-family: 'Noto Serif', serif;
		
		p,
		ul {
			font-size: 1rem;
			line-height: 1.728rem;
			margin: 1.5rem 0;		
		}
	}
	
	.comment-header {
		margin-bottom: -1rem;
	}
	
	.comment {
		&:after {
			content: '';
			clear: both;
			display: block;
			font-size: 0;
			line-height: 0;
		}
	}
}