/*
Theme Name:       aether
Text Domain:      aether
Description:      LegendaryPKMN.net theme
Author:           Heracles Papatheodorou
Author URI:       https://heracl.es
Tags:             responsive, experimental
License:          MIT License
License URI:      http://opensource.org/licenses/MIT
Theme URI:        https://github.com/legendarypkmn/aether
GitHub Theme URI: https://github.com/legendarypkmn/aether
Version:          20190224
*/

/*--------------------------------------------------------------
Normalize styles
--------------------------------------------------------------*/

@import url('./styles/normalize.css');

img {
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
}

::-moz-selection {
	background: #ffd4e8;
	color: #000;
	text-shadow: none;
}
::selection {
	background: #ffd4e8;
	color: #000;
	text-shadow: none;
}

*, *:before, *:after {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
Fonts
--------------------------------------------------------------*/

@font-face {
	font-family: 'Gentium Web';
	src: url('./fonts/gentium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Fira Sans Web'; /* via Fira Book */
	src: url('./fonts/firasans_book.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/*--------------------------------------------------------------
Type
--------------------------------------------------------------*/
/*
todo:
	set HTML font-size and rems properly, will need various tweaks
*/

body {
	font: 120%/1.4 'Gentium Web', 'Gentium Plus', 'Georgia', serif;
	text-rendering: optimizeLegibility;

	/*background: #fff url('./graphics/bg_slowpoke.png') 80% -1% no-repeat;*/
	background-color: rgba(250,210,230,0.1);
	background-color: #fefafc;
	background-size: 50%;
}

@media only screen and (min-width: 48.11rem) {
	body {
		font-size: 140%;
	}
}

/*h1, h2, h3, h4, h5, h6,*/
#navigation,
.menu,
.languages,
.meta,
.author-meta,
.share,
.time,
time {
	font-family: 'Fira Sans Web', 'Fira Sans', sans-serif;
	font-weight: normal;
}

/*--------------------------------------------------------------
Hyperlinks
--------------------------------------------------------------*/

a {
	vertical-align: baseline;

	background: transparent;
	color: inherit;
	text-decoration: none;

	-webkit-transition: background .3s, border .3s, color .3s, padding .3s, margin .3s;
	-moz-transition   : background .3s, border .3s, color .3s, padding .3s, margin .3s;
	transition        : background .3s, border .3s, color .3s, padding .3s, margin .3s;
}
	a:hover {
		/*border-bottom-style: solid;*/
		/*border-bottom-width: 4px;*/
		/*text-decoration: underline;*/
	}

main.single .entry-content a {
	/*colors  #f88078 #fad4e7 */

/* 	background-image: webkit-linear-gradient(#f88078, #f88078);
background-image: linear-gradient(#f88078, #f88078);
background-repeat: repeat-x;
-webkit-background-size: 1px 1px;
background-size        : 1px 1px;
background-position: 0% 80%;

text-shadow: 0.03em 0 #fefafc, -0.03em 0 #fefafc, 0 0.03em #fefafc, 0 -0.03em #fefafc, 0.06em 0 #fefafc, -0.06em 0 #fefafc, 0.09em 0 #fefafc, -0.09em 0 #fefafc, 0.12em 0 #fefafc, -0.12em 0 #fefafc, 0.15em 0 #fefafc, -0.15em 0 #fefafc; */
	
	text-decoration: underline;
	text-decoration-color: #f88078;
}

main.single .entry-content a:hover {
/*	background-image: webkit-linear-gradient(#f88078, #f88078);
	background-image: linear-gradient(#f88078, #f88078);*/
}

.pagination a:hover,
article > a:hover,
main.single a:hover,
main.single .meta a:hover,
main.single h1 a:hover {
	color: #f88078;
}

.menu {
	margin: 0;
	padding: 0;

	list-style: none;
}

.menu a,
.menu-item a,
.pagination a {
	position: relative;
	display: inline-block;

	margin: 0 0.5rem;
	padding: 0.1rem 0.25rem;

	border-bottom: 2px rgba(0,0,0,0) solid;
	font-variant: small-caps;
	text-transform: lowercase;
	white-space: nowrap;
}
	.current-menu-item > a:before,
	.current-page-item > a:before,
	.menu a:hover:before,
	.menu-item a:hover:before,
	.pagination a:hover:before {
		content: '/ ';

		position: absolute;
		left: -0.6rem;

		padding-top: 0.1rem;

		font-weight: bold;
	}

.ivcalc,
.serebii,
.pocketmonsters,
.pidgi,
.pokemondungeon {
	padding-left: 22px;
	margin-left: -22px;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.ivcalc { background: url('./graphics/ivcalc.svg') 0 50% no-repeat; }
.serebii { background: url('./graphics/affiliate_serebii.png') 0 50% no-repeat; }
.pocketmonsters { background: url('./graphics/affiliate_pocketmonsters.png') 0 50% no-repeat; }
.pidgi { background: url('./graphics/affiliate_pidgi.png') 0 50% no-repeat; }
.pokemondungeon  { background: url('./graphics/affiliate_pokemondungeon.png') 0 50% no-repeat; }

@media only screen and (min-width: 48.11rem) {
	.ivcalc,
	.serebii,
	.pocketmonsters,
	.pidgi,
	.pokemondungeon {
		margin-left: 0;
	}
}

#navigation .menu > li.menu-item-has-children:hover > a {
	border-bottom-color: inherit;
}

#navigation .sub-menu a:hover:before,
#navigation .sub-menu .current-menu-item a:before,
#navigation .sub-menu .current-page-item a:before {
	/*left: -1.2rem;*/
	padding-top: 0.05rem;
}

#navigation .current-menu-item > a,
#navigation .current-page-item > a {
	font-weight: bold;
}

@media only screen and (min-width: 48.11rem) {
	#navigation .menu a:hover:before,
	#navigation .current-menu-item > a:before,
	#navigation .current-page-item > a:before,
	.pagination a:before {
		color: #f88078;
	}
}

/*--------------------------------------------------------------
elements and helper classes
--------------------------------------------------------------*/
img {
	max-width: 100%;	
	height: auto;
}

ul {
	list-style-type: none;
}

.center,
.aligncenter {
	margin: inherit auto;

	text-align: center;
}

.justify {
	text-align: justify;
}

.left,
.alignleft {
	float: left;
}

.right,
.alignright {
	float: right;
}

.group:after { /* auto-clearfix */
	content: "";

	display: table;
	clear: both;
}

.group .half {
	margin-right: 0;
	margin-left: 0;
	width: 48%;
}
	.group .half.left + .group .half.right,
	.group .half.alignleft + .group .half.alignright {
		margin-left: 2%;
	}


/*--------------------------------------------------------------
social menu
--------------------------------------------------------------*/

@font-face {
	font-family: 'icomoon';
	src:  url('fonts/icomoon.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

[class^="social-"] a, [class*=" social-"] a {
	display: inline-block;

	font-family: 'icomoon' !important;
	speak: none;
	font-size: 2rem;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-align: center;
	text-transform: none;
	line-height: 1;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	-webkit-transition: all .3s;
	-moz-transition   : all .3s;
	transition        : all .3s;

	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
	[class^="social-"] a:hover, [class*=" social-"] a:hover {
		-webkit-transform: scale(1.2);
		-moz-transform   : scale(1.2);
		transform        : scale(1.2);
	}


/*.social-twitter:before { content: "Ⓣ"; }
.social-facebook:before { content: "Ⓕ"; }
.social-github:before { content: "Ⓖ"; }*/

#menu-social {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 998;
}

@media only screen and (max-width: 48.11rem) {
	#menu-social .menu-item {
		display: inline-block;
	}
}

#menu-social .menu-item a,
#menu-social .menu-item a:before {
	content: '';

	margin: 0;
	padding: 0;

	border: none;
}

/*--------------------------------------------------------------
Share buttons
--------------------------------------------------------------*/

.menu a .twitter,
.share a.twitter {
	color: #55acee !important;
}

.menu a .facebook,
.share a.facebook {
	color: #3b5998 !important;
}

.share a.twitter:hover {
	background: #55acee;
	border-color: #55acee !important;
	color: #fff !important;
}

.share a.facebook:hover {
	background: #3b5998;
	border-color: #3b5998 !important;
	color: #fff !important;
}

main.single .share {
	margin: 0;
}

.share a {
	display: inline-block;

	padding: 0 0.8rem 0.15rem 0.8rem;

	border: 1px solid;
	border-radius: 8px;
	font-variant: small-caps;
	text-transform: lowercase;

	text-decoration: none !important;
	/* bad specificity, affected by background-img gradient trick on links */
	/*background-image: none !important;*/
	/*text-shadow: none !important;*/
}

.share a+a {
	margin-left: 1rem;
}

/*--------------------------------------------------------------
Language switcher
--------------------------------------------------------------*/

.languages {
	margin: 0;
	padding: 0;

	list-style-type: none;
}

.languages a {
	text-decoration: none;
}

.languages li {
	display: inline-block;
	font-variant: small-caps;
	text-transform: lowercase;
}

.languages li+li {
	/*padding-left: 1rem;*/
}

.languages li+li:before {
	/*content: ' / ';*/
}

.languages .active {
	font-weight: bold;
}
	.languages .active:before {
		content: '/ ';

		position: absolute;
		left: -0.6rem;

		padding-top: 0.1rem;

		color: #f88078;
		font-weight: bold;
	}

.languages .inactive {
	color: rgba(0,0,0,0.3);
	mix-blend-mode: multiply;
}

/*--------------------------------------------------------------
Logo
--------------------------------------------------------------*/
#logo {
	position: relative;
	z-index: 1000;

	display: block;

	/*margin-left: calc(2.61rem - 2.61rem);*/
	width: 14rem;
}

#logo img {
	margin-top: 0.21rem;
	width: 100%;

	-moz-image-rendering: crisp-edges;
}

