/*
Theme Name: BirdFIELD
Theme URI: http://www.sysbird.jp/birdfield-theme/
Description: BirdFIELD is a responsive web design theme. Feature fullscreen and parallax custom image, and fixed header. The homepage displays with tagged news and the grid posts. You can choose the text color, link color, header background color by theme options. You can also add a slider to the header image.
Author: Sysbird
Author URI: https://profiles.wordpress.org/sysbird/
Version: 1.12
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, blog
Text Domain: birdfield

This theme, like WordPress, is licensed under the GPL.
*/

@import "compass";
@import "compass/reset";

// variable
$background-color: #FFF;
$text-color: #222327;
$link-color: #1c4bbe;
$hover-background-color: #F5F5F5;
$header-color: #79a596;
$border-color: #E6E6E6;
$meta-color: #999;
$line-height: 1.7;

/*------------------------------
Font Awesome
-----------------------------*/
@font-face {
	font-family: 'FontAwesome';
	src: url("font-awesome/fontawesome-webfont.eot?v=4.7.0");
	src: url("font-awesome/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("font-awesome/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("font-awesome/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("font-awesome/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
	font-weight: normal;
	font-style: normal;
}

@mixin font-awesome() {
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Link
--------------------------------------------- */
a {
	color: $link-color;
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

/* Structure
--------------------------------------------- */
body {
	margin:0;
	padding:0;
	border:0;
	width:100%;
	background-color: #000;
}

.container {
	width: 96%;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

#header,
#content,
#footer {
			width: 100%;
}

/* Adjust footer
--------------------------------------------- */
html, body {
	margin: 0;
	padding: 0;
}

.wrapper {
	min-height: 100vh;
	display: flex;
	flex-flow: column nowrap;
}

#content {
	flex-grow: 1;
}

/* Wrapper
-------------------------------------------------------------- */
.wrapper {
	font-family:  'Raleway', 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial','Hiragino Sans', YuGothic, 'Yu Gothic', Meiryo, 'MS PGothic';
	color: $text-color;
	background-color: $background-color;
	overflow: hidden;

	* {
		@include box-sizing( border-box );
	}
}

/* Header
-------------------------------------------------------------- */
#header {
	color: #FFF;
	background-color: $header-color;
	z-index: 4;
	transition-property:min-height;
	transition-duration:.3s;

	#branding {
		#site-title {
			margin: 0 1em 0 0;
			padding: 0;
			font-size: 2rem;
			font-weight: normal;
			line-height: 1;

			a {
				display: block;
				padding: 0.4em 0;
				color: #FFF;

				&:hover {
					text-decoration: none;
				}
			}
		}

		#site-description {
			display: none;
			margin: 0;
			color: #FFF;
		}
	}

	img {
		max-width: 100%;
		vertical-align: bottom;
		margin-bottom: #{$line-height /2}rem;
	}
}

.no-title #header #site-title,
.no-title #header #site-description {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
}

.no-title.no-nav-menu #header {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
}

/* Menu
-------------------------------------------------------------- */
#menu-wrapper {

	.menu {
		#small-menu {
			position: absolute;
			top: 0;
			right: 0;
			display: block;
			box-sizing: content-box;
			width: 2rem;
			padding: 0;
			padding-top: 18px;
			padding-right: .75rem;
			padding-bottom: 30px;
			padding-left: .75rem;
			-webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
			transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
			-webkit-transform: translate3d(0, 0, 0);
					transform: translate3d(0, 0, 0);
			border: 0;
			outline: 0;
			background-color: transparent;

			.icon {
				position: relative;
				display: block;
				margin-top: 10px;

	
				&,
				&:before,
				&:after {
					width: 100%;
					height: 2px;
					-webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
					transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
					background-color: #FFF;
				}
	
				&:before,
				&:after {
					position: absolute;
					top: -10px;
					left: 0;
					content: ' ';
				}
				
				&:after {
					top: 10px;
				}
			}
			
			&.current .icon {
				background-color: transparent;
	
				&:before,
				&:after {
					top: 0;
				}
	
				&:before {
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				}
				
				&:after {
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
				}
			}
		}
	
		ul#menu-primary-items {
			margin: 0;
			padding: 0;
			display: none; /* visibility will be toggled with jquery */

			li {
				list-style: none;

				a {
					padding: #{$line-height /2}rem;
					display: block;
					color: #FFF;
					text-decoration: none;
					line-height: 1.2;
					border-top: dotted 1px #FFF;
				}

				ul {
					padding-left: #{$line-height /2}rem;
				}
			}
		}

		.current-menu-item > a,
		.current-menu-ancestor > a {
			font-weight: bold;
		}
	}
}

