@charset "utf-8";
/*
Theme Name: BirdSITE
Theme URI: https://birdsite.jp/theme/
Description: BirdSITE built for photobloggers and photographers. It has good appearance for photos by grid layout. and uses CSS3 media queries for its responsive layout and is therefore optimized for tablet pcs and smart phones. Features include the Theme Customize. You can choose the main color, text color and link color. also supports the block editor.
Author: Sysbird
Author URI: https://profiles.wordpress.org/sysbird/
Version: 1.13
Requires at least: 4.7
Requires PHP: 5.6
Tested up to: 5.4.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, left-sidebar, grid-layout, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, footer-widgets, rtl-language-support, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, photography, block-styles
Text Domain: birdsite

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


// variable
$background-color: #F5F5F5;
$text-color: #555;
$link-color: #06A;
$main_color: #000;
$border-color: #CCC;
$meta-color: #999;
$line-height: 1.8;
$menu-width: 320;
$max-content: 1000;
$max-content-home: 1680;

/*------------------------------
Normalize
-----------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

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

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

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

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/*------------------------------
Font Awesome
-----------------------------*/
@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 900;
  font-display: afontauto;
  src: url("./fontawesome/fa-solid-900.eot");
  src: url("./fontawesome/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("./fontawesome/fa-solid-900.woff2") format("woff2"), url("./fontawesome/fa-solid-900.woff") format("woff"), url("./fontawesome/fa-solid-900.ttf") format("truetype"), url("./fontawesome/fa-solid-900.svg#fontawesome") format("svg");
}

@font-face {
  font-family: 'FontAwesomeBrands';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("fontawesome/fa-brands-400.eot");
  src: url("fontawesome/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("fontawesome/fa-brands-400.woff2") format("woff2"), url("fontawesome/fa-brands-400.woff") format("woff"), url("fontawesome/fa-brands-400.ttf") format("truetype"), url("fontawesome/fa-brands-400.svg#fontawesome") format("svg");
}

@mixin font-awesome() {
  font-family: 'FontAwesome';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}

@mixin font-awesome-brand {
  font-family: 'FontAwesomeBrands';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}

@mixin box-sizing() {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}  

@mixin box-shadow( $h: 0, $v: 0, $b: 0, $c: #000000) {
	-webkit-box-shadow: $h $v $b $c;
	-moz-box-shadow: $h $v $b $c;
	box-shadow: $h $v $b $c;
}

@mixin opacity( $opacity ) {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity= $opacity *100 );
	opacity: $opacity;
}

@mixin clearfix() {
	overflow: hidden;
	*zoom: 1;
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}
	