/*--------------------------------------------------------------
Main navigation
--------------------------------------------------------------*/
#navigation {
	position: absolute;
	top: 6.75rem;
	right: 1.5rem;
	overflow: hidden;
	
	padding-top: 2rem;
	height: 0;

	-webkit-transition: background .3s step-start;
	-moz-transition   : background .3s step-start;
	transition        : background .3s step-start;
}
	#navigation:after {
		content: 'MENU';
		/*content: '☰';*/

		position: absolute;
		top: 0;
		right: 0;

		cursor: pointer;
		font-variant: small-caps;
		text-transform: lowercase;
	}	
		#navigation:lang(el):after {
		content: 'MENOY';
		}
	/*#navigation:hover,*/ /* disabled because Blink needs javascript instead */
	#navigation.active {
		position: absolute;
		top: 0.75rem;
		left: 0;
		z-index: 999;

		padding: 9rem 0 3rem calc(1rem + 2.61rem - 0.5rem);
		height: 180%;
		width: 100%;

		background: #ffd2e6;
		background: rgba(250,210,230,0.95);
		backdrop-filter: blur(5px); /* bonus, only works on Safari 9 */
		outline: 9999px rgba(250,210,230,0.95) solid; /* via https://twitter.com/LeaVerou/status/251469590377418753 */

		transition-timing-function: ease-in;
	}
		/*#navigation:hover:after,*/ /* disabled because Blink needs javascript instead */
		#navigation.active:after {
			content: 'CLOSE';
			/*content: '×';*/

			position: absolute;
			top: 6rem;
			right: 1.5rem;

			cursor: pointer;
			font-variant: small-caps;
			text-transform: lowercase;
		}
			#navigation.active:lang(el):after {
				content: 'ΚΛΕΙΣΙΜΟ';
			}