.no-title #menu-wrapper {
	margin-top: 0;
}

/* thin header for scroll
--------------------------------------------- */
#header.mini {
	min-height: 60px;
	background-color: rgba( $header-color, 0.9 );

	#menu-wrapper .menu ul#menu-primary-items > li > a {
		height: 60px;
		padding: 20px #{$line-height /2}rem;
	}
}

/* Posts
--------------------------------------------- */
#content {
	.container {
		padding-bottom: #{$line-height *2}rem;
	}

	.content-header {
		margin: #{$line-height}rem 0;

		.content-title {
			color: $header-color;
			margin: 0;
		}
	}

	.hentry {
		width: 100%;
		word-wrap: break-word;
		@include clearfix;

		.entry-eyecatch {
			margin: 0;

			img {
				max-width: 100%;
				border-radius: 4px 4px 0 0;
			}
		}

		.entry-header {
			margin: #{$line-height}rem 0;
			line-height: 1.4;
			position: relative;

			.entry-title {
				color: $header-color;
				font-size: 2.4rem;
				font-weight: normal;
				margin: 0 0 0.2em 0;
				line-height: 1.2;
				padding: 0;
				border: none;

				a {
					color: $text-color;
				}
			}

			.postdate,
			.author {
				color: $meta-color;
				font-size: 0.9rem;

				&:before {
					@include font-awesome();
					content:  "\f133";
					padding-right: 0.2rem;
				}

				a {
					color: $meta-color;
				}
			}

			.author {
				&:before {
					@include font-awesome();
					content: "\f118";
					padding-right: 0.2rem;
				}
			}

			.comment {
				&:before {
					@include font-awesome();
					content: "\f075";
					padding-right: 0.2rem;
				}
			}

			.parent-post-link {
				a {
					color: $meta-color;

					&:before {
						@include font-awesome();
						content: "\f03e";
						padding-right: 0.2rem;
					}
				}
			}
		}

		.entry-meta {
			font-size: 0.9rem;
			padding: #{$line-height}rem 0;
			color: #999;
			clear: both;

			.category,
			.tag {
				margin-bottom: #{$line-height /4}rem;
				@include clearfix;

				span {
					width: 7rem;
					padding: 2px 0;
					display: block;
					float: left;

					&:before {
						@include font-awesome();
						content: "\f07b";
						padding-right: 0.2rem;
					}
				}

				a {
					background: #FFF;
					border: solid 1px $border-color;
					padding: 2px 5px;
					color: #999;
					border-radius: 4px;
					margin-bottom: 4px;
					display: inline-block;

					&:hover {
						background: $hover-background-color;
						text-decoration:none;
					}
				}
			}

			.tag {
				span {
					&:before {
						@include font-awesome();
						content:  "\f02c";
						padding-right: 0.2rem;
					}
				}
			}
		}

		.page-links {
			clear: both;
			margin: #{$line-height}rem 0;
			color: $link-color;

			span {
				background: $link-color;
				color: #FFF;
				padding: #{$line-height /8}rem #{$line-height /4}rem;
				text-decoration:none;
				border-radius: 2px;
				font-weight: normal;
				text-align: center;
				border: solid 1px $link-color;
				display: inline-block;
				line-height: 1;
			}

			a {
				span {
					color: $link-color;
					border: solid 1px $link-color;
					background: #FFF;
					border-radius: 2px;

					&:hover {
						background: $hover-background-color;
					}
				}
			}
		}

		.more-link {
			color: $link-color;
			padding-left: #{$line-height /2}rem;
			border-radius: 2px;

			&:before {
				@include font-awesome();
				content: "\f061";
			}
		}

		&.tag-news {
			.entry-header {
				.postdate {
					&:before {
						@include font-awesome();
						content: "\f06c";
						padding-right: #{$line-height /8}rem;
					}
				}
			}
		}
	}

	h1, h2, h3, h4, h5, h6 {
		margin: #{$line-height /2}rem 0;
		line-height:1.2;
		font-weight: normal;
		color: $header-color;

		a {
			color: $header-color;
		}
	}

	h1 {font-size:2.4rem;}
	h2 {font-size:2rem;}
	h3 {font-size:1.8rem;}
	h4 {font-size:1.6rem;}
	h5 {font-size:1.4rem;}
	h6 {font-size:1.2rem;}

	h1 {
		font-weight: bold;
	}

	h2 {
		border-bottom: dashed 1px $header-color;
		padding-bottom: 0.4em;
	}

	h3 {
		border-left: solid 7px $header-color;
		padding-left: 10px;
	}

	p {
		line-height: $line-height;
		margin: 0 0 #{$line-height}rem;
	}

	blockquote:not( .wp-block-quote ),
	blockquote.wp-block-quote.is-large {
		margin-left: #{$line-height}rem;
		padding-left: #{$line-height}rem;
		border-left: 10px solid $border-color;

		small {
			display: block;
			line-height: 20px;
			color: #999999;
		}

		small:before {
			content: '\2014 \00A0';
		}

		cite:before {
			content: "-";
		}

		cite {
			color: #999999;
			display: block;
		}

	}

	table {
		max-width: 100%;
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
		margin-bottom: #{$line-height}rem;

		th,
		td {
			border-bottom: 1px solid $border-color;
			line-height: 1.4;
			padding: #{$line-height /2}rem;
			text-align: left;
			vertical-align: top;
		}

		th {
			border-bottom: 2px solid $border-color;
			font-weight: bold;
		}
	}

	pre {
		border: dashed 1px #CCC;
		padding: #{$line-height /2}rem;
		background: #EEE;
		margin-bottom: #{$line-height}rem;
		line-height: 1.4;
	}

	code {
		background: #EEE;
	}

	code, kbd, pre, samp {
		font-family: monospace,serif;
	}

	hr {
		background-color: $border-color;
		border: 0 none;
		height: 1px;
		margin-bottom: #{$line-height}rem;
	}

	sup, sub {
		font-size: 80%;
		height: 0;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}

	sub {
		top: 0.5ex;
	}

	sup {
		bottom: 1ex;
	}

	em {
		font-style: italic;
	}

	strong {
		font-weight: bold;
	}

	abbr {
		cursor: help;
	}
	ul,
	ol {
		margin: 0 0 #{$line-height}rem #{$line-height /2}rem;
		padding: 0 0 0 #{$line-height /2}rem;
		line-height: 1.4;

		li {
			padding: #{$line-height /8}rem 0;
		}

		ul,
		ol {
			margin-bottom: 0;
		}
	}

	ul {
		list-style: disc;
		ul {
			list-style: circle;
			ul {
				list-style: square;
			}
		}
	}

	ol {
		list-style: decimal;
		ol {
			list-style:upper-alpha;
			ol {
				list-style:lower-roman;
				ol {
					list-style:lower-alpha;
				}
			}
		}
	}

	dl {
		margin:0 0 #{$line-height}rem 0;
		line-height: $line-height;

		dt {
			font-weight: bold;
		}

		dd {
			margin: 0 #{$line-height}rem #{$line-height}rem;
			padding: 0;
		}
	}

	del {
		color: #C00;
	}

	ins {
		background: #ffc;
		text-decoration: none;
	}
}