@mixin pie-clearfix() {
	*zoom: 1;
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

@mixin hide-text(){
	text-indent: -119988px;
	overflow: hidden;
	text-align: left;
}

@mixin display-flex(){
    display: -webkit-flex;
    display: -ms-flexbox;
	display: flex;
}

@mixin flex($v) {
	-webkit-flex: $v;
	flex: $v;
}

@mixin align-items($v) {
	-webkit-box-align: $v;
    -ms-flex-align: $v;
	align-items: $v;
}

@mixin flex-end {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

@mixin flex-justify-between {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

@mixin flex-row-reverse {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

@mixin flex-justify-center {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

@mixin flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

@mixin flex-stretch {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

@mixin line-height-hcrop($h) {
  &::before {
    content: '';
    display: block;
    height: 0;
    width: 0;
    margin-top: calc((1 - #{$h}) * 0.5em);
  }
}

@mixin  rotate($v) {
  -webkit-transform: rotate(#{$v});
  transform: rotate(#{$v});
}

@mixin  translate($x, $y) {
	-webkit-transform: translate(#{$x}, #{$y});
	-moz-transform: translate(#{$x}, #{$y});
	-ms-transform: translate(#{$x}, #{$y});
	-o-transform: translate(#{$x}, #{$y});
	transform: translate(#{$x}, #{$y});
}

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

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

h1, h2, h3, h4, h5, h6 {
	margin: #{$line-height}em 0;
	line-height:1.2;
	font-weight: normal;
	color: $main-color;
}

h1 {font-size:2.8rem;}
h2 {font-size:2.6rem;}
h3 {font-size:2.4rem;}
h4 {font-size:2.2rem;}
h5 {font-size:2rem;}
h6 {font-size:1.8rem;}

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

	a:not([class]) {
		text-decoration: underline;
	}
}

blockquote,
.wp-block-quote {
    margin: #{$line-height}rem 0;
    padding-left: 1em;
    border-left: 7px solid $border-color;
 
	small {
		display: block;
		line-height: 20px;
		color: $meta-color;
	}

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

	cite {
		color: $meta-color;
		display: block;
    }

    &.has-text-align-right {
        border-color: $border-color;
    }
}

.has-drop-cap:not(:focus)::first-letter {
  font-size: 4em;
  font-weight: bold;
}

table,
.wp-block-table {

    thead {
        border-bottom: solid 2px $border-color;
    }

	th,
	td {
		border: none;
        border-left: dotted 1px $border-color !important;
        border-right: dotted 1px $border-color !important;
        border-bottom: solid 1px $border-color;
		line-height: 1.4;
		padding: #{$line-height /2}rem;
		text-align: left;
        vertical-align: top;
        
        &.has-text-align-right {
            text-align: right;
        }
	}

	th {
		font-weight: bold;
        background: $background-color;
        text-align: center;
    }
    
    figcaption {
        font-size: 2rem;
    }

    &.is-style-stripes {
        th {
            background: none;
        }

    }
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: #{$line-height}rem;
    border: solid 1px $border-color;
}

.wp-block-table {
    display: block !important;  // for x-scroll
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;

    figcaption {
        font-size: 2rem;
    }

    &.is-style-stripes {
        border-bottom: none;

        table {
            th,
            td {
				border-bottom: none;
            }
        }
    }
}

pre {
	border: dotted 1px #CCC;
	padding: #{$line-height}rem;
	margin: #{$line-height}rem 0;
    line-height: 1.4;
    overflow: auto;
}

code {
	background: $background-color;
}

code, kbd, pre, samp, var, tt {
	font-family: "Courier 10 Pitch", Courier, monospace;
}

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

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;
}

small {
	font-size: 0.9em;
}

abbr, acronym {
    cursor: help;
    border-bottom: dotted 1px;
}


ul,
ol {
	padding-left: 1.5em;
	margin-bottom: #{$line-height}rem;

	li {
		line-height: 1.6;
		margin-top: #{$line-height /4}em;
		margin-bottom: #{$line-height /4}em;

		ul,
		ol {
			margin-left: 2em;
			margin-bottom: #{$line-height /4}rem;
		}
	}

}

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

dl {
	display: flex;
	flex-wrap: wrap;

	dt {
		width: 30%;
		margin-bottom: 2px;
		text-align: right;
		font-weight: bold;
		background: $background-color;
		padding: #{$line-height /2}rem;

	}

	dd {
		width: calc( 70% - 20px );
		border-bottom: solid 1px $border-color;
		padding: #{$line-height /2}rem 0; 
		margin-left: 20px;
	}

	dt:first-child + dd  {
		border-top: solid 1px $border-color;
	}
}
		

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

/* Structure
--------------------------------------------- */
html {
	font-size: 62.5%;
	
	* {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
}

body {
	margin:0;
	padding:0;
	border:0;
	width:100%;
}

.container {
	position: relative;
}

.wrapper > .container {
	@include display-flex();
}

#header {
	width: #{$menu-width}px;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1;
}

.main {
	width: calc(100% - #{$menu-width}px);
	background-color: #FFF;
}

/* Fixed Footer
--------------------------------------------- */
body,
.wrapper {
	@include display-flex();
	flex-direction: column;
	min-height: 100vh;
}

#footer {
	margin-top: auto;
}

/* Body
-------------------------------------------------------------- */
body {
	background-color: $background-color;
}

/* Wrapper
-------------------------------------------------------------- */
.wrapper {
	font-family: 'Open Sans', 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial','Hiragino Sans', YuGothic, 'Yu Gothic', Meiryo, 'MS PGothic';
	font-size: 1.4rem;
	line-height: $line-height;
	color: $text-color;
	word-wrap:break-word;
}

/* Header
-------------------------------------------------------------- */
#header {
	.branding {
		padding: 40px 40px 0 20px;
		margin-bottom: 40px;
		color: $main_color;
		text-align: right;

		.site-title {
			font-size: 3.8rem;
			font-weight: bold;
			line-height: 1;
			margin: 0;

			a {
				color: $main_color;
			}
		}

		.site-description {
			margin-top: 1rem;
		}
	}

	.header-image {
		display: block;
		margin: 40px 0;

		img {
			max-width: 100%;
			vertical-align:bottom
		}
	}

	&.no-title {
		.branding {
			margin-bottom: 0;

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

/* Footer
-------------------------------------------------------------- */
#footer {
	background: $main_color;
	color: #FFF;

	.container {
		max-width: #{$menu-width + $max-content}px;
		padding: 40px;
	}

	ul.row {
		padding: 0;
		margin: 0 0 0 -40px;
		list-style: none outside none;
		@include clearfix;
		@include display-flex();
		flex-wrap: wrap;

		& >li {
			margin: 0 0 0 40px;
			width: calc( 33.33% - 40px );			
		}
	}

	a {
		color: #FFF;
	}

	.site-title {
		border-top: solid 1px #FFF;
		padding: 20px 0 0;
		line-height: #{$line-height}em;

		.home {
			font-weight: bold;
		}

		.generator {
			font-family: Georgia, "Bitstream Charter", serif;
			font-style: italic;

			&:after {
				@include font-awesome-brand();
				content: "\f19a";
				padding-left: 0.4em;
				padding-right: 0.4em;
				font-style: normal;
			}
		}
	}

	#back-top {
		position: fixed;
		bottom: 5px;
		right: 15px;
		z-index: 3;
		cursor: pointer;

		a {
			display: block;
	
	   		span {
				display: none;
			}

			&:before {
				@include font-awesome();
				content: "\f139";
				font-size: 3em;
				display: inline-block;
				color: $border-color;
				@include opacity( 0.5 );
			}
		}
	}
}

/* Menu
-------------------------------------------------------------- */
#small-menu {
	display: none;
}

#menu-wrapper {
	margin: 40px 0;
	padding-right: 40px;

	ul#menu-primary-items {
		margin: 0;
		padding: 0;
		list-style: none;

		> li {
			padding: 0;
			text-align: right;
		}

		li {
			position: relative;

			&:hover > ul {
				display: block;
			}

			a {
				border-bottom: dotted 1px $main_color;
				padding: #{$line-height /2}em 0 #{$line-height /2}em #{$line-height /2}em;
				display: block;
				color: $main_color;
				text-decoration: none;
				line-height: 1.2;

				&:hover {
					@include opacity(.7);

				}
			}

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

			ul {
				list-style: none;
				background: #FFF;
				border: dotted 1px $main_color;
				border-bottom: none;
				width: #{$menu-width}px;
				margin: 0;
				padding: 0;
				position: absolute;
				top: 0;
				left: 100%;
				z-index: 2;
				display: none;

				li {
					margin: 0;
					padding: 0;
					text-align: left;

					a {
						white-space: normal;
						
						&:hover {
							@include opacity(.7);
						}
					}
				}
			}
		}
	}

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

	.close a {
		display: none;
	}
}

/* Posts
--------------------------------------------- */
#content {
	padding: 40px;
	max-width: #{$max-content}px;

	h2 {
		border-bottom: dotted 1px $main-color;
		padding-bottom: 0.4em;
	}

	h3 {
		border-left: solid 5px $main-color;
		padding: 5px 0 5px 10px;
	}

	.hentry {

		.entry-header {
			margin-bottom: #{$line-height}em;

			.entry-title {
				font-size: 3.2rem;
				font-weight: normal;
				color: $text-color;
				border-bottom: dotted 1px $text-color;
				padding-bottom: 40px;
				margin: 0;

				a {
					color: $text-color;
				}
			}

			.taxonomy-description {
				margin-top: #{$line-height}em;
			}
		}

		.entry-content {
			margin-bottom: #{$line-height}em;
			@include pie-clearfix;
		}

		.entry-meta {
			clear: both;
			background: $background-color;
			line-height: 1.4;
			padding: #{$line-height /2}em;
			margin-bottom: #{$line-height}em;

			a {
				color: $text-color;
			}

			.icon {
				margin-bottom: 0.4em;
				&:before {
					color: $border-color;
					@include font-awesome();
					padding-right: 0.4em;
				}
			}

			.postdate {
				&:before {
					content: "\f017";
				}
			}

			.author {
				&:before {
					content: "\f007";
				}
			}

			.category {
				&:before {
					content: "\f07b";
				}
			}

			.tag {
				&:before {
					content: "\f02b";
				}
			}

			.comment {
				&:before {
					content: "\f075";
				}
			}

			.parent-post-link {
				&:before {
					content: "\f1c5";
				}
			}
		}
	}
}

/*  Home Thumbnails */
.home #content {
	max-width: #{$max-content-home}px;

	ul.row {
		list-style: none;
		padding: 0 20px 0 0;
		margin: 0 0 0 -20px;
		@include display-flex;
		flex-wrap: wrap;

		li {
			position: relative;
			margin: 0 0 20px 20px;
			padding: 0;
			width: 300px;
			height: 300px;
			background: #FFF;
			overflow: hidden;
			@include box-shadow( 0 2.5rem, 2rem, -2rem, #EEE);

			.more-link {
				position: absolute;
				top: 0;
				left: 0;
				width: 300px;
				height: 300px;

				a {
					display: block;
					width: 300px;
					height: 300px;
					@include hide-text;
					@include opacity( 0.6 );
				}
			}

			.thumbnail {
				position: relative;
				width: 300px;
				height: 300px;
				margin: 0 auto;
				overflow: hidden;

				img {
					position: absolute;
					top: 0;
					left: 0;
					display: block;
					max-width: none;
				}

				.more-link {
					top: -5px;
					left: -5px;
				}
			}

			.caption {
				position: absolute;
				color: #FFF;
				background-color: rgba(0, 0, 0, 0.3);
				top: 0;
				left: 0;
				width: 300px;
				height: 300px;
				line-height: 1.4;
				overflow: hidden;

				a {
					text-decoration: none;
					color: #FFF;
				}

				.entry-header {
					padding: 0.8em;
					margin: 0;

					.entry-title {
						font-size: 2.6rem;
						color: #FFF;
						font-weight: normal;
						border-bottom: none;
						padding: 0;

						a {
							color: #FFF;
						}
					}
				}

				.entry-meta {
					padding: 0 1em;
					background: none;

					.icon:before {
						color: #FFF;
					}
				}

				.more-link {
					a {
						position: relative;

						&:after {
							position: absolute;
							right: 10px;
							bottom: 15px;
							width: 1em;
							height: 1em;
							color: #FFF;
							@include font-awesome();
							content: "\f054";
							font-size: 2.4em;
							text-align: right;
						}
					}
				}
			}

			&.has-post-thumbnail {
				.caption {
					@include opacity( 0 );
				}

				&:hover {
					.caption {
						@include opacity( 1 );
						transition: .7s;
					}
				}
			}

			&.sticky {

				.caption {
					@include opacity( 1 );
				}
			}
		}
	}
}

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

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

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

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

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

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

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

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

img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 0.75em;
}

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

.wp-caption,
.gallery-caption,
.blocks-gallery-item__caption {
	font-size: 0.9em;
	line-height: 1.2;
	color: $meta-color;
	max-width: 100%;
	text-align: center;
}

.wp-caption {
	max-width: 100%;
	background-color: $background-color;
	padding: 5px;

	p {
		text-align: center;
		margin: 5px 0 0 0;
		line-height: 1;
	}
}

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

.gallery {
	margin: 0 auto;
	@include display-flex();
	flex-wrap: wrap;

	.gallery-item {
		padding: 5px;
		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 */
}

.wp-block-embed-youtube {
	margin-left: 0;
	margin-right: 0;
}


/* Text meant only for screen readers.
-------------------------------------------------------------- */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/* Pagination at archive
-------------------------------------------------------------------- */
.pagination {
	clear: both;
	color: $link-color;
	padding: 0;
	@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: 5px 10px;
		margin: 4px;

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

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

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

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

	a.next {
		padding-right: 0;

		&:after {
			@include font-awesome();
			content: "\f054";
			padding-left: 0.4em;
		}
	}

	a.prev {
		padding-left: 0;

		&:before {
			@include font-awesome();
			content: "\f053";
			padding-right: 0.4em;
		}
	}
}

/* Page link at singular
-------------------------------------------------------------------- */
.page-link {
	clear: both;
	margin: #{$line-height}em 0;
	color: $link-color;

	> span,
	a {
		background: $link-color;
		color: #FFF;
		padding: 5px 10px;
		margin: 4px;
		text-decoration:none;
		font-weight: normal;
		text-align: center;
		border: solid 1px $link-color;
		display: inline-block;
		line-height: 1;
	}

	a {
		background: #FFF;

		span {
			color: $link-color;

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

/* Post Navigation at Single page
-------------------------------------------------------------------- */
.single .nav-links {
	margin: 20px 0 0 0;
	line-height: 1.2;
	@include clearfix;
	@include display-flex;
	@include flex-justify-between;
	@include flex-row-reverse;

	.nav-next {
		width: 50%;
		padding-right: 10px;
		border-right: solid 1px $border-color;

		a {
			&:before {
				@include font-awesome();
				content: "\f053";
				padding-right: 5px;
			}
		}
	}

	.nav-previous {
		width: 50%;
		padding-left: 10px;
		text-align: right;


		a {
			&:after {
				@include font-awesome();
				content: "\f054";
				padding-left: 5px;
			}
		}
	}
}

/* Comments
-------------------------------------------------------------- */
#comments {
	margin-top: 20px;
	display: block;

	.navigation {
		position: relative;
		height: 1em;
		padding-bottom: 10px;
		margin-bottom: 1em;

		.nav-previous a {
			position: absolute;
			top: 0;
			right: 0;
			padding-left: 1em;

			&:after {
				@include font-awesome();
				content: "\f054";
				padding-left: 0.4em;
			}
		}

		.nav-next a {
			position: absolute;
			top: 0;
			left: 0;
			padding-right: 1em;

			&:before {
				@include font-awesome();
				content: "\f053";
				padding-right: 0.4em;
			}
		}
	}

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

		li.pingback,
		li.comment {
			border-left: 2px solid $border-color;
			clear: both;
			margin-bottom: #{$line-height}em;
			padding: 0 0 0 10px;
			position: relative;
			list-style: none;

			&:after {
				@include clearfix;
			}

			.comment-author {
				.fn {
					display: inline;
					font-weight: bold;
					color: #000;

					&:before {
						content: none;
					}
				}

				img {
					border: none;
					margin: 0 10px 10px 0;
					float: left;
				}
			}

			.comment-meta {
				font-size: 0.96em;
				margin-bottom: #{$line-height}em;

				a {
					border-bottom: none;
					color: $meta-color;
				}
			}

			.comment-awaiting-moderation {
				font-size: 0.96em;
				color: $meta-color;
			}

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

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

				a.comment-reply-link {
					&:before {
						@include font-awesome();
						content: "\f3e5";
						padding-right: 0.2em;
					}
				}
			}
		}
	}
}

/* Archive
-------------------------------------------------------------------- */
.archive,
.search,
.error404 {
	#content {
		.hentry {
			.entry-header {
				margin-bottom: 0;
			}
		}

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

			li {
				border-bottom: dotted 1px $border-color;
				line-height: 1.2;
				padding: 0;
				margin: 0;

				&.has-post-thumbnail {
					@include display-flex;

					img {
						width: 50px;
						height: 50px;
						margin: #{$line-height /2}rem #{$line-height /2}rem #{$line-height /2}rem 0;
					}
				}

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

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

				.entry-title {
					line-height: 1.2;
					font-size: 1.8rem;
				}

				.postdate {
					color: $meta-color;
					margin-top: 5px;
					display: block;
				}
			}
		}
	}
}

/* Widget
-------------------------------------------------------------- */
.widget {
	margin-bottom: 40px;

	a {
		text-decoration: none;

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

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

	h3 {
		font-size: 1.8rem;
		font-weight: normal;
		margin: 0 0 10px 0;
		padding: 0 0 5px 0;
		border-bottom: solid 2px #FFF;
		color: #FFF;
	}

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

		li {
			margin: -1px 0 0 0;
			border-top: dotted 1px #FFF;
			padding: 0.4em 0 0.4em 0.8em;
			text-indent: -0.4em;

			&:before {
				@include font-awesome();
				content: "\f0da";
				padding-right: 5px;
			}

			a {
				color: #FFF;
			}

			ul {
				padding: 0.5em 0 0 1em;
			}
		}
	}

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

	.textwidget {
		line-height: 1.4;

		a {
			text-decoration: underline;
		}
	}

	#wp-calendar {
		border: none;

		thead {
			border-color: #FFF;

			th {
				background-color: transparent;
			}
		}

		th, 
		td {
			border-left: none !important;
			border-right: none !important;
			border-color: #FFF;
		}

		a {
			background-color: #FFF;
			color: $main_color;
		}
	}

	.wp-calendar-nav {
		border-top: 1px solid $border-color;
		padding-top: 5px;
		@include display-flex;
		@include flex-justify-between;

	}	
}

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

input[type="text"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="number"],
input[type="password"] {
	padding: 5px;
	background: #FFF;
	border: solid 1px $border-color;
	display: block;
}

input[type="password"] {
	display: inline;
}

select {
	padding: 5px;
}

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

input[type="submit"],
button[type="submit"] {
	font-size: 1.2em;
	color: #FFF;		
	background-color: $main_color;
	border: none;
	border-radius: 4px;
	box-shadow: none;
	cursor: pointer;
	display: inline-block;
	margin: 0;
	padding: 10px 80px;
	text-align: center;
	text-decoration: none;
	overflow-wrap: break-word;
	-webkit-appearance: button;

	&:hover {
		@include opacity(.8);
	}
}


.required {
	color: #C00;
}

#commentform {
	border: 1px dotted $border-color;
	padding: 10px 15px 0;
	margin-bottom: #{$line-height}em;

	input[type="text"],
	input[type="url"],
	input[type="email"] {
		width: 100%;
		max-width: #{$menu-width}px;
	}

	#email-notes	 {
		display: block;
	}

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

		code {
			display: block;
		}
	}
}

.post-password-form {

	input[type="submit"] {
		padding: 4px 20px;
	}
}

/* Searcform
--------------------------------------------- */
#searchform {
	width: 100%;
	position: relative;
	border: solid 1px $main-color;
	padding: 1%;
	border-radius: 4px;
	background: #FFF;
	max-width: 500px;
	@include display-flex();

	#s {
		padding: 5px 10px 5px 5px;
		line-height: 1;
		border: none;
		@include flex(1);
	}

	#searchsubmit {
		border: none;
		cursor: pointer;
		width: 50px;
		padding: 0 5px 0 0;
		margin: 0;
		background: #FFF;
		color: $main-color;
		-webkit-appearance: button;
		font-size: 1.2em;
		text-align: right;

		&:before {
			font-size: 1.8rem;
			@include font-awesome();
			content: "\f002";
		}
	}
}