#navigation .menu {
	opacity: 0;

	-webkit-transition: opacity .3s step-start;
	-moz-transition   : opacity .3s step-start;
	transition        : opacity .3s step-start;
}	
	/*#navigation.active:hover .menu,*/ /* disabled because Blink needs javascript instead */
	#navigation.active .menu {
		opacity: 1;

		transition-timing-function: ease-in;

		-webkit-transition-delay: .5s;
		-moz-transition-delay   : .5s;
		transition-delay        : .5s;
	}

#navigation .menu {
	margin: 0;
	padding: 0;

	font-variant: small-caps;
	text-transform: lowercase;
	list-style-type: none;
}

#navigation .sub-menu {
	padding: 0 0 0 1.5rem;
	list-style-type: none;
}

#navigation .menu > li {
	position: relative;
}

@media only screen and (min-width: 48.11rem) {
	body > header {
		position: relative;
	}
	#navigation {
		position: absolute;
		top: 0;
		left: 15.5rem;
		overflow: initial;

		padding: 0;
		height: auto;
		width: auto;
	}
		#navigation:after {
			content: none;
			display: none;
		}

	#navigation.active {
		position: absolute;
		top: 0;
		left: 15.5rem;
		
		padding: 0;
		height: auto;
		width: auto;

		background: none;
		outline: none;
	}

	#navigation .menu {
		opacity: 1;

		-webkit-transition: none;
		-moz-transition   : none;
		transition        : none;
	}	


	#navigation .menu > li {
		position: relative;

		display: inline-block;
	}

	#navigation .menu li > .sub-menu  {
		display: none;
	}
		#navigation .menu li:hover > .sub-menu {
			position: absolute;
			/*top: calc( 100% + 6px );*/
			left: -1rem;
			z-index: 1000;

			display: block;

			margin: 0;
			padding: 0.5rem 1rem;

			background: rgba(254,250,250,0.95);
			list-style-type: none;
		}

	#navigation .sub-menu a {
		display: inline-block;

		white-space: nowrap;
		/*padding: 0.2rem 0;*/
	}
}