/* Images
-------------------------------------------------------------- */
#content .hentry img,
.widget img {
	max-width: 100%;
	height: auto;
}

img[class*="align"],
img[class*="wp-image-"] {
	height: auto;
}

.aligncenter,
.alignleft,
.alignright  {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: #{$line-height /2}rem;
}

a:hover img {
	@include opacity(0.9);
}


/* Galley
-------------------------------------------------------------- */
.wp-caption,
.gallery-caption {
	display: block;
	font-size: 0.9em;
	line-height: 1;
	color: $meta-color;
	max-width: 100%;
	text-align: center;
}

.wp-caption {
	padding: 5px;
	background: $border-color;
	margin-bottom: #{$line-height /2}rem;
	max-width: 100%;

	.wp-caption-text {
		color: $meta-color;
	}
}

.gallery-caption {
	margin: 5px 0 0 0;
}

.gallery {
	margin: 0 auto;
	@include clearfix;

	.gallery-item {
		float: left;
		padding: 0 5px;
		margin-bottom: 10px;
		text-align: center;
		width: 33%;

		a {
			display: block;
		}

		img {
			vertical-align:bottom;
		}
	}

	&.gallery-columns-1 .gallery-item {
		width: 100%;
	}

	&.gallery-columns-2 .gallery-item {
		width: 50%;
	}

	&.gallery-columns-3 .gallery-item {
		width: 33.33%;
	}
	&.gallery-columns-4 .gallery-item {
		width: 25%;
	}

	&.gallery-columns-5 .gallery-item {
		width: 20%;
	}

	&.gallery-columns-6 .gallery-item {
		width: 16.66%;
	}

	&.gallery-columns-7 .gallery-item {
		width: 14.28%;
	}

	&.gallery-columns-8 .gallery-item {
		width: 12.5%;
	}

	&.gallery-columns-9 .gallery-item {
		width: 11.11%;
	}
}