/* block-editor
-------------------------------------------------------------- */
#content {
    .wp-block-button  {
        a.wp-block-button__link {
            border-radius: 4px;       
            line-height: 1.4;

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

    .wp-block-button {
        margin-bottom: #{$line-height}rem;

        a.wp-block-button__link:not(.has-background) {
            background-color: $main_color;
    
            &:hover {
				@include opacity(.8);
            }
        }

        &.is-style-outline .wp-block-button__link:not(.has-text-color),
        &.is-style-outline .wp-block-button__link:focus:not(.has-text-color),
        &.is-style-outline .wp-block-button__link:active:not(.has-text-color) {
            color: $main-color;
            background: none;

            &:hover {
                @include opacity(.8);
            }
        }
    }

    .wp-block-file .wp-block-file__button {
        display: table;
        border-radius: 4px;       
        line-height: 1.4;
        background-color: $main-color;
        margin: #{$line-height}rem 0;

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

    .wp-block-cover-image,
    .wp-block-cover {
        margin-bottom: #{$line-height}rem;

        .wp-block-cover-image-text,
        .wp-block-cover-text,
        h2 {
            color: #fff;
            font-weight: bold;
            font-size: 2.4em;
            line-height: 1.4;
        }

    }

    .caption {
        line-height: 1.4;
    }

    .wp-block-columns .wp-block-column {
         > :first-child {
            margin-top: 0;
         }

         > :last-child {
            margin-bottom: 0;
         }
    }

    .wp-block-separator,
    .wp-block-pullquote {
        border-color: $main-color;

		&.is-style-dots {
        	color: $main-color;
		}

        blockquote {
            border: none;
        }
    }

    .wp-block-pullquote {
        border-left: none;
    }

    .wp-block-latest-posts {
        li {
            a:before {
                @include font-awesome();
                content: "\f0da";
                padding-right: 5px;
            }
        }

        &.is-grid li {
            border-top: 1px solid $border-color;
            padding-top: 1rem;
            margin-bottom: 1rem;

            a:before {
                content: "";
                padding-right: 0;
            }
        }
    }

    .wp-block-group,
    .wp-block-media-text {
        margin: #{$line-height}rem 0
    }
}

#wp-calendar,
.wp-block-calendar {
    border-collapse: collapse;
    border-spacing: 0;

    caption,
    .wp-calendar-nav {
        font-size: 1.2em;
        font-weight: bold;
        text-align: center;
        margin: .5em 0;
    }

	table {
		border: none;

		th,
		td {
			background-color: transparent;
			border-top: none;
			border-left: none !important;
			border-right: none !important;

			a {
				background-color: $link-color;
				color: #FFF;
				display: inline-block;
			}
		}
	}

    tbody {
        th,
        td {
            text-align: center;
            padding: 8px;
        }
    }

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

    a {
        font-weight: bold;
        padding: 2px 8px;
        margin: 0 auto;
		text-decoration: none;
		border-radius: 2px;

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

.wp-block-cover.alignfull {
	margin-top: calc(2 * 1rem);
	margin-bottom: calc(2 * 1rem);
	width: calc( 125% + 150px);
	max-width: calc( 125% + 150px);
}

/* Media queries for responsive design
--------------------------------------------- */
/* --- Smartphones and small Tablet PCs --- */
@media screen and (max-width: 810px) {

	#footer {
		padding: 20px 0;
		.container {
			padding: 0 10px;
		}

		ul.row {
			margin: 0 0 10px 0;

			&>li {
				width: 100%;
				margin: 0;
			}
		}

		.site-title {
			padding: 10px 0 0 0;
			text-align: center;
		}
	}

	.widget {
		ul {
			li {
				border-top: none;
				display: inline;

				ul {
					margin-left: 2em;
					padding-top: 0;

					li{
						a {
							padding: 0.2em 0.2em 0.2em 0;
						}
					}
				}
			}

			@include clearfix;
		}
	}

	.gallery {
		.gallery-item {
			padding: 2px;
		}

		.wp-caption,
		.gallery-caption {
			display: none;
		}
	}

	dl {
		display: block;

		dt {
			width:	100%;
			text-align: left;;

			&:first-child + dd  {
				border: none;
			}
		}

		dd {
			width:	100%;
			margin-left: 0;
			border: none;
		}
	}
}

/* --- Smartphones and small Tablet PCs --- */
@media screen and (max-width: 600px) {

	body,
	.wrapper {
		display: block;
	}

	#footer {
		margin-top: 0;
	}

	.wrapper {
		font-size: 1.6rem;
	}

	.wrapper > .container {
		display: block;
		align-items: stretch;
	}

	.main {
		display: block;
		flex: none;
		width: 100%;
	}

	#header {
		width: 100%;
		padding: 0;
		margin-bottom: 0;
		position: relative;
		z-index: auto;

		.branding {
			text-align: center;
			padding: 40px 4% 0 4%;
		}

		.header-image {
			margin-bottom: 0;
		}

		&.no-image {
			min-height: 2.2em;
			padding: 0;
		}

		&.no-title {
			.branding {
				padding: 0;
			}
		}
	}

	body:not(.home){
		#header .header-image {
			display: none;
		}
	}
	
	#content {
		margin: 0 auto;
		padding: 20px 0;

		.hentry {
			margin-left: 0;
			padding: 0 4%;

			.entry-header {
				 margin-bottom: 20px;

				.entry-title {
					padding-bottom: 20px;
				}
			}
		}
	}

	.pagination {
		padding: 0 10px 10px;
		text-align: center;
	}

	.home {
		#content {
			ul.row {
				margin-left: 0;
				padding: 20px 0;

				li {
					margin: 20px auto 0;
				}
			}

			.pagination {
				padding-left:  10px;
				padding-bottom: 20px
			}
		}
	}

	.single {
		#content #nav-below {
			margin-bottom: #{$line-height}em;
		}

		.nav-links {
			display: block;;
			margin-bottom: 20px;

			.nav-next {
				border-right: none;
				width: 100%;
				text-align: center;
			}

			.nav-previous {
				width: 100%;
				text-align: center;

				&:after {
					content: "";
					display: block;
					margin: 20px auto;
					border-top: 1px solid $border-color;
					width: 160px;
				}
			}
		}
	}

	#small-menu {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		width: 50px;
		height: 40px;
		padding: 10px;
		background: transparent;
		-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;
		cursor: pointer;
		z-index: 1;

		.icon {
			position: relative;
			display: block;

			&,
			&: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: $text-color;
			}

			&:before,
			&:after {
				position: absolute;
				top: -8px;
				left: 0;
				content: ' ';
			}
			
			&:after {
				top: 8px;
			}
		}
	}
	
	#menu-wrapper {
		margin: 0;
		background-color: #FFF;
		top: 0;
		left: calc((100% - 50px) * -1);
		width: calc(100% - 50px);
		height: 100vh;
		padding-right: 0;
		z-index: 2;
		transition: .5s left;
		position: fixed;
		overflow-y: scroll;

		ul#menu-primary-items {
			clear: both;
			padding: 0 10px;

			> li {
				text-align: left;

				a {
					padding-left: 0;

					&:hover {
						background: none;
					}
				}

				&.menu-item-has-children {
					>a:after {
						@include font-awesome();
						content: "";
					}
				}

				ul {
					width: auto;
					position: relative;
					left: auto;
					border: none;
					background: none;
					width: 100%;
					display: block;
					@include opacity(1);
					visibility: visible;

					li {
						margin-left: 10px;
					}
				}
			}
		}

		.close a {
			display: block;
			margin: 20px auto 40px;
			cursor: pointer;
			width: 50%;
			border: solid 2px $main-color;
			color: $main-color;
			border-radius: 4px;
			text-align: center;

			&:before {
				@include font-awesome();
				content: "\f00d";
				padding-right: 5px;
			}

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

	.drawer-overlay {
		position: fixed;
		top: 0;
		left: 0;
		display: none;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.2);
		cursor: pointer;
	}

	.drawer-open {
		overflow-y: hidden;
		z-index: -1;
		width: 100%;
		height: 100%;

		#small-menu {
			.icon {
				background-color: transparent;

				&:before,
				&:after {
					top: 0;
				}

				&:before {
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
				}
				
				&:after {
					-webkit-transform: rotate(-45deg);
					transform: rotate(-45deg);
				}
			}
		}
		
		#menu-wrapper {
			left: 0;
		}
		
		.drawer-overlay {
			display: block;
		}
	}
}

@media screen and (min-width: 600px) {

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

/* admin-bar
--------------------------------------------- */
@media screen and (max-width: 600px) {
	.admin-bar {
		#menu-wrapper,
		#small-menu {
			top: 46px;
		}
	}
}