/*--------------------------------------------------------------
Basic layout
--------------------------------------------------------------*/

body {
	padding: 6rem 1rem 0;

	color: #333;
}

main {
	margin: 0 0 6rem 0;
}

body > footer {	
	/*margin: 4rem -1rem 0;*/
}

@media only screen and (min-width: 48.11rem) {
	body {
		padding: 3rem 3rem 0;
	}

	main {
		margin: 0 0 6rem 2.61rem;
	}
}

.languages {
	position: absolute;
	top: 1rem;
	right: 1rem;
}

body > header {
	/*position: relative;*/
	margin: 0 0 3rem 0;
}

#status {
	display: none;
	position: absolute;
	top: 2.75rem;
	left: 0;

	width: 100%;

	color: #777;
	text-align: center;
}

@media only screen and (min-width: 48.11rem) {
	#status {
		top: -5.7rem;
		left: 2.61rem;

		text-align: left;
	}
}

main.single {
	position: relative;
}
	main:after { content: ""; display: table; clear: both; } /* auto-clearfix */

body > footer {
	position: relative;

	padding: 6rem 1rem 3rem;
	margin: 0 -1rem 0;
	
	background: #ffd2e6;
	line-height: 1.3;

	clip-path: polygon(0% calc(0% + 5vw), 100% 0%, 100% 100%, 0% 100%);
}
	body > footer:after { content: ""; display: table; clear: both; } /* auto-clearfix */

body > footer .disclaimers {
	float: left;
	max-width: calc(45.11rem + 3rem);

	font-size: 70%;
}

body > footer .navigation {
	float: left;

	margin: 6rem 1rem 3rem;

	font-variant: small-caps;
	text-transform: lowercase;
}

body > footer .navigation ul {
	margin: 0;
	padding: 0.25rem 0 1rem 1rem;

	list-style-type: none;
}

.sidebar {
	margin: 3rem 0;
}

@media only screen and (min-width: 48.11rem) {
	body > footer {		
		margin: 0 -3rem 0;
	}
}

@media only screen and (min-width: 63.12rem) {
	body > footer {
		/*background: rgba(250,210,230,0.8);*/
	}

	body > footer .navigation {
		float: right;

		margin-top: 0;
	}

	main.single > article,
	main.single > section.page {
		float: left;

		margin-right: 3rem;
		width: calc(63% - 3rem);
	}

	.sidebar {
		float: left;
		opacity: 0.3;

		margin: 0;
		width: 37%;

		-webkit-transition: opacity .5s;
		-moz-transition   : opacity .5s;
		transition        : opacity .5s;

		-webkit-transition-delay: 2s;
		-moz-transition-delay   : 2s;
		transition-delay        : 2s;
	}
		.sidebar:hover {
			opacity: 1;

			-webkit-transition: opacity .1s;
			-moz-transition   : opacity .1s;
			transition        : opacity .1s;

			-webkit-transition-delay: 0;
			-moz-transition-delay   : 0;
			transition-delay        : 0;
		}

	.sidebar h2 {
		margin: 3rem 0 0;
	}
}