/* Make sure videos and embeds fit their containers
-------------------------------------------------------------- */
embed,
iframe,
object,
video {
	max-width: 100%;
}

.entry-content .twitter-tweet-rendered {
	max-width: 100% !important; /* Override the Twitter embed fixed width */
}

/* Comments
-------------------------------------------------------------- */
#content #comments {
	margin: #{$line-height}rem 0;
	display: block;

	.navigation {
		position: relative;
		height: #{$line-height}rem;
		padding-bottom: 10px;
		margin-bottom: #{$line-height}rem;

		.nav-previous a {
			position: absolute;
			top: 0;
			right: 0;
			padding-left: #{$line-height}rem;
		}

		.nav-next a {
			position: absolute;
			top: 0;
			left: 0;
			padding-right: #{$line-height}rem;
		}
	}

	ol.commentlist {
		list-style: none;
		margin: 0;
		padding-left: 0;

		li.pingback,
		li.comment {
			clear: both;
			margin-bottom: #{$line-height}rem;
			padding: 0;
			position: relative;
			list-style: none;
			@include clearfix;
		}

		ul {
			margin-left: 40px;
		}
	}

	li {
		border-bottom: dashed 1px $border-color;

		li {
			border: none;
		}

		.comment-meta {
			line-height: 1.4;
			margin-bottom: #{$line-height /2}rem;

			a {
				color: $meta-color;
			}

			time:before {
				color: $meta-color;
				@include font-awesome();
				content: "\f017";
			}
		}

		.comment-author {
			img {
				margin: 0 10px 0 0;
				float: left;
			}
		}

		.comment-awaiting-moderation {
			color: #F66;
		}

		.reply {
			margin-bottom: #{$line-height}rem;

			a.comment-reply-link {
				&:before {
					@include font-awesome();
					content:  "\f112";
					padding-right: #{$line-height /8}rem;
				}
			}
		}

		.comment-metadata,
		.comment-awaiting-moderation,
		.comment-content,
		.reply {
			padding-left: 50px;
		}

		&.bypostauthor .comment-author {
			color: $header-color;
		}
	}

	.nopassword {
		color: $meta-color;
	}
}

/* Forms
-------------------------------------------------------------- */
form {
	input {
		font-size: 100%;
	}
}

#commentform {
	border: 1px dotted $border-color;
	padding: 10px 15px;
	margin-bottom: #{$line-height}rem;
	background: #FFF;
	border-radius: 4px;
	max-width: 650px;

	p {
		margin-bottom: #{$line-height /2}rem;
	}

	label {
		padding: 0 0 5px 0;
		display: block;
	}

	textarea {
		width: 100%;
		height: 100px;
		padding:5px;
		background: #FFF;
		border: solid 1px $border-color;
	}

	input:not([id="submit"]) {
		width: 100%;
		max-width: 300px;
		padding: 5px;
		background: #FFF;
		border: solid 1px $border-color;
	}

	input#submit {
		padding: 5px 10px;
		margin-top: #{$line-height /4}rem;
	}

	#email-notes	 {
		display: block;
	}

	.form-allowed-tags {
		line-height: 1.2;

		code {
			display: block;
		}
	}
}

.post-password-form {
	input:not([type="submit"]) {
		padding: 5px;
		background: #FFF;
		border: solid 1px $border-color;
	}
}

