@import url(defaults.css);
@import url(roboto.css);
@import url(roboto-slab.css);
@import url(playfair-display.css);
html, html>body {
	max-width : 100vw;
	background-color : #f7f7f7;
	padding-top : 0rem;
	font-family : roboto, roboto-static, sans-serif;
	font-weight : 300;
	font-size : 16px;
	line-height : 23px;
	color : #2a2a2a;
}
body>header {
	font-family : inherit;
	font-weight : 600;
	font-size : 1.1rem;
	text-transform : uppercase;
	background-color : #2a2a2a;
	max-height : 72px;
	margin : 0;
	padding : 0;
	line-height : 1;
}
body>header>h1, body>header>h1>a, body>nav, body>nav>a {
	font-family : inherit;
	font-size : inherit;
	font-weight : inherit;
	font-style : inherit;
	text-transform : inherit;
}
body>header>h1, body>header>h1>a {
	display : block;
	position : absolute;
	top : 0;
	left : 0;
	max-height : 72px;
	max-width : 72px;
	height : 72px;
	background-color : #be0301;
	margin : 0;
	padding : 0;
	vertical-align : baseline;
}
body>header>h1 img {
	max-height : 72px;
}
body>header>nav {
	margin : 0;
	padding : 0;
	padding-left : 72px;
	vertical-align : baseline;
}
body>header>nav>a:first-of-type {
	margin-left : 0;
}
body>header>nav>a {
	display : inline-block;
	max-height : 80px;
	height : 80px;
	vertical-align : baseline;
	margin : 0;
	padding : 42px 14px 0px 14px;
}
body>main {
	background-color : transparent;
	max-width : 100vw;
	width : 100%;
	min-width : 0;
	margin : 0;
	padding : 0;
	padding-top : 72px;
	font-family : inherit;
}
body>main>div, body>main>section, body>main>article {
	-webkit-flex : 1 1 0%;
	flex : 1 1 0%;
	max-width : 1280px;
	min-width : 354px;
	width : auto;
	background-color : transparent;
}
body>main>header {
	-webkit-flex : 1 1 100%;
	flex : 1 1 100%;
	box-sizing : border-box;
	max-width : unset;
	min-width : 0;
	width : 100%;
	min-height : 606.6px;
	margin : 0;
	padding : auto;
	padding-top : 54px;
	color : white;
	font-family : inherit;
	font-size : inherit;
	font-weight : 400;
	text-align : center;
	background-image : url('/images/Apatric-01-banner.jpg');
	background-color : rgba(0,0,0,0.35);
	background-blend-mode : color;
	background-size : cover;
	background-repeat : no-repeat;
	background-position : center;
}
body>main>header * {
	max-width : 1024px;
	width : auto;
	margin : auto;
	padding : 0;
	background-color : transparent;
	text-align : left;
	color : inherit;
	padding-bottom : 2.4rem;
	text-decoration : none;
}
body>main>header p, body>main>header h1, body>main>header h2 {
	border-left : solid 5px #be0301;
	padding-left : 1.25rem;
}
body>main>header p {
	font-size : 18px;
	line-height : 29px;
}
#species-list>a, body>main>header a {
	display : inline-block;
	background-color : rgba(0,0,0,0.25);
	color : inherit;
	font-weight : 600;
	font-size : 1.125rem;
	padding : 16px 26px;
	margin : 12px;
	text-align : center;
	border : solid 2px;
	border-radius : 4px;
	border-color : white;
	letter-spacing : 0.1125rem;
}
#species-list>a:hover {
	background-color : rgba(128,128,128,0.35);
}
body>main>header>a {
	text-transform : uppercase;
}
body>main>header>a:hover {
	background-color : #2a2a2a;
}
body>main>article section {
	-webkit-column-break-inside : avoid;
	break-inside : avoid;
}
body>main>header {
	position : relative;
}
body>main>header>footer {
	display : block;
	position : absolute;
	bottom : 0;
	width : 100%;
	text-align : center;
}
#language-selection {
	position : absolute;
	right : 76px;
	top : 0;
	height : 72px;
	width : auto;
	padding-top : 18px;
}
#language-selection button {
	background-color : transparent;
	background-size : cover;
	background-repeat : no-repeat;
	background-position : center;
	border : black 3px solid;
	border-radius : 5px;
	display : inline-block;
	padding : 0;
	margin : 0;
	width : 48px;
	height : 36px;
	color : transparent;
	content : '';
}
#language-selection button:hover {
	border-color : white;
}
#language-selection button#english-translation {
	background-image : url('/images/en.svg');
}
#language-selection button#finnish-translation {
	background-image : url('/images/fi.svg');
}
body>main>article section>ul ul {
	margin-top : auto;
	margin-bottom : auto;
}
body>main>article:not(#species-list-article):only-of-type {
	max-width : 1280px;
	width : 100%;
	-webkit-column-count : auto;
	-moz-column-count : auto;
	column-count : auto;
	-webkit-column-width : 448px;
	-moz-column-width : 448px;
	column-width : 448px;
	-moz-column-fill : balance;
	column-fill : balance;
	-webkit-column-gap : 2.4rem;
	-moz-column-gap : 2.4rem;
	column-gap : 2.4rem;
	margin : auto;
	padding : 3.2rem;
	background-color : transparent;
	text-align : left;
	color : inherit;
	padding-bottom : 2.4rem;
}
body>main>article#species-list-article {
	max-width : 100vw;
}
body>main>article:not(#species-list-article):only-of-type dl {}
body>main>article:not(#species-list-article):only-of-type dd {
	-webkit-column-break-after : auto;
	break-after : auto;
	-webkit-column-break-before : avoid;
	break-before : avoid;
	-webkit-column-break-inside : avoid;
	break-inside : avoid;
}
body>main>article:not(#species-list-article):only-of-type p:first-of-type {
	margin-top : 0;
}
body>main>article figure {
	display : block;
	max-width : 100%;
	max-height : unset;
	min-width : unset;
	min-height : unset;
	width : 100%;
	text-align : center;
	margin : auto;
	padding : auto;
}
body>main>article figure img {
	max-height : unset;
	width : 100%;
}
body>main article figure video {
	max-height : 512px;
	width : 100%;
}
body>main>article figure img, body>main article figure video, body>main>article figure figcaption {
	max-width : 760px;
}
body>main>article figure figcaption {
	display : block;
	background-color : #dfdfdf;
	width : 100%;
	margin : auto;
	margin-top : 1rem;
	padding-left : 0;
	padding-right : 0;
	font-family : inherit;
	font-weight : inherit;
	font-size : inherit;
	line-height : 1.75;
}
body>main>header h1, body>main>header h2, body>main>article h4, body>main>article h3, body>main>article h2, body>main>article h1 {
	font-family : playfair-display, playfair-display-static, roboto-slab, roboto-slab-static, serif;
	line-height : 1.3;
	letter-spacing : 1px;
	font-weight : 600;
	color : #2a2a2a;
}
body>main>header h1, body>main>header h2 {
	color : white;
	padding : auto;
	margin : auto;
}
body>main>header h1 {
	font-size : 32px;
}
body>main>header h2 {
	font-size : 24px;
}
body>main>article h1 {
	font-size : 35px;
}
body>main>article h2 {
	font-size : 25px;
}
body>main>article section>h3 {
	font-weight : 500;
	font-size : 1.2rem;
	margin-top : 1.6rem;
	margin-bottom : 0;
}
body>main>article section section>h3 {
	font-weight : bold;
	font-size : 1rem;
	margin-top : 1.6rem;
	margin-bottom : 0;
}
#species-list {
	display : flex;
	-webkit-flex-direction : row;
	flex-direction : row;
	-webkit-flex-wrap : wrap;
	flex-wrap : wrap;
	text-align : center;
	-webkit-justify-content : center;
	justify-content : center;
	-webkit-align-content : center;
	align-content : center;
	-webkit-align-items : stretch;
	align-items : stretch;
}
#species-list>a {
	-webkit-flex : 1 1 250px;
	flex : 1 1 250px;
	width : auto;
	height : 175px;
	margin : auto;
	padding : auto;
	padding-top : 48px;
	vertical-align : middle;
	text-align : center;
	text-decoration : none;
	color : white;
	background-image : url('/images/acer-palmatum-lehti.jpg');
	background-size : cover;
	background-color : rgba(0,0,0,0.35);
	background-blend-mode : color;
	background-repeat : no-repeat;
	background-position : center;
}
#species-list>a * {
	vertical-align : middle;
	text-align : center;
	color : inherit;
	font-size : 24px;
}
#species-list>a h1, #species-list>a h2, #species-list>a {
	font-family : roboto, roboto-static, sans-serif;
	font-weight : 400;
}
body>main *.verbatim, body>main *.verbatim:first-letter {
	text-transform : none !important;
}
.speciesname {
	font-style : italic;
}
article#preface {
	-webkit-flex : 1 1 680px;
	flex : 1 1 680px;
	max-width : 680px;
}
body>main>header#pachypanchax-sakaramyi {
	background-color : rgba(0,0,0,0.5);
}
#collapse-sitenav, #jump-top {
	z-index : 100;
	background-color : #212121;
	margin : 0;
	padding : 0;
	border : none;
	border-radius : 0;
	width : 64px;
	max-width : 64px;
	height : 64px;
	max-height : 64px;
	color : white;
	font-size : 32px;
	font-family : roboto, roboto-static, sans-serif;
	line-height : 1.0;
	vertical-align : baseline;
	text-align : center;
}
#collapse-sitenav {
	display : none;
}
#jump-top {
	display : block;
	position : fixed;
	top : auto;
	right : 3.2rem;
	left : auto;
	bottom : 0;
	-webkit-transition : bottom 500ms ease-in-out 0ms;
	-moz-transition : bottom 500ms ease-in-out 0ms;
	-o-transition : bottom 500ms ease-in-out 0ms;
	transition : bottom 500ms ease-in-out 0ms;
	font-size : 48px;
	padding : auto;
	margin : 0;
	font-weight : bold;
	border-radius : 5px 5px 0px 5px;
}
#jump-top:after {
	content : '\21EA';
	display : inline-block;
	font-size : 48px;
	padding : auto;
	padding-top : 8px;
	margin : 0;
	width : 64px;
	max-width : 64px;
	height : 64px;
	max-height : 64px;
}
#author, #date {
	display : block;
	width : 100%;
	margin : auto;
	margin-bottom : 0.6rem;
	padding : auto;
	font-weight : 400;
	font-size : 1.16;
	font-style : italic;
}
body>header nav>a:hover {
	background-color : black;
}
body>header h1>a:hover {
	background-color : darkred;
}
body>main article:hover a>h1, body>main article:hover a>h2, body>main article:hover a>p {
	color : blue;
}
@media screen and (max-width:840px) {
	html, body, body>main {
		max-width : 100%;
		padding : 0;
		margin : 0;
	}
	body>main {
		padding-top : 64px;
	}
	body>header {
		max-height : none;
		height : auto;
	}
	body>header>h1, body>header>h1>a {
		max-height : 64px;
		max-width : 64px;
		height : 64px;
	}
	body>header>h1 img {
		max-height : 64px;
	}
	body>header>nav {
		display : block;
		min-height : unset;
		max-height : unset;
		height : 64px;
		min-width : unset;
		max-width : unset;
		width : auto;
		margin : auto;
		margin-left : 64px;
		padding : 0;
		padding-left : 0;
		padding : 0;
		-webkit-transition : height 500ms ease-in-out 0ms;
		-moz-transition : height 500ms ease-in-out 0ms;
		-o-transition : height 500ms ease-in-out 0ms;
		transition : height 500ms ease-in-out 0ms;
	}
	body>header>nav.closed {
		height : 64px;
	}
	body>header>nav.opened {
		height : auto;
	}
	body>header>nav>a {
		display : none;
		margin : 0;
		margin-right : 92px;
		padding : 1.33rem;
		height : auto;
		width : auto;
		min-height : 0px;
		max-height : 84px;
		text-align : center;
	}
	body>header>nav.closed>a {
		display : none;
	}
	body>header>nav.opened>a {
		display : block;
	}
	body>header>nav>button#collapse-sitenav {
		display : block;
		position : absolute;
		top : 0;
		right : 12px;
		font-size : 32px;
		float : right;
		margin : 0;
		-webkit-transition : transform 100ms linear 0ms;
		-moz-transition : transform 100ms linear 0ms;
		-o-transition : transform 100ms linear 0ms;
		transition : transform 100ms linear 0ms;
	}
	#collapse-sitenav.closed {
		transform : scale(1,1);
	}
	#collapse-sitenav.opened {
		transform : scale(-1,1);
	}
	body>main>header {
		padding-top : 1rem;
		min-height : 270px;
	}
	body>main>header p, body>main>header h1, body>main>header h2 {
		padding : 0;
		margin : 0;
		padding-bottom : 1rem;
		padding-left : 0.6rem;
		border : none;
		border-left : none;
	}
	body>main>header a {
		padding : 10px 20px;
		margin : 8px;
	}
	body, body>main, body>main>header, body>main>article, body>main>article *, #species-list-article * {
		box-sizing : border-box;
		max-width : 100vw;
	}
	body>main>article:not(#species-list-article):only-of-type {
		padding : 0 1rem 1rem 1rem;
	}
	#species-list-article {
		max-width : unset;
		padding : 0;
		margin : 0;
		margin-top : 5px;
		padding-left : 0;
		padding-right : 0;
	}
	#species-list>a {
		padding-top : auto;
		padding : auto;
		background-color : rgba(0,0,0,0.3);
		background-blend-mode : color;
	}
	#species-list>a * {
		padding : auto;
		margin : auto;
	}
	body>main>article:not(#species-list-article):only-of-type p:first-of-type {
		margin-top : 1rem;
	}
	#author {
		margin-top : 1rem;
	}
	#jump-top {
		right : 12px;
	}
	body>main>header>footer {
		position : relative;
	}
	#language-selection {
		padding-top : 14px;
	}
}