/*--------------------------------------------------------------
image gallery
--------------------------------------------------------------*/
.gallery:after { /* auto-clearfix */
	content: "";

	display: table;
	clear: both;
}

.gallery {
	margin: 2rem 0 0 0;
	width: calc(100% - 150px);

	text-align: center;
}
.gallery img {
	height: 200px; /* 150px wide thumbnails */
	width: auto;

	vertical-align: bottom;
}
.gallery a {
	position: relative;
	display: inline-block;

	margin: 0 -150px 2rem 0;

	background: none !important;
	cursor: zoom-in;

	-webkit-transform: rotate(5deg);
	-moz-transform   : rotate(5deg);
	transform        : rotate(5deg);

	-webkit-box-shadow: 0.5rem 0 0.5rem -0.5rem rgba(0,0,0,.5);
	-moz-box-shadow   : 0.5rem 0 0.5rem -0.5rem rgba(0,0,0,.5);
	box-shadow        : 0.5rem 0 0.5rem -0.5rem rgba(0,0,0,.5);

	-webkit-transition: all .3s;
	-moz-transition   : all .3s;
	transition        : all .3s;
}

.gallery a:nth-child(1)  { z-index:10; }
.gallery a:nth-child(2)  { z-index: 9; }
.gallery a:nth-child(3)  { z-index: 8; }
.gallery a:nth-child(4)  { z-index: 7; }
.gallery a:nth-child(5)  { z-index: 6; }
.gallery a:nth-child(6)  { z-index: 5; }
.gallery a:nth-child(7)  { z-index: 4; }
.gallery a:nth-child(8)  { z-index: 3; }
.gallery a:nth-child(9)  { z-index: 2; }
.gallery a:nth-child(10) { z-index: 1; }

.gallery a:first-child {
	/*margin-left: -150px;*/

	/*-webkit-transform: scale(1.1);
	-moz-transform   : scale(1.1);
	transform        : scale(1.1);*/
}

.gallery a:last-child {
	border-right: none;

	-webkit-box-shadow: none;
	-moz-box-shadow   : none;
	box-shadow        : none;
}

.gallery a:hover {
	z-index: 100;

	-webkit-box-shadow: 0 0 0.5rem rgba(0,0,0,.5);
	-moz-box-shadow   : 0 0 0.5rem rgba(0,0,0,.5);
	box-shadow        : 0 0 0.5rem rgba(0,0,0,.5);

	-webkit-transform: scale(1.2);
	-moz-transform   : scale(1.2);
	transform        : scale(1.2);
}

/*--------------------------------------------------------------
Article common styles
--------------------------------------------------------------*/

main.single .entry-summary,
main.single .entry-content p {
	-webkit-hyphens: auto;
	hyphens        : auto;
	/*text-align: justify;*/
}

main.single .entry-content p img {
	display: block;
	margin: 0 auto;
}

main.single .entry-content iframe {
	margin: 1rem auto;
}

article header .categories {
	margin: 0;

	font-size: 80%;
	font-variant: small-caps;
	letter-spacing: 1px;
	text-transform: lowercase;
}

article header .p-author {
	display: inline;

	margin: 0;

	font-size: 70%;
}
	article header .p-author:after {
		content: ' / ';

		color: #ffd2e6;
		font-weight: bold;
	}

article header .time {
	display: inline;
	/*order: 2;*/
	/*outline: 1px solid pink;*/
}

article .post-thumbnail {
	margin: 0;
}

article .post-thumbnail img {
	max-width: 100%;
	height: auto;

	vertical-align: middle;
}

.time {
	color: rgba(0,0,0,0.5);
	font-size: 70%;
	mix-blend-mode: multiply;
}

.time .updated:before {
	content: ' ↺ ';

	font-size: 120%;
}

h1 {
	font-size: 1.5em;
}

@media only screen and (min-width: 48.11rem) {
	h1 {
		font-size: 2em;
	}
}

.tags {
	padding: 0;
	margin: 0;

	list-style: none;

	font-size: 70%;
	font-variant: small-caps;
	text-transform: uppercase;
}
	.tags li {
		display: inline-block;
		padding: 0 1.5rem 0 0;
	}
		.tags li a:hover {
			opacity: 1;
		}
		.tags li a:before {
			content: '#';
		}