/* Footer
--------------------------------------------- */
#footer {
	background: $header-color;
	color: #FFF;
	position: relative;
	z-index: 1;

	a {
		color: #FFF;
	}

	.site-title {
		padding: #{$line-height /2}rem 0;
		border-top: dotted 1px $border-color;
		line-height: 1.4;

		.generator {
			&:after {
				@include font-awesome();
				content: "\f19a";
				padding-left: #{$line-height /8}rem;
			}
		}

		strong {
			font-size: 1.2rem;
		}
	}

	#back-top {
		position: fixed;
		bottom: -80px;
		left: 36%;
		z-index: 3;

		a {
			background: none repeat scroll 0 0 #EEEEEE;
			border-radius: 100px;
			display: block;
			height: 120px;
			opacity: 0.7;
			text-align: center;
			text-decoration: none;
			width: 100px;

			span {
				@include hide-text;
			}

			&:hover {
				text-decoration: none;
				@include opacity( 0.8 );
			}

			&:before {
				@include font-awesome();
				content: "\f062";
				font-size: 50px;
				display: block;
				text-align: center;
				padding: 0;
				color: #999;
			}
		}
	}
}

/* Widget
--------------------------------------------- */
#widget-area {
	background: $header-color;
	padding: 0;
	@include clearfix;

	.widget {
		color: #FFF;
		margin: 20px 0;
		width: 100%;

		a {
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}

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

		h3 {
			font-size: 1.4rem;
			font-weight: normal;
			margin: 0 0 #{$line-height /4}rem 0;
			padding: 0 0 #{$line-height /4}rem 0;
			border-bottom: solid 2px $border-color;
		}

		ul {
			list-style: none;
			padding: 0;
			margin-left: 0;
			overflow: hidden;

			li {
					margin-top: -1px;
				border-top: dotted 1px #FFF;
				padding: 0.3rem 0 0.3rem 0.6rem;
				text-indent: -0.3rem;

				&:before {
					@include font-awesome();
					content: "\f0da";
					padding-right: #{$line-height /8}rem;
				}

				ul {
					padding: 0.5rem 0 0 0.5rem;
				}
			}
		}

		table {
			width: 100%;
			margin-bottom: 0;
			padding-bottom: 0;
		}

		.textwidget {
			line-height: 1.4;

			a {
				text-decoration: underline;
			}
		}

		#wp-calendar {
			/* Calendar Widget */
			border-collapse: collapse;
			border-spacing: 0;

			caption {
				font-size: 1.2em;
				font-weight: bold;
			}

			tbody {
				th,
				td {
					text-align: center;
					border-top: 1px solid $border-color;
					padding: 8px;

					a {
						font-weight: bold;
						display: block;
						padding: 2px 0;
						margin: 0 auto;
						background: #FFF;
						color: $header-color;
						border-radius: 2px;
					}
				}
			}

			thead {
				th {
					padding: 8px;
					text-align: center;
				}
			}


			tfoot {
				border-top: 1px solid $border-color;

				a {
					font-size: 1.2em;
				}

				#next {
					text-align: right;
				}

				td {
					padding: 8px 0;
				}
			}
		}
	}
}

/* Searcform
--------------------------------------------- */
#searchform {
	width: 100%;
	height: 30px;
	position: relative;

	label {
		display: block;
		font-size: 0;
		overflow: hidden;
		text-indent: -9999px;
	}

	#s {
		width: 80%;
		padding: 5px 10px 5px 5px;
		height: 30px;
		line-height: 1;
		border-radius: 4px 0 0 4px;
		border: none;
	}

	#searchsubmit {
		position: absolute;
		top: 0;
		right: 1px;
		border: 0 none;
		cursor: pointer;
		width: 20%;
		height: 30px;
		border-radius: 0 4px 4px 0;
		margin: 0;
		background: #CCC;
		color: #FFF;
		-webkit-appearance: button;
		@include font-awesome();
		content: "\f005";
		font-size: 1.2em;
	}
}