.tag-1 { opacity: .2; }
.tag-2 { opacity: .4; }
.tag-5 { opacity: .6; }
.tag-4 { opacity: .8; }
.tag-5 { opacity:  1; }


/*--------------------------------------------------------------
Single article view
--------------------------------------------------------------*/
main.single h1 {
	margin: 0;

	line-height: 1.2;
	/*outline: 1px solid red;*/
}

main.single article header h1 {
	margin-left: -0.2rem; /* adjustment for font */
}

main.single > article .entry-summary { 
	padding: 1rem 0;

	/*border: 2px #ffd2e6 dotted;*/
	/* add wavy line border style? */
	border-right: none;
	border-left: none;
}

main.single > article .post-thumbnail {
	position: relative;
	display: block;
	z-index: -1;

	margin: -3rem 0rem 3rem -1rem;

	clip-path: polygon(0% calc(0% + 5%), 100% 0%, 100% calc(100% - 5%), 0% 100%);
}

main.single article .post-thumbnail img {
	height: auto;
	width: 100%;
}

main.single article .credits {
	font-size: 1rem;
}

main.single article figcaption.credits {
	margin-top: -2.5rem;
}

main.single article .credits .label {
	font-variant: small-caps;
	text-transform: lowercase;
}

main.single article footer {
	margin: 3rem 0 0 0;
}

main.single article footer .share {
	margin: 3rem 0;
	/*outline: 1px solid red;*/
}
main.single article footer .share a {
	width: calc(50% - 1rem/2);

	text-align: center;
	/*outline: 1px solid blue;*/
}

main.single article.format-status .p-author,
main.single article.format-status .author-meta {
	/*display: none;*/
}

main.single article img {
	height: auto;
	max-width: 100%;
}

main.single article blockquote {
	position: relative;
}
	main.single article blockquote:before {
		content: '“';
		position: absolute;
		top: -1rem;
		left: -2rem;

		color: #ffd2e6;
		font-size: 4rem;
	}
	main.single article blockquote.pull-quote:before { content: none; }

main.single article .pull-quote {
	margin: 0;
	padding: 0;

	font-size: 3rem;
	line-height: 1;
	text-align: center;
}

main.single > article header,
main.single > article footer,
main.single > article .share,
main.single .entry-content {
	margin: 0 auto;
	max-width: 45.11rem;
}

hr {
	margin: 1.5rem 0;
	height: 1.5rem;
	overflow: hidden;

	border: 0;
}
	hr:before {
		content: '* * *'; /* ✻ */

		display: block;

		color: #ffd2e6;
		font-size: 1.5rem;
		text-align: center;
	}


main.single ul li:before {
	content: '—';
	position: absolute;
	margin-left: -20px;
}

@media only screen and (min-width: 48.11rem) {
	main.single article .post-thumbnail {
		margin: 1rem 0 3rem -2.61rem;
	}
}

/*--------------------------------------------------------------
legacy classes
--------------------------------------------------------------*/
main.single article a.thickbox img,
main.single article img.legacy { max-width: 200px; }
main.single article .fright { float: right; }
main.single article .fleft { float: left; }
main.single article .credit, main.single article .smaller {	font-size: 90%; }

/*--------------------------------------------------------------
Author meta
--------------------------------------------------------------*/
.author-meta {
	text-align: center;
}

.author-meta .avatar {
	margin-top: 1.5rem;
	width: 9rem;

	border-radius: 9rem;
}

.author-meta .title {
	margin: 0;

	letter-spacing: 1px;
	font-size: 80%;
	font-variant: small-caps;
	text-transform: lowercase;
}

.author-meta .name {
	margin: 0;

	font-size: 150%;
}

.author-meta .bio {
	margin: 0;

	font-size: 90%;
}


@media only screen and (min-width: 48.11rem) {
	.author-meta {
		text-align: left;
	}
	.author-meta .avatar {
		float: left;

		margin-right: 2rem;
		width: 7rem;
	}

	.author-meta .bio {
		margin: 0 0 0 9rem;
	}
}