/* Home
--------------------------------------------- */
.home,
.blog {
	#content {
		background: none;

		h2 {
			border: none;
			margin: 0;
			padding: 0 0 #{$line-height}rem 0;

			a {
				display: block;
			}
		}

		#news {
			.container {
				padding-bottom: 0;
			}

			background: $background-color;
			z-index: 1;
			position: relative;
			padding-top: #{$line-height}rem;

			ul.article {
				list-style: none;
				margin: 0;
				padding: 0;

				li {
					border: none;
					background: none;
					margin: 0;
					padding: 0;
					border-top: dotted 1px $border-color;

					a {
						padding: #{$line-height /2}rem 0;
						display: block;
					}

					.entry-header {
						margin: 0;
						@include clearfix;

						.entry-title {
							font-size: 1.2rem;
							color: $link-color;
							padding-top: #{$line-height /2}rem;
							margin: 0;
						}

						.postdate {
							display: block;
						}
					}
				}
			}
		}

		#blog {
			background: $background-color;
			position: relative;
			padding-top: #{$line-height}rem;
			z-index: 1;

			ul.article {
				list-style: none;
				margin: 0 0 #{$line-height}rem 0;
				padding: 0;

				.hentry {
					border: solid 1px $border-color;
					border-radius: 4px;
					margin-bottom: 10px;
					padding: 0;
					background: #FFF;

					.entry-eyecatch {
						img {
							width: 100%;
							vertical-align:text-bottom;
						}

					}

					.entry-header {
						padding: 20px;
						margin: 0;
						position: relative;

						.entry-title {
							font-size: #{$line-height}rem;
							color: $text-color;
						}
					}

					a {
						display: block;
						height: 100%;

						&:hover {
							text-decoration: none;
							background: $hover-background-color;
						}
					}

					&.sticky {
						position: relative;

						i {
							display: inline;
							font-size: 12px;
							color: #fff;

							span {
								position: absolute;
								display: inline-block;
								text-align: center;
								text-transform: uppercase;
								top: 0;
								right: -44px;
								background: $header-color;
								width: 100px;
								height: 20px;
								padding: 3px;
								@include rotate( 45deg );

								&:before {
									@include font-awesome();
									content: "\f005";
									padding-right: #{$line-height /8}rem;
									color: #FFF;
								}
							}
						}

						.entry-header .entry-title {
							color: $header-color;
						}
					}
 				}
			}
		}
	}
}

/* Archive
-------------------------------------------------------------------- */
.archive,
.search {
	#content ul.list {

		list-style: none;
		margin: 0;
		padding: 0;

		li {
			border: none;
			background: none;
			margin: 0;
			padding: 0;
			border-top: dotted 1px $border-color;
			@include clearfix;

			a {
				padding: #{$line-height /2}rem 0;
				display: block;
				@include clearfix;

				&:hover {
					text-decoration: none;

					.entry-header .entry-title,
					.more-link {
						text-decoration: underline;
					}
				}

				.entry-content {
					color: $text-color;
					font-size: 0.96em;
				}
			}

			.entry-header {
				margin: 0;
				@include clearfix;

				.entry-title {
					font-size: #{$line-height}rem;
					color: $link-color;
				}
			}
		}
	}
}

/* Single
-------------------------------------------------------------------- */
.single {
	#content #nav-below {
		.nav-next,
		.nav-previous {
			display: block;
			width: 100%;
			padding: 5px 0;
		}

		.nav-previous {
			text-align: right;

			a:after {
				@include font-awesome();
				content: "\f061";
				padding-left: #{$line-height /8}rem;
			}
		}

		.nav-next {
			a:before {
				@include font-awesome();
				content: "\f060";
				padding-right: #{$line-height /8}rem;
			}
		}
	}
}

/* Attachment
-------------------------------------------------------------------- */
.attachment {

	#content {
		.hentry {

			.entry-attachment {
				text-align: center;
				margin-bottom: #{$line-height}rem;

				.wp-caption {
					background: none;
				}
			}
		}
	}
}

/* Pagenation
-------------------------------------------------------------------- */
#content .pagination {
	clear: both;
	color: $link-color;
	@include clearfix;

	a.page-numbers,
	.current {
		display: inline-block;
		background: #FFF;
		color: $link-color;
		border:solid 1px $link-color;
		text-decoration:none;
		text-align: center;
		padding: #{$line-height /8}rem #{$line-height /4}rem;
		border-radius: 2px;
		margin-right: 0.1rem;

		&.prev,
		&.next {
			background: none;
			border: none;
		}

		&.prev {
			&:before {
				@include font-awesome();
				content: "\f060";
				padding-right: #{$line-height /8}rem;
			}
		}

		&.next {
			&:after {
				@include font-awesome();
				content:  "\f061";
				padding-left: #{$line-height /8}rem;
			}
		}
	}

	a.page-numbers:hover {
		background: $hover-background-color;

		&.prev,
		&.next {
			background: none;
			text-decoration: underline;
		}
	}

	.current {
		color: #FFF;
		background: $link-color;
		border:solid 1px $link-color;
	}

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