/*--------------------------------------------------------------
Article list view
--------------------------------------------------------------*/

html:lang(el) .list article:lang(en) > a {
	opacity: 0.5;
	/*-webkit-filter: blur(1px) grayscale(100%);*/
	/*filter        : blur(1px) grayscale(100%);*/
}

.list article:hover > a {
	opacity: 1 !important;
	-webkit-filter: none !important;
	filter        : none !important;
}

html:lang(el) .list article:lang(en) .categories:before {
	content: 'Αγγλικα: ';
}

.list article > a {
	/*position: relative;*/
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align  : center;
	-webkit-align-items: center;
	-ms-flex-align     : center;
	align-items        : center;
	-webkit-box-pack: justify;
	-ms-flex-pack   : justify;
	-webkit-justify-content: space-between;
	justify-content        : space-between;

	padding: 1.5rem 0;
	width: 100%;

	border: 1px rgba(0,0,0,0) solid;
	border-right: none;
	border-left: none;

	-webkit-transition: all 0.3s;
	-moz-transition   : all 0.3s;
	transition        : all 0.3s;
}
	.list article > a:hover {
		/* it's a bit jumpy… */
		/*margin: 0;*/
		/*padding: 1.5rem 0;*/

		border-color: #ffd2e6;
	}

.list article header {
	position: relative;
	order: 2;

	width: 100%;
}

.list article header .entry-title {
	order: 1;

	margin: 0;
	/*width: calc(100% - 20rem);*/

	font-size: 1em;
	font-weight: normal;
}

.list article .entry-summary {
	display: none;
	/*order: 2;*/

	padding: 0;
}

.list article.format-status .entry-summary {
	display: block;
}

.list .post-thumbnail {
	display: none;
	order: 3;
	position: relative;

	clip-path: polygon(0% calc(0% + 5%), 100% 0%, 100% calc(100% - 5%), 0% 100%);
}

@media only screen and (min-width: 48.11rem) {
	.list.expanded article header {
		width: calc(100% - 15rem);
	}

	.list.expanded .post-thumbnail {
		display: block;

		max-width: 15rem;
	}
}

@media only screen and (min-width: 63.12rem) {
	.list.expanded article .entry-summary {
		width: calc(100% - 17rem);
	}
	.list.expanded article header .categories {
		position: absolute;
		top: 0.5rem;
		right: 0;

		width: 16rem;

		/*outline: 1px solid pink;*/
	}

	.list.expanded article header .p-author:after {
		content: none;
	}

	.list.expanded .p-author {
		position: absolute;
		top: 2.4rem;
		right: 0;

		width: 16rem;

		/*outline: 1px solid cyan;*/
	}
}


/*--------------------------------------------------------------
Homepage
--------------------------------------------------------------*/

.homepage .featured {
	/*margin: 0 -2.61rem 0;*/
}

.homepage .featured .share {
	margin-left: 2.61rem;
}

.homepage .featured .post-thumbnail {
	position: relative;
	overflow: hidden;

	clip-path: polygon(0% calc(0% + 5%), 100% 0%, 100% calc(100% - 5%), 0% 100%);
}

.homepage .featured .post-thumbnail img {
	z-index: -1;

	width: 100%;
	height: auto;
	object-position: 50% 50%;
	object-fit: cover;

	-webkit-transition: transform 3s ease-out;
	-moz-transition   : transform 3s ease-out;
	transition        : transform 3s ease-out;
}
	.homepage .featured:hover .post-thumbnail img {	
		-webkit-transform: scale(1.2);
		-moz-transform   : scale(1.2);
		transform        : scale(1.2);
	}

.homepage .featured header {
	position: relative;

	margin: -5rem 2.61rem 0;
}

.homepage .featured .categories {
	color: #f88078;
}

.homepage .featured .entry-title {
	margin: 0 0 0 -0.3rem;

	color: #f88078;
	font-size: 2.5rem;
	line-height: 1;
}

.homepage .featured .p-author:after {
	content: none;
}

.homepage .featured .entry-summary {
	margin: 1rem 0 0;
}

.homepage .recent-articles {
	margin: 3rem 0 0 0;
}

.homepage section:after { content: ""; display: table; clear: both; } /* auto-clearfix */