/* Home Header
--------------------------------------------- */
#wall {
	height: 0;
	margin: 0;
	width: 100%;
	padding-top: (900 / 1280) *100%;
	position: relative;
	overflow: hidden;

	.headerimage {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		&:not(.slider) {
			img {
				width: 100%;
			}
		}

		.fixedimage {
			padding-top: (900 / 1280) *100%;
			height: 0;
			width: 100%;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
		}
	}

	.widget-area-header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background-color:rgba( 255, 255, 255, 0.3 );
		overflow: hidden;

		.widget {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-right: -50%;
			padding: 0 5%;
			@include translate( -50%, -50% );

			&:nth-child(n+2){
				display: none;
			}

			h3 {
				padding: 0.2em 0;
				margin: 0;
				border: none;
				line-height: 1;
				color: #FFF;
				font-size: 6vw;
				text-shadow: 1px 1px 5px rgba( 0, 0, 0, 0.5 );
			}

			.textwidget,
			.textwidget p {
				line-height: 1.2;
				margin: 0;
				color: #FFF;
				font-size: 4vw;
				text-shadow: 1px 1px 3px rgba( 0, 0, 0, 0.5 );
			}
		}
	}

	.slideitem {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: none;

		&.start {
			display: block;
		}

		.caption {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-right: -50%;
			width: 85%;
			text-align: center;
			font-size: 5vw;
			-webkit-transform: translate( -50%, -50% );
			-moz-transform: translate( -50%, -50% );
			-ms-transform: translate( -50%, -50% );
			-o-transform: translate( -50%, -50% );
			transform: translate( -50%, -50% );

			p {
				color: #fff;
				margin: 0;
				text-shadow: 1px 1px 3px rgba( 0, 0, 0, 0.5 );
				line-height: 1.4;
				margin-bottom: 0.4em;

				strong {
					display: block;
					font-size: 1.8em;
				}
			}

			a {
				display: inline-block;
				text-align: center;
				border: solid 2px #FFF;
				color: #FFF;
				font-weight: bold;
				font-size: 0.9em;
				padding: 2% 5%;
				border-radius: 3px;
				text-decoration: none;
				text-shadow: 1px 1px 3px rgba( 0, 0, 0, 0.5 );
				box-shadow: 1px 1px 3px rgba( 0, 0, 0, 0.5 );

				&:hover {
					background-color:rgba( 255,255,255,0.3 );
				}
			}
		}
	}

	&.no-image {
		padding-top: 0;
	}
}

/* Media queries for responsive design
--------------------------------------------- */
/* --- iPad Landscape --- */
@media screen and (min-width: 660px) {

	#footer {
		#back-top {
			left: 46%;
		}
	}

	.archive,
	.search {
		#content ul.list {
			li {
				.attachment-thumbnail {
					margin: 0 0 10px 10px;
					float: right;
				}
			}
		}
	}

	.single {
		#content #nav-below {
			@include clearfix;

			.nav-next,
			.nav-previous {
				width: 40%;
			}

			.nav-next {
				float: left;
			}

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

	#wall {
		.widget-area-header {
			top: 0;
			width: 350px;
			height: 350px;
			border-radius: 350px;
			text-align: center;

			.widget {
				h3 {
					line-height: 1.2;
					font-size: 4vw;
				}

				.textwidget,
				.textwidget p {
					line-height: 1.4;
					font-size: 2.8vw;
				}
			}
		}

		.slideitem {
			.caption {
				font-size: 3.4vw;
				width: 60%;
			}
		}
	}

	.wrapper:not(.no-title),
	.wrapper:not(.no-nav-menu){
		#wall {
			.widget-area-header {
				top: 10%;
			}

			.slideitem {
				.caption {
					top: 55%;
				}
			}
		}
	}

	.alignleft {
		float: left;
		margin-right: 0.75em;
	}

	.alignright {
		float: right;
		margin-left: 0.75em;
	}
}

/* --- PCs --- */
@media screen and (min-width: 930px) {
	.container {
		width: 930px;
	}

	#header {
		#branding {
			padding-top: 15px;
			float: left;

			#site-title {
				a {
					display: inline;
				}
			}

			#site-description {
				display: block;
				padding: 5px 0;
			}
		}
	}

	#menu-wrapper {
		margin-top: 0;
		*zoom: 1;
		&:after {
			clear: both;
				content: "";
				display: block;
		}

		.menu {
			#small-menu {
				display: none; /* hide small menu initially */
			}

			ul#menu-primary-items {
				/* ensure .menu is visible on desktop version */
				display: block !important;
				text-align: right;

				li {
					display: inline-block;
					position: relative;

					&:hover > ul {
						opacity: 1;
						visibility: visible;
					}

					a {
						border-top: none;
						padding: 0.8em;

						&:hover {
							background: #FFF;
							color: $header-color;
						}
					}

					&.menu-item-has-children {
						>a:after {
							@include font-awesome();
							content: "\f0d7";
							padding-left: 0.2em;
						}
					}

					ul {
						margin: 0;
						padding: 0;
						width: 200px;
						position: absolute;
						top: 80px;
						left: 0;
						text-align: left;
						z-index: 9999;
						visibility: hidden;
						opacity: 0;
						transition: .5s;

						li {
							display: block;
							margin: 0;
							padding: 0;

							&.menu-item-has-children {
								>a:after {
									@include font-awesome();
									content: "\f0da";
									padding-left: 0.2em;
								}
							}

							a {
								padding: 0.8em;
								background-color: $header-color;
								border-right: dotted 1px #FFF;
								border-left: dotted 1px #FFF;
								border-bottom: dotted 1px #FFF;
								height: auto;
								white-space: normal;

								&:hover {
									text-decoration: none;
									border-color: $header-color;
								}
							}

							&:first-child a {
								border-top: dotted 1px #FFF;
							}

							ul {
								top: 0;
								left: 100%;
							}
						}
					}
				}

				>li {
					>a {
						padding: 30px 0.8em;
						height: 80px;
					}
				}
			}
		}
	}

	#header.mini {
		#branding {
			#site-description {
				display: none;
			}
		}

		#menu-wrapper {
			.menu {
				ul#menu-primary-items {
					li ul {
						top: 60px;
					}
				}
			}
		}
	}

	.many-navigation {
		#menu-wrapper {
			.menu {
				ul#menu-primary-items {
					>li {
						>a {
							padding: 0.8em;
							height: auto;
						}

						>ul {
							top: 2.8em;
						}
					}
				}
			}
		}
	}

	.home,
	.blog {
		#content {
			#news ul.article {
				li {
					.entry-header {
						.postdate {
							width: 10em;
							float: left;
						}

						.entry-title {
							padding: 0 0 0 8em;
						}
					}
				}
			}

			#blog ul.article {
				@include clearfix;
				margin-left: -10px;

				.hentry {
					width: 303px;
					float: left;
					margin: 0 0 10px 10px;
				}
			}
		}
	}

	#widget-area {
		.widget {
			width: 290px;
			margin: 20px 10px;
			float: left;
		}
	}

	#commentform {
		padding: #{$line-height /2}rem #{$line-height}rem;
	}

	#wall {
		padding-top: 650px;

		.headerimage {
			.fixedimage {
				padding-top: 650px;
			}
		}

		.widget-area-header {
			width: 420px;
			height: 420px;
			border-radius: 420px;

			.widget {
				h3 {
					font-size: 2em;
				}

				.textwidget,
				.textwidget p {
					font-size: 1.2em;
				}
			}

		}

		.slideitem {
			.caption {
				font-size: 30px;
				width:600px;
			}
		}
	}

	.fixed-header {
		#header {
			position: fixed;
			top: 0;
		}

		#wall {
			.headerimage {
				&:not(.slider) {
					position: fixed;
				}

				.fixedimage {
					position: fixed;
				}
			}
		}
	}

	body:not(.home) .fixed-header:not(.no-title) #content,
	body:not(.home) .fixed-header:not(.no-nav-menu) #content,
	body.home.paged .fixed-header:not(.no-title) #content,
	body.home.paged .fixed-header:not(.no-nav-menu) #content,
	body.home .fixed-header:not(.no-title) #wall.no-image,
	body.home .fixed-header:not(.no-nav-menu) #wall.no-image {
		margin-top: 80px;
	}
}

/* admin-bar
--------------------------------------------- */
@media screen and (min-width: 48em) {
	.admin-bar .fixed-header #header {
		top: 32px;
	}
}

@media screen and ( max-width: 48.875em ) and ( min-width: 930px ) {

	.admin-bar .fixed-header #header {
		top: 46px;
	}
}