@media only screen and (min-width: 63.12rem) {
	.homepage .featured {
		float: left;

		margin: 0 3rem 0 0;
		width: calc(63% - 3rem);
	}

	.homepage .featured .entry-title {
		font-size: 4rem;
	}

	.homepage .recent-articles {
		float: left;

		margin: 0;
		width: 37%;
	}
}

.homepage .recent-news {
	margin: 4rem 0 0;
}

.recent-articles > h2,
#calendar > h2,
.recent-news > h2,
.sidebar h2 {
	/*margin: -0.6rem 0 0;*/
	padding: 0;

	letter-spacing: 1px;
	font-variant: small-caps;
	font-size: 1.5rem;
	text-transform: lowercase;

	/*outline: 1px solid red;*/
}


/*--------------------------------------------------------------
Calendar
--------------------------------------------------------------*/
#calendar {
	margin: 0 -1rem 1.5rem -1rem;
	font-size: 1rem;

	/*scrollbar-width: none;*/
}

#calendar::-webkit-scrollbar {
	background: transparent;
}

#caldenar h2 {
	margin: 0 3rem;
}

#calendar .event-duration {	
	font-family: 'Fira Sans Web', 'Fira Sans', sans-serif;
}

#calendar #events {
	scroll-snap-type: x mandatory;
	overflow-y: hidden;
	overflow-x: scroll !important;
	display: flex !important;
	margin: 1em 0 1em 0 !important;
	padding: 0.5em 1em 0 1em;
}

#calendar #events .h-event {
   scroll-snap-align: center;
}

#events:after {
	/*fix for no right padding*/
	content: '\00a0';
}

#calendar > h2 {
	margin-left: 1rem;
}

/*

#calendar > h2 .tip {
	font-size: 1rem;
	font-variant: normal;
	font-weight: normal;
	text-transform: none;
}
	#calendar > h2 .tip:hover {
		color: #f88078;
	}

#calendar #events {
	margin: 1rem 0;
	width: 100%;

	white-space: nowrap;
	
	-webkit-user-select: none !important;
	-moz-user-select: none !important;

	-webkit-transition: transform 0.5s ease-out;
	-moz-transition   : transform 0.5s ease-out;
	transition        : transform 0.5s ease-out;
}
*/

#calendar .h-event .p-category,
#calendar .h-event time {
	font-family: 'Fira Sans Web', 'Fira Sans', sans-serif;
	font-weight: normal;
}
}

@media only screen and (min-width: 48.11rem) {
	#calendar {
		margin: 3rem -3rem 1.5rem -5.61rem;
	}

	#calendar > h2 {
		/*margin-left: 5.61rem;*/
	}
}


/*--------------------------------------------------------------
Simple yearly calendar
--------------------------------------------------------------*/

#sya_container ul {
	padding: 0;
	list-style: none;
}

#sya_container ul li:before {
	content: '';
}

#sya_container .sya_postcontent {
	display: grid;
	grid-template-columns: 0.2fr 2.2fr 0.7fr 0.6fr;
	grid-template-rows: 1fr;
	grid-template-areas: "date title author categories";
	grid-template-rows: 1fr;
	align-items: baseline;
}

#sya_container .sya_date,
#sya_container .sya_author,
#sya_container .sya_categories {
	font-family: 'Fira Sans Web', 'Fira Sans', sans-serif;

	font-size: 80%;
}

#sya_container .sya_date {
	grid-area: date;
	width: 5rem;
}

#sya_container .sya_postcontent a {
	grid-area: title;
	background: none !important;

	font-size: 80%;
}

#sya_container .sya_categories {
	grid-area: categories;

	letter-spacing: 1px;
	font-weight: normal;
	text-transform: uppercase;
}

#sya_container .sya_author {
	grid-area: author;
}

/*<li class=""><div class="sya_postcontent"><span class="sya_date">11 Nov  </span><a href="http://localhost/legendarypkmn.net/2016/11/11/corocoro-reveals-new-pokemon-ultra-beasts-and-more/" class="post-659" rel="bookmark">CoroCoro reveals new Pokémon, Ultra Beasts and more</a> <span class="sya_categories">(News)</span> <span class="sya_author">(by NM2)</span></div></li>*/