/* general */

body, div.body, div.block.body {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
	border: 0px none;
	margin: 0;
	padding: 0;
	
	background-color: rgb(0,0,0);
	
	color: rgb(0,0,0);
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 12px;
	line-height: 1.3;
}
@media (max-width: 600px), (max-height: 600px) {
	body, div.body, div.block.body {
		font-size: 10px;
	}
}

body:not(.animations) {
	cursor: progress;
	cursor: wait;
}
.loading, .loading-prev, .loading-next, .loading-v {
	cursor: wait;
	cursor: progress;
}

b {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
}

button {
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
	padding: 0;
}

/*  
https://bugs.webkit.org/show_bug.cgi?id=82489
webkit bug was fixed 05/2014, google chrome obviously has a regression since 07/2016,
original workaround still works (again):
*/
svg {
	max-height: 100%;
}

/*
as standard font:
font-family: 'Open Sans', sans-serif;
font-weights loaded 300 and 600 in each normal and italic

for bold fat headlines:
font-family: 'Bubblegum Sans', cursive;
font-weight 400 in normal

for scribbled help texts with arrows and so:
font-family: 'Shadows Into Light Two', cursive;
font-weight 400 in normal
*/

/* describe */

.describe .name.scientific {
	font-weight: 600;
}
.describe.shortened .name {
	display: block;
	width: 140px;
}
.describe.shortened br {
	display: none;
}
.describe .redlist {
	position: relative;
	white-space: nowrap;
}
.rl-title, .rl-label {
	display: none;
}
.describe .redlist:hover .rl-title {
	display: block;
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	top: -20px;
	height: 17px;
	text-align: center;
	outline: 1px solid rgba(220,190,190,0.9);
	background-color: rgba(240,235,235,0.85);
	color: rgb(180,0,0);
}
.describe .redlist .rl {
	font-weight: 600;
	color: rgb(180,0,0);
	
	position: relative;
	display: inline-block;
	height: 17px;
	width: 17px;
	text-align: center;
	outline: 1px solid rgba(255,0,0,0.1);
	background-color: rgba(255,0,0,0.05);
	vertical-align: baseline;
}
.describe .redlist:hover .rl .rl-label {
	display: block;
	position: absolute;
	z-index: 10;
	left: 0;
	width: auto;
	top: 3px;
	height: 17px;
	text-align: right;
	padding-left: 3px;
	padding-right: 3px;
	outline: 1px solid rgba(220,190,190,0.9);
	background-color: rgba(240,235,235,0.85);
	color: rgb(180,0,0);
	font-weight: 400;
	-o-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-o-transform-origin: left bottom;
	-moz-transform-origin: left bottom;
	-webkit-transform-origin: left bottom;
	transform-origin: left bottom;
}
@media (max-width: 600px) {
	.describe .redlist:hover .rl-title {
		top: -15px;
		height: 13px;
	}
	.describe .redlist .rl {
		height: 13px;
		width: 13px;
	}
	.describe .redlist:hover .rl .rl-label {
		height: 13px;
	}
	.describe br {
		display: none;
	}
}
.describe .counts {
	position: absolute;
	z-index: 1;
	right: 0;
	top: 0;
	text-align: right;
	color: rgb(180,180,180);
	font-weight: 600;
}
.describe .counts .count {
	display: block;
}
.count-title, .count-title-long {
	display: none;
	font-weight: 400;
}
.describe .counts:hover {
	right: -3px;
	outline: rgba(160,160,160,0.9);
	background-color: rgba(235,235,235,0.85);
	padding-left: 3px;
	padding-right: 3px;
}
.describe .counts:hover .count-title {
	display: inline;
	text-align: left;
}
.modal-block .describe .counts:hover .count-title {
	display: none;
}
.modal-block .describe .counts:hover .count-title-long {
	display: inline;
	text-align: left;
}


/* content */

.inner {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.gallery-select .inner {
	/*top: 30px;*/
	top: 72px; /*30+42*/
	bottom: 30px;
}
@media (max-height: 850px) {
	.gallery-select .inner {
		top: 56px; /*30+26*/
	}
}
@media (max-height: 450px) {
	.gallery-select .inner {
		top: 40px; /*30+10*/
	}
}
.taxon-select .inner {
	top: 30px;
	/*bottom: 30px;*/
	bottom: 72px;
}
@media (max-height: 850px) {
	.taxon-select .inner {
		bottom: 41px; /*15+26*/
	}
}
@media (max-height: 450px) {
	.taxon-select .inner {
		bottom: 20px; /*10+10*/
	}
}
/*
@media (max-width: 600px) {
	.taxon-select .inner {
		bottom: 15px;
	}
}
@media (max-height: 500px) {
	.taxon-select .inner {
		bottom: 10px;
	}
}
*/
.photos.gallery-photos .inner {
	/*bottom: 30px;*/
	/* bottom: 72px; /*30+42*/
	bottom: 30px;
}
.photos.gallery-photos .inner .photo {
	bottom: 42px;
}
@media (max-height: 850px) {
	.photos.gallery-photos .inner {
		/*bottom: 56px; /*30+26*/
	}
	.photos.gallery-photos .inner .photo {
		bottom: 26px;
	}
}
@media (max-height: 450px) {
	.photos.gallery-photos .inner {
		/*bottom: 40px; /*30+10*/
	}
	.photos.gallery-photos .inner .photo {
		bottom: 10px;
	}
}
.photos.taxon-photos .inner {
	/*top: 30px;*/
	/*top: 72px; /*30+42*/
	top: 30px;
}
.photos.taxon-photos .inner .photo {
	top: 42px;
}
@media (max-height: 850px) {
	.photos.taxon-photos .inner {
		/*top: 56px; /*30+26*/
	}
	.photos.taxon-photos .inner .photo {
		top: 26px;
	}
}
@media (max-height: 450px) {
	.photos.taxon-photos .inner {
		/*top: 40px; /*30+10*/
	}
	.photos.taxon-photos .inner .photo {
		top: 10px;
	}
}
.thumbs.gallery-thumbs .inner {
}
.thumbs.gallery-thumbs .inner {
}

.photos .inner-bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	-o-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
}
.thumbs .inner-bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.random {
	font-family: 'Shadows Into Light Two', cursive;
	font-weight: 400;
	color: rgb(255,255,255);
	font-size: 14px;
	position: absolute;
	z-index: 5;
	width: 200px;
	height: 200px;
	text-align: center;
}
.random .text {
	width: 100px;
	position: absolute;
	opacity: 0.0;
}
.random .text.triggerable {
	opacity: 1.0;
}
.animations .random .text {
	transition-property: opacity;
	transition-duration: 3.0s;
	transition-timing-function: ease;
}
.random-local {
}
.random-local .text {
	right: 0px;
}
.random-global {
}
.random-global .text {
	left: 0px;
}
.random-taxon {
	top: auto;
}
.random-taxon .text {
	top: 0px;
}
.random-gallery {
	bottom: auto;
}
.random-gallery .text {
	bottom: 0px;
}
.animations .random.animations {
	transition-property: top, bottom, left, right, opacity;
	transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 1.0s;
	transition-timing-function: ease, ease, ease, ease, ease;
}
.random svg {
	opacity: 0.0;
}
.random svg.triggerable {
	opacity: 1.0;
}
.animations .random svg {
	transition-property: opacity;
	transition-duration: 3.0s;
	transition-timing-function: ease;
}
.random .triggerer {
	position: absolute;
	border: 1px solid #fff;
	opacity: 0.0;
	border-radius: 0;
	width: 0;
	height: 0;
}
.animations .random .triggerer.triggered {
	opacity: 1.0;
	border-radius: 100px;
	width: 200px;
	height: 200px;
}
.animations .random .triggerer {
	transition-property: all;
	transition-duration: 0.5s;
	transition-timing-function: linear;
}
.random-local.random-gallery .triggerer {
	/*top left*/
	top: 20px;
	left: 20px;
	transform: translate3d(0,0,0);
}
.random-local.random-gallery .triggerer.triggered {
	transform: translate3d(-100px,-100px,0);
}
.random-global.random-gallery .triggerer {
	/*top right*/
	top: 20px;
	right: 20px;
	transform: translate3d(0,0,0);
}
.random-global.random-gallery .triggerer.triggered {
	transform: translate3d(100px,-100px,0);
}
.random-local.random-taxon .triggerer {
	/*bottom left*/
	bottom: 20px;
	left: 20px;
	transform: translate3d(0,0,0);
}
.random-local.random-taxon .triggerer.triggered {
	transform: translate3d(-100px,100px,0);
}
.random-global.random-taxon .triggerer {
	/*bottom right*/
	bottom: 20px;
	right: 20px;
	transform: translate3d(0,0,0);
}
.random-global.random-taxon .triggerer.triggered {
	transform: translate3d(100px,100px,0);
}

/* animation zwischen den folgenden beiden */
/* NOTE for Firefox: 
	that as of 04.12.2014 dumb Firefox does not understand the property background-size applied to property background-image containing a linear-gradient image.
	don't see a workaround for it without heavily resorting to an animation implemented in javascript, so 
	i ignore the issue, hoping the Mozilla team will fix their bug in a future version
*/
.page-gallery-photos .thumbs .inner-bg, .page-taxon-select .thumbs .inner-bg {
	background-image: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.1), rgba(0,0,0,0.2), rgba(0,0,0,0.4), rgba(0,0,0,0.8), rgba(0,0,0,0.4), rgba(0,0,0,0.2), rgba(0,0,0,0.1), rgba(0,0,0,0.0));
	background-position: 0 100%;
	background-size: 200%;
}
.page-taxon-photos .thumbs .inner-bg, .page-gallery-select .thumbs .inner-bg {
	background-image: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.1), rgba(0,0,0,0.2), rgba(0,0,0,0.4), rgba(0,0,0,0.8), rgba(0,0,0,0.4), rgba(0,0,0,0.2), rgba(0,0,0,0.1), rgba(0,0,0,0.0));
	background-position: 0 0%;
	background-size: 200%;
}
.animations .thumbs .inner-bg {
	-webkit-transition-property: background-position;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease;
	-moz-transition-property: background-position;
	-moz-transition-duration: 0.5s;
	-moz-transition-timing-function: ease;
	-o-transition-property: background-position;
	-o-transition-duration: 0.5s;
	-o-transition-timing-function: ease;
	transition-property: background-position;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}

.content {
	/* TODO: remove this here, instead place a content-bg everywhere in each content, like photos template */
	background-image: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.025), rgba(0,0,0,0.0), rgba(0,0,0,0.025), rgba(0,0,0,0.1));
}
.animations .inner-bg.loading-next::after, .animations .content.loading::after {
	content: ' ';
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100px;
	pointer-events: none;
	-webkit-animation: loadingright 0.5s linear 0s infinite alternate;
	-moz-animation: loadingright 0.5s linear 0s infinite alternate;
	-o-animation: loadingright 0.5s linear 0s infinite alternate;
	animation: loadingright 0.5s linear 0s infinite alternate;
}
@-webkit-keyframes loadingright {
	from { background-image: linear-gradient(270deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(270deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}
@-moz-keyframes loadingright {
	from { background-image: linear-gradient(270deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(270deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}
@-o-keyframes loadingright {
	from { background-image: linear-gradient(270deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(270deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}
@keyframes loadingright {
	from { background-image: linear-gradient(270deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(270deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}
.animations .inner-bg.loading-prev::before, .animations .content.loading::before {
	content: ' ';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100px;
	pointer-events: none;
	-webkit-animation: loadingleft 0.5s linear 0s infinite alternate;
	-moz-animation: loadingleft 0.5s linear 0s infinite alternate;
	-o-animation: loadingleft 0.5s linear 0s infinite alternate;
	animation: loadingleft 0.5s linear 0s infinite alternate;
}
@-webkit-keyframes loadingleft {
	from { background-image: linear-gradient(90deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(90deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}
@-moz-keyframes loadingleft {
	from { background-image: linear-gradient(90deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(90deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}
@-o-keyframes loadingleft {
	from { background-image: linear-gradient(90deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(90deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}
@keyframes loadingleft {
	from { background-image: linear-gradient(90deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(90deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}

.animations .content.loading-v::after {
	content: ' ';
	display: block;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	height: 100px;
	pointer-events: none;
	-webkit-animation: loadingbottom 0.5s linear 0s infinite alternate;
	-moz-animation: loadingbottom 0.5s linear 0s infinite alternate;
	-o-animation: loadingbottom 0.5s linear 0s infinite alternate;
	animation: loadingbottom 0.5s linear 0s infinite alternate;
}
@-webkit-keyframes loadingbottom {
	from { background-image: linear-gradient(0deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}
@-moz-keyframes loadingbottom {
	from { background-image: linear-gradient(0deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}
@-o-keyframes loadingbottom {
	from { background-image: linear-gradient(0deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}
@keyframes loadingbottom {
	from { background-image: linear-gradient(0deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}
.animations .content.loading-v::before {
	content: ' ';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 100px;
	pointer-events: none;
	-webkit-animation: loadingtop 0.5s linear 0s infinite alternate;
	-moz-animation: loadingtop 0.5s linear 0s infinite alternate;
	-o-animation: loadingtop 0.5s linear 0s infinite alternate;
	animation: loadingtop 0.5s linear 0s infinite alternate;
}
@-webkit-keyframes loadingtop {
	from { background-image: linear-gradient(180deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}
@-moz-keyframes loadingtop {
	from { background-image: linear-gradient(180deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}
@-o-keyframes loadingtop {
	from { background-image: linear-gradient(180deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}
@keyframes loadingtop {
	from { background-image: linear-gradient(180deg, rgba(0,0,0,1.0) 0px, rgba(0,0,0,0.1) 30px, rgba(0,0,0,0.0) 100px); }
	to { background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.05) 30px, rgba(0,0,0,0.0) 100px); }
}

.locked {
	pointer-events: none;
	cursor: wait;
}
.initializing {
	pointer-events: none;
	cursor: wait;
}
.initializing .sibling, .initializing .scroll-button {
	opacity: 0.0;
}

.content {
	position: relative;
	top: 0;
	left: 0;
	border: 0px none;
	margin: 0;
	padding: 0;
	
	background-color: rgb(255,255,255);
}
.animations .content {
	-webkit-transition-property: top, left, bottom, right;
	-webkit-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s;
	-webkit-transition-timing-function: ease, ease, ease, ease;
	-moz-transition-property: top, left, bottom, right;
	-moz-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s;
	-moz-transition-timing-function: ease, ease, ease, ease;
	-o-transition-property: top, left, bottom, right;
	-o-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s;
	-o-transition-timing-function: ease, ease, ease, ease;
	transition-property: top, left, bottom, right;
	transition-duration: 0.5s, 0.5s, 0.5s, 0.5s;
	transition-timing-function: ease, ease, ease, ease;
}
.animations .content.scrollable-acting {
	-webkit-transition-property: none;
	-moz-transition-property: none;
	-o-transition-property: none;
	transition-property: none;
}

.content-bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-image: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.025), rgba(0,0,0,0.0), rgba(0,0,0,0.025), rgba(0,0,0,0.1));
	background-color: rgb(255,255,255);
}

.block {
	position: relative;
	overflow: hidden;

	background-color: rgb(0,0,0);
}

.scrollable-acting-enabled .content[scrollable] {
	cursor: default;
	cursor: move;
	cursor: all-scroll;
	cursor: -webkit-grab;
	cursor: grab;
}
.scrollable-acting-enabled .content.scrollable-acting[scrollable], 
.scrollable-acting-enabled .content.scrollable-acting[scrollable] .content[scrollable],
.scrollable-acting-enabled .content.scrollable-acting[scrollable] * {
	cursor: -webkit-grabbing !important;
	cursor: grabbing !important;
}

#status-outline {
	opacity: 0.0;
	outline-offset: -5px;
	outline: 5px solid rgba(255,0,0,0.3);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -10;
	pointer-events: none;
}
.scrollable-acting-disabled #status-outline {
	opacity: 1.0;
	z-index: 11000;
}
.scrollable-acting-disabled * {
	cursor: text !important;
}

.animations .flashing, .animations #status-outline.flashing {
	-webkit-animation: flashing 100ms linear 0s infinite alternate;
	-moz-animation: flashing 100ms linear 0s infinite alternate;
	-o-animation: flashing 100ms linear 0s infinite alternate;
	animation: flashing 100ms linear 0s infinite alternate;
}
@-webkit-keyframes flashing {
	from { opacity: 1.0 }
	to { opacity: 0.3 }
}
@-moz-keyframes flashing {
	from { opacity: 1.0 }
	to { opacity: 0.3 }
}
@-o-keyframes flashing {
	from { opacity: 1.0 }
	to { opacity: 0.3 }
}
@keyframes flashing {
	from { opacity: 1.0 }
	to { opacity: 0.3 }
}

#status-outline span {
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	background-color: rgba(255,0,0,0.3);
	color: #fff;
	font-weight: bold;
}

.scroll-button {
	cursor: pointer;
	position: absolute;
	z-index: 20;
	opacity: 0.0;
}
.animations .scroll-button {
	-webkit-transition-property: width, height, opacity;
	-webkit-transition-duration: 0.5s, 0.5s, 0.5s;
	-webkit-transition-timing-function: ease, ease, ease;
	-moz-transition-property: width, height, opacity;
	-moz-transition-duration: 0.5s, 0.5s, 0.5s;
	-moz-transition-timing-function: ease, ease, ease;
	-o-transition-property: width, height, opacity;
	-o-transition-duration: 0.5s, 0.5s, 0.5s;
	-o-transition-timing-function: ease, ease, ease;
	transition-property: width, height, opacity;
	transition-duration: 0.5s, 0.5s, 0.5s;
	transition-timing-function: ease, ease, ease;
}

.scroll-button span::before {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border: 0px solid rgba(0,0,0,0.0);
}
.animations .scroll-button span::before {
	transition-property: all;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
.scroll-button span::after {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border: 0px solid rgba(255,255,255,0.0);
}
.animations .scroll-button span::after {
	transition-property: all;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}

.scroll-button.shown {
	opacity: 1.0;
}

.scroll-button.shown span::before {
	content: '';
}
.scroll-button.shown span::after {
	content: '';
}

.scroll-button.left {
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	
	background-image: linear-gradient(90deg, rgba(0,0,0,0.8), rgba(0,0,0,0.4), rgba(0,0,0,0.2), rgba(0,0,0,0.05), rgba(0,0,0,0.0));
}
.scroll-button.left.shown {
	width: 30px;
}
.scroll-button.left span::before {
	left: 0;
	top: 50%;
}
.scroll-button.left.shown span::before, .menu-bar .menu-options .scroll-button.left.shown span::before {
	left: 15px;
	top: calc(50% - 10px);
	
	border-top-width: 10px;
	border-right-width: 10px;
	border-bottom-width: 10px;
	border-right-color: rgba(0,0,0,1.0);
	opacity: 1.0;
}
.big-scroll-buttons .scroll-button.left.shown span::before {
	top: calc(50% - 20px);
	border-top-width: 20px;
	border-right-width: 20px;
	border-bottom-width: 20px;
	opacity: 0.5;
}
.scroll-button.left span::after {
	left: 0;
	top: 50%;
}
.scroll-button.left.shown span::after, .menu-bar .menu-options .scroll-button.left.shown span::after {
	left: 15px;
	top: calc(50% - 10px);
	
	border-top-width: 10px;
	border-right-width: 10px;
	border-bottom-width: 10px;
	border-right-color: rgba(255,255,255,1.0);
}
.big-scroll-buttons .scroll-button.left.shown span::after {
	left: 16px;
	top: calc(50% - 18px);
	border-top-width: 18px;
	border-right-width: 18px;
	border-bottom-width: 18px;
}

.scroll-button.right {
	top: 0;
	bottom: 0;
	right: 0;
	width: 0;
	
	background-image: linear-gradient(270deg, rgba(0,0,0,0.8), rgba(0,0,0,0.4), rgba(0,0,0,0.2), rgba(0,0,0,0.05), rgba(0,0,0,0.0));
}
.scroll-button.right.shown {
	width: 30px;
}
.scroll-button.right span::before {
	right: 0;
	top: 50%;
}
.scroll-button.right.shown span::before, .menu-bar .menu-options .scroll-button.right.shown span::before {
	right: 15px;
	top: calc(50% - 10px);
	
	border-top-width: 10px;
	border-left-width: 10px;
	border-bottom-width: 10px;
	border-left-color: rgba(0,0,0,1.0);
	opacity: 1.0;
}
.big-scroll-buttons .scroll-button.right.shown span::before {
	top: calc(50% - 20px);
	border-top-width: 20px;
	border-left-width: 20px;
	border-bottom-width: 20px;
	opacity: 0.5;
}
.scroll-button.right span::after {
	right: 0;
	top: 50%;
}
.scroll-button.right.shown span::after, .menu-bar .menu-options .scroll-button.right.shown span::after {
	right: 15px;
	top: calc(50% - 10px);
	
	border-top-width: 10px;
	border-left-width: 10px;
	border-bottom-width: 10px;
	border-left-color: rgba(255,255,255,1.0);
}
.big-scroll-buttons .scroll-button.right.shown span::after {
	right: 16px;
	top: calc(50% - 18px);
	border-top-width: 18px;
	border-left-width: 18px;
	border-bottom-width: 18px;
}

.scroll-button.top {
	left: 0;
	right: 0;
	top: 0;
	height: 0;
	
	background-image: linear-gradient(180deg, rgba(0,0,0,0.8), rgba(0,0,0,0.4), rgba(0,0,0,0.2), rgba(0,0,0,0.05), rgba(0,0,0,0.0));
}
.scroll-button.top.shown {
	height: 30px;
}
.scroll-button.top span::before {
	top: 0;
	left: 50%;
}
.scroll-button.top.shown span::before, .menu-bar .menu-options .scroll-button.top.shown span::before {
	top: 15px;
	left: calc(50% - 10px);
	
	border-right-width: 10px;
	border-bottom-width: 10px;
	border-left-width: 10px;
	border-bottom-color: rgba(0,0,0,1.0);
	opacity: 1.0;
}
.big-scroll-buttons .scroll-button.top.shown span::before {
	left: calc(50% - 20px);
	border-right-width: 20px;
	border-bottom-width: 20px;
	border-left-width: 20px;
	opacity: 0.5;
}
.scroll-button.top span::after {
	top: 0;
	left: 50%;
}
.scroll-button.top.shown span::after, .menu-bar .menu-options .scroll-button.top.shown span::after {
	top: 15px;
	left: calc(50% - 10px);
	
	border-right-width: 10px;
	border-bottom-width: 10px;
	border-left-width: 10px;
	border-bottom-color: rgba(255,255,255,1.0);
}
.big-scroll-buttons .scroll-button.top.shown span::after {
	top: 16px;
	left: calc(50% - 18px);
	border-right-width: 18px;
	border-bottom-width: 18px;
	border-left-width: 18px;
}

.scroll-button.bottom {
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
	
	background-image: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0.4), rgba(0,0,0,0.2), rgba(0,0,0,0.05), rgba(0,0,0,0.0));
}
.scroll-button.bottom.shown {
	height: 30px;
}
.scroll-button.bottom span::before {
	bottom: 0;
	left: 50%;
}
.scroll-button.bottom.shown span::before, .menu-bar .menu-options .scroll-button.bottom.shown span::before {
	bottom: 15px;
	left: calc(50% - 10px);
	
	border-right-width: 10px;
	border-top-width: 10px;
	border-left-width: 10px;
	border-top-color: rgba(0,0,0,1.0);
	opacity: 1.0;
}
.big-scroll-buttons .scroll-button.bottom.shown span::before {
	left: calc(50% - 20px);
	border-right-width: 20px;
	border-top-width: 20px;
	border-left-width: 20px;
	opacity: 0.5;
}
.scroll-button.bottom span::after {
	bottom: 0;
	left: 50%;
}
.scroll-button.bottom.shown span::after, .menu-bar .menu-options .scroll-button.bottom.shown span::after {
	bottom: 15px;
	left: calc(50% - 10px);
	
	border-right-width: 10px;
	border-top-width: 10px;
	border-left-width: 10px;
	border-top-color: rgba(255,255,255,1.0);
}
.big-scroll-buttons .scroll-button.bottom.shown span::after {
	bottom: 16px;
	left: calc(50% - 18px);
	border-right-width: 18px;
	border-top-width: 18px;
	border-left-width: 18px;
}

/* menu bar */

.menu-bar {
	position: absolute;
	top: 20px;
	left: -40px;
	right: -40px;
	height: 30px;
	
	z-index: 50;
	
	-o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	
	background-color: rgba(0,0,0,1.0);
	background-image: linear-gradient(358deg, rgba(255,255,255,0.0), rgba(255,255,255,0.2), rgba(255,255,255,0.3), rgba(255,255,255,0.2), rgba(255,255,255,0.0));
	
	color: rgb(255,255,255);
}
.animations .menu-bar {	
	-webkit-transition-property: top, color, background-color;
	-webkit-transition-duration: 0.5s, 0.5s, 0.5s;
	-webkit-transition-timing-function: ease, ease, ease;
	-moz-transition-property: top, color, background-color;
	-moz-transition-duration: 0.5s, 0.5s, 0.5s;
	-moz-transition-timing-function: ease, ease, ease;
	-o-transition-property: top, color, background-color;
	-o-transition-duration: 0.5s, 0.5s, 0.5s;
	-o-transition-timing-function: ease, ease, ease;
	transition-property: top, color, background-color;
	transition-duration: 0.5s, 0.5s, 0.5s;
	transition-timing-function: ease, ease, ease;
}

.hamburger {
	cursor: pointer;
	position: absolute;
	left: 45px;
	top: 5px;
	bottom: 5px;
	width: 25px;
	border-top: 4px solid rgb(255,255,255);
	border-bottom: 4px solid rgb(255,255,255);
}
.hamburger span {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% - 2px);
	bottom: calc(50% - 2px);
	background-color: rgb(255,255,255);
}

.menu-info {
	display: block;
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 75px;
	right: 45px;
}
.menu-info a, .menu-info a:hover, .menu-info a:active, .menu-info a:visited {
	color: rgb(255,255,255);
}

.menu-title {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	white-space: nowrap;
	max-width: calc(100% - 20px); /* for animation */
	overflow: hidden;
	text-overflow: ellipsis;
}
.menu-title br {
	display: none;
}
.show-options .menu-title {
	left: -1000px;
}
.menu-copy-visible .menu-title {
	/*max-width: calc(100% - 280px);*/
	max-width: calc(100% - 320px);
}
.animations .menu-title {
	-webkit-transition-property: left, max-width;
	-webkit-transition-duration: 0.5s, 0.5s;
	-webkit-transition-timing-function: ease, ease;
	-moz-transition-property: left, max-width;
	-moz-transition-duration: 0.5s, 0.5s;
	-moz-transition-timing-function: ease, ease;
	-o-transition-property: left, max-width;
	-o-transition-duration: 0.5s, 0.5s;
	-o-transition-timing-function: ease, ease;
	transition-property: left, max-width;
	transition-duration: 0.5s, 0.5s;
	transition-timing-function: ease, ease;
}
.menu-title .title {
	font-family: 'Bubblegum Sans', cursive;
	font-weight: 400;
	font-size: 18px;
}

.menu-copy {
	font-size: 7px;
	text-align: right;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	/*max-width: 280px;*/
	max-width: 320px;
	opacity: 0.0;
	/* note: no brwoser support for hanging punctuation yet, so just to make the point ... */
	hanging-punctuation: force-end;
	hanging-punctuation: all;
}
.show-options .menu-copy {
	right: -1000px;
}
.menu-copy-visible .menu-copy {
	opacity: 1.0;
}
.animations .menu-copy {
	-webkit-transition-property: right, opacity;
	-webkit-transition-duration: 0.5s, 0.5s;
	-webkit-transition-timing-function: ease, ease;
	-moz-transition-property: right, opacity;
	-moz-transition-duration: 0.5s, 0.5s;
	-moz-transition-timing-function: ease, ease;
	-o-transition-property: right, opacity;
	-o-transition-duration: 0.5s, 0.5s;
	-o-transition-timing-function: ease, ease;
	transition-property: right, opacity;
	transition-duration: 0.5s, 0.5s;
	transition-timing-function: ease, ease;
}
.menu-copy span {
}
.menu-copy-open {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 20px;
	background-color: rgba(255,255,255,0.75);
	color: rgb(0,0,0);
	text-align: center;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	font-family: 'Bubblegum Sans', cursive;
	font-weight: 400;
	font-size: 18px;
	cursor: pointer;
	opacity: 1.0;
}
.menu-copy-visible .menu-copy-open {
	opacity: 0.0;
	cursor: auto;
}

.menu-options {
	position: absolute;
	left: 0;
	right: -5px;
	top: -5px;
	bottom: -5px;
	opacity: 0.0;
	z-index: -10;
}
.block.menu-options {
	background-color: rgba(0,0,0,0.0);
}
.show-options .menu-options {
	opacity: 1.0;
	z-index: 20;
}
.animations .menu-options {
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease;
	-moz-transition-property: opacity;
	-moz-transition-duration: 0.5s;
	-moz-transition-timing-function: ease;
	-o-transition-property: opacity;
	-o-transition-duration: 0.5s;
	-o-transition-timing-function: ease;
	transition-property: opacity;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
.menu-options .content {
	height: 30px;
}
.menu-options .inner {
	white-space: nowrap;
	text-align: center;
}
.menu-options .content {
	background-image: linear-gradient(90deg, rgba(0,0,0,0.8), rgba(0,0,0,0.4), rgba(0,0,0,0.2), rgba(0,0,0,0.1), rgba(0,0,0,0.05), rgba(0,0,0,0.025), rgba(0,0,0,0.0125), rgba(0,0,0,0.0), rgba(0,0,0,0.0125), rgba(0,0,0,0.025), rgba(0,0,0,0.05), rgba(0,0,0,0.1), rgba(0,0,0,0.2), rgba(0,0,0,0.4), rgba(0,0,0,0.8)), linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.025), rgba(0,0,0,0.0), rgba(0,0,0,0.025), rgba(0,0,0,0.1));
}

.menu-option, a.menu-option, a.menu-option:visited, a.menu-option:active, a.menu-option:hover {
	display: inline-block;
	height: 30px;
	padding-left: 15px;
	padding-right: 5px;
	cursor: pointer;
	color: rgb(0,0,0);
	line-height: 30px;
	text-decoration: none;
}
.menu-option:hover, a.menu-option:hover {
	text-decoration: underline;
}
.menu-option.selected {
	font-weight: bold;
}

.title-expand {
	position: absolute;
	left: 0;
	right: 0;
	background-color: #eee;
	opacity: 0.92;
}
.animations .title-expand {
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease;
	-moz-transition-property: opacity;
	-moz-transition-duration: 0.5s;
	-moz-transition-timing-function: ease;
	-o-transition-property: opacity;
	-o-transition-duration: 0.5s;
	-o-transition-timing-function: ease;
	transition-property: opacity;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
.title-clip {
	overflow: hidden;
	text-overflow: ellipsis;
}
.title-shade {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	pointer-events: none;
}
.animations .title-clip {
	-webkit-transition-property: max-height;
	-webkit-transition-duration: 0.15s;
	-webkit-transition-timing-function: ease;
	-moz-transition-property: max-height;
	-moz-transition-duration: 0.15s;
	-moz-transition-timing-function: ease;
	-o-transition-property: max-height;
	-o-transition-duration: 0.15s;
	-o-transition-timing-function: ease;
	transition-property: max-height;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}
.title-expand.above {
	bottom: 30px;
}	
.title-expand.above .title-shade {
	background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1), rgba(0,0,0,0.05), rgba(0,0,0,0.025), rgba(0,0,0,0.0125), rgba(0,0,0,0.00625));
	-o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
}
.title-expand.below {
	top: 30px;
}
.title-expand.below .title-shade {
	background-image: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1), rgba(0,0,0,0.05), rgba(0,0,0,0.025), rgba(0,0,0,0.0125), rgba(0,0,0,0.00625));
	-o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
}
.title-expand.hidden {
	bottom: 30px;
	top: 30px;
}
.title-expand.hidden { /*, .scrollable-acting-global .title-expand {*/
	opacity: 0;
}
.title-expand.hidden .title-clip { /*, .scrollable-acting-global .title-expand .title-clip {*/
	max-height: 0!important;
}
.title-close {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-image: linear-gradient(0deg, rgba(240,240,240,1.0), rgba(240,240,240,0.5), rgba(240,240,240,0.2), rgba(240,240,240,0.05), rgba(240,240,240,0.0), rgba(240,240,240,0.0));
	pointer-events: none;
}
.animations .title-close {
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.15s;
	-webkit-transition-timing-function: ease;
	-moz-transition-property: opacity;
	-moz-transition-duration: 0.15s;
	-moz-transition-timing-function: ease;
	-o-transition-property: opacity;
	-o-transition-duration: 0.15s;
	-o-transition-timing-function: ease;
	transition-property: opacity;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}
.title-expand.opened .title-close, .title-expand.closed .title-close {
	opacity: 0.0;
}
.title-expand.closed.openable .title-close {
	opacity: 1.0;
}
.title-expand.openable {
	cursor: row-resize;
}
.title-expand.openable::after {
	content: '';
	position: absolute;
	z-index: 3;
	height: 10px;
	left: calc(50% - 20px);
	right: calc(50% - 20px);
	background-color: #eee;
}
.page-gallery-photos .title-expand.openable::after, .page-taxon-select .title-expand.openable::after {
	top: -10px;
	border-top-left-radius: 40px 20px;
	border-top-right-radius: 40px 20px;
	-o-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.30);
	-moz-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.30);
	-webkit-box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.30);
	box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.30);
}
.page-taxon-photos .title-expand.openable::after, .page-gallery-select .title-expand.openable::after {
	bottom: -10px;
	border-bottom-left-radius: 40px 20px;
	border-bottom-right-radius: 40px 20px;
	-o-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.30);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.30);
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.30);
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.30);
}
.title-inner {
	padding-left: 75px;
	padding-right: 45px;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #000;
}

/* splash screen */

.splash {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 100;
	opacity: 1.0;
	background-color: rgba(0,0,0,1.0);
	
	-webkit-transition-property: color, background-color, top, bottom, left, right, opacity;
	-webkit-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
	-webkit-transition-timing-function: ease, ease, step-end, step-end, step-end, step-end, ease;
	-moz-transition-property: color, background-color, top, bottom, left, right, opacity;
	-moz-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
	-moz-transition-timing-function: ease, ease, step-end, step-end, step-end, step-end, ease;
	-o-transition-property: color, background-color, top, bottom, left, right, opacity;
	-o-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
	-o-transition-timing-function: ease, ease, step-end, step-end, step-end, step-end, ease;
	transition-property: color, background-color, top, bottom, left, right, opacity;
	transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
	transition-timing-function: ease, ease, step-end, step-end, step-end, step-end, ease;
	
	background-image: linear-gradient(358deg, rgba(255,255,255,0.1), rgba(255,255,255,0.15), rgba(255,255,255,0.175), rgba(255,255,255,0.2), rgba(255,255,255,0.175), rgba(255,255,255,0.15), rgba(255,255,255,0.1));
}
.splash.splash-off {
	top: -100%;
	bottom: 100%;
	opacity: 0.0;
	background-color: rgba(255,255,255,0.5);
}
.splash.splash-off.really-off {
	display: none;
}

.splash .wrap {
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% - 40px);
	color: rgb(255,255,255);
}
.splash .wrap-svg {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	height: 100%;
	width: 100%;
}
.splash .wrap-svg .wrapb-svg {
	
}
.splash .title {
	display: block;
	text-align: center;
	font-family: 'Bubblegum Sans', cursive;
	font-weight: 400;
	font-size: 6vw;
}
.splash .text {
	display: block;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 2vw;
	margin-top: 5px;
}
.splash .loading {
	display: block;
	text-align: center;
}
.splash .loading  span{
	display: inline-block;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
	width: 25px;
	height: 30px;
	background-color: rgba(255,255,255, 0.0);
	-webkit-transition-property: opacity, background-color, border-color;
	-webkit-transition-duration: 0.5s, 0.5s, 0.5s;
	-webkit-transition-timing-function: ease, ease, ease;
	-moz-transition-property: opacity, background-color, border-color;
	-moz-transition-duration: 0.5s, 0.5s, 0.5s;
	-moz-transition-timing-function: ease, ease, ease;
	-o-transition-property: opacity, background-color, border-color;
	-o-transition-duration: 0.5s, 0.5s, 0.5s;
	-o-transition-timing-function: ease, ease, ease;
	transition-property: opacity, background-color, border-color;
	transition-duration: 0.5s, 0.5s, 0.5s;
	transition-timing-function: ease, ease, ease;
	border-style: solid;
	border-color: rgba(255,255,255,0.0);
	border-left-width: 5px;
	border-right-width: 0px;
	border-top-width: 0px;
	border-bottom-width: 0px;
	margin: 15px;
}
.splash .loading span.doshow {
	/* opacity: 1.0; */
	border-color: rgba(255,255,255,1.0);
}
.splash .loading span.doflash {
	background-color: rgba(255,255,255, 1.0);
}
.splash .loading span.doright {
	border-left-width: 0px;
	border-right-width: 5px;
}

/* photo pages */

.photos .photo {
	position: absolute;
	top: 0;
	bottom: 0;
}
.photos .photo .title {
	position: absolute;
	top: 30px;
	left: 15px;
	right: 85px;
	height: 50px;
}
.hideable {
	display: inline;
}
@media (max-width: 600px) {
	.photos .photo .title {
		top: 15px;
		right: 60px;
	}
	.hideable {
		display: inline-block;
		vertical-align: bottom;
		width: 15px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.nohiding .hideable {
		display: inline;
		width: auto;
		overflow: visible;
		white-space: normal;
	}
}
.photos .photo .image {
	position: absolute;
	bottom: 30px;
	left: 15px;
	right: 15px;
	height: calc(100% - 130px);
}
.photos .photo .image img {	
	-o-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	
	background-color: rgba(220,210,180,1.0);
}

.photos .photo .flipper {
	position: absolute;
	top: 30px;
	right: 15px;
	height: 50px;
	cursor: pointer; /* needed for safari, even if it doesnt make any sense here */
}
.photos .photo .flipper::before {
	content: '?';
	display: block;
	position: absolute;
	bottom: -5px;
	right: 0;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	text-align: center;
	font-family: 'Bubblegum Sans', cursive;
	font-size: 18px;
	line-height: 30px;
	cursor: pointer;
	
	-o-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
}

.photos .photo .go-here {
	position: absolute;
	top: 30px;
	right: 15px;
	height: 15px;
	border-radius: 15px;
	cursor: pointer;
	text-align: right;
	color: #000;
	text-decoration: none;
}
.photos .photo .go-here:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	/*FK160422:*/
	.photos .photo .go-here {
		top: 15px;
		height: 30px;
		width: 40px;
	}
}

.photos .photo .description {
	position: absolute;
	bottom: 30px;
	left: 15px;
	right: 15px;
	overflow: hidden;
	
	height: calc(100% - 160px);
	padding: 15px;
	background-color: rgba(255,255,255,0.9);
	-o-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
}

.photos .photo.flippable .image {
	-o-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-o-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.photos .photo.flippable .description {
	-o-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-o-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.photos .photo.flippable.flipped .image {
	-o-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.photos .photo.flippable.flipped .description {
	-o-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.animations .photos .photo.flippable .image, .animations .photos .photo.flippable .description {
	transition-property: transform, -o-transform, -moz-transform, -webkit-transform;
	transition-duration: 1s;
	transition-timing-function: ease;
}

/* thumbnails pages */

.thumbs .photo {
	position: absolute;
	left: 0; /* overridden, as is width */
	top: 0;
	bottom: 0;
}
.page-taxon-photos .thumbs .photo, .page-gallery-select .thumbs .photo {
	top: 5px;
}
.page-gallery-photos .thumbs .photo, .page-taxon-select .thumbs .photo {
	bottom: 5px;
}

.thumbs .photo .title {
	display: none; /* TODO: display on hover ? what with touch ? */

	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 30px;
	right: 0px;
	font-size: 80%;
	line-height: 1.1;
	word-wrap: break-word;
	overflow: hidden;
	white-space: normal;
	padding: 5px;
	pointer-events: none;
}
.thumbs.recent-thumbs .photo .title {
	top: 5px;
} 
.thumbs .photo .title .name, 
.thumbs .photo .title .stage,
.thumbs .photo .title .gender,
.thumbs .photo .title .location,
.thumbs .photo .title .country,
.thumbs .photo .title .date, 
.thumbs .photo .title .state {
	display: inline;
	word-wrap: break-word;
	white-space: normal;
}
.thumbs .photo .title .redlist .rl {
	width: 13px;
	height: 13px;
}
.thumbs .photo:hover .title {
	display: block;
	z-index: 5;
	-o-text-shadow: 0px 0px 3px #fff, 0px 0px 6px #fff;
	-moz-text-shadow: 0px 0px 3px #fff, 0px 0px 6px #fff;
	-webkit-text-shadow: 0px 0px 3px #fff, 0px 0px 6px #fff;
	text-shadow: 0px 0px 3px #fff, 0px 0px 6px #fff;
	background-image: linear-gradient(155deg, rgba(255,255,255,1.0), rgba(255,255,255,0.5), rgba(255,255,255,0.25), rgba(255,255,255,0.125), rgba(255,255,255,0.0625));
}
.thumbs .photo .image {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 30px;
	right: 0px;
	cursor: pointer;
}
.thumbs .photo .image img {	
	-o-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	
	background-color: rgba(220,210,180,1.0);
}

.thumbs.recent-thumbs .photo .image {
	top: 5px;
}

.photo.selected img {
	outline: 5px solid rgba(237,0,0,0.5);
}

/* taxon select page */

.taxon-select .inner .siblings .inner {
	top: 0px;
	bottom: 0px;
}

.tree-container {
	position: absolute;
	top: 30px;
	bottom: 30px;
	left: 0px;
	right: 0px;
	overflow: hidden;
}

.siblings-fade {
	position: absolute;
	z-index: 24;
	left: 0px;
	right: 0px;
	top: 0px;
	height: 60px;
	background-image: linear-gradient(180deg, rgba(0,0,0,0.8), rgba(0,0,0,0.4), rgba(0,0,0,0.2), rgba(0,0,0,0.1), rgba(0,0,0,0.0)), linear-gradient(180deg, rgba(237,237,237,0.0), rgba(237,237,237,1.0), rgba(237,237,237,1.0), rgba(237,237,237,0.0));
	pointer-events: none;
}

.lineage {
	position: absolute;
	z-index: 25;
	pointer-events: none;
	background-color: rgba(0,0,0,0.5);
	
	-o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
}
.lineage.left, .lineage.right {
	top: 25px;
	bottom: 25px;
	width: 5px;
}
.lineage.top {
	top: 25px;
	height: 5px;
}
.lineage.bottom {
	bottom: 25px;
	height: 5px;
}

.lineage-selected {
	position: absolute;
	z-index: 26;
	pointer-events: none;
	background-color: rgba(237,0,0,0.5);
	
	-o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
}
.lineage-selected.left, .lineage-selected.right {
	bottom: 120px; /* 20px + siblingHeight */
	height: 120px; /* siblingHeight + 4 * 5px */
	width: 5px;
}
.lineage-selected.top {
	bottom: 235px; /* 20px + siblingHeight + 3 * 5px + siblingHeight */
	height: 5px;
}
.lineage-selected.bottom {
	bottom: 120px; /* 20px + siblingHeight */
	height: 5px;
}
.leaf-selected .lineage-selected.left, .leaf-selected .lineage-selected.right {
	bottom: 20px;
}
.leaf-selected .lineage-selected.top {
	bottom: 135px; /* 20px + siblingHeight + 3 * 5px */
}
.leaf-selected .lineage-selected.bottom {
	bottom: 20px;
}

.lineage-selected-buttons {
	position: absolute;
	bottom: 125px;
	height: 30px;
	z-index: 27;
	
	background-image: linear-gradient(180deg, rgba(237,0,0,0.0), rgba(237,0,0,0.1), rgba(237,0,0,0.2));
}
.leaf-selected .lineage-selected-buttons {
	bottom: 25px;
}

.lineage-root-buttons {
	position: absolute;
	top: 133px;
	height: 30px;
	z-index: 27;
	
	background-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.4), rgba(0,0,0,0.0));
}

.lineage-selected-buttons .button, .lineage-root-buttons .button {
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 30px;
	cursor: pointer;
}

.lineage-root-buttons .button .hover, .lineage-selected-buttons .button .hover {
	display: none;
	position: absolute;
	z-index: 10;
	left: -25px;
	right: -25px;
	padding: 5px;
	text-align: center;
	font-family: 'Shadows Into Light Two', cursive;
	color: rgb(180,0,0);
	outline: 1px solid rgba(255,215,215,0.6);
	background-color: rgba(252,225,225,0.6);
}
.lineage-root-buttons .button .hover {
	top: 30px;
}
.lineage-selected-buttons .button .hover {
	bottom: 30px;
}
.lineage-root-buttons .button:hover .hover, .lineage-selected-buttons .button:hover .hover {
	display: block;
}

@media (max-width: 600px), (max-height: 600px) {
	.siblings-fade {
		height: 40px;
	}
	.lineage.left, .lineage.right {
		top: 10px;
	}
	.lineage.top {
		top: 10px;
	}
	.lineage-selected.left, .lineage-selected.right {
		bottom: 85px;
		height: 85px;
	}
	.lineage-selected.top {
		bottom: 165px;
	}
	.lineage-selected.bottom {
		bottom: 85px;
	}
	.leaf-selected .lineage-selected.left, .leaf-selected .lineage-selected.right {
		bottom: 20px;
	}
	.leaf-selected .lineage-selected.top {
		bottom: 100px;
	}
	.leaf-selected .lineage-selected.bottom {
		bottom: 20px;
	}
	.lineage-selected-buttons {
		bottom: 90px;
	}
}
@media (max-height: 400px) {
	.siblings-fade {
		height: 35px;
	}
	.lineage.left, .lineage.right {
		top: 5px;
	}
	.lineage.top {
		top: 5px;
	}
	.lineage-selected.left, .lineage-selected.right {
		bottom: 65px;
		height: 65px;
	}
	.lineage-selected.top {
		bottom: 125px;
	}
	.lineage-selected.bottom {
		bottom: 65px;
	}
	.leaf-selected .lineage-selected.left, .leaf-selected .lineage-selected.right {
		bottom: 20px;
	}
	.leaf-selected .lineage-selected.top {
		bottom: 80px;
	}
	.leaf-selected .lineage-selected.bottom {
		bottom: 20px;
	}
	.lineage-selected-buttons {
		bottom: 70px;
	}
}

.lineage-selected-buttons .button-news, .lineage-root-buttons .button-news {
	left: 10px;
}
.lineage-selected-buttons .button-redlist, .lineage-root-buttons .button-redlist {
	left: 130px;
}
.lineage-selected-buttons .button-index, .lineage-root-buttons .button-index {
	left: 170px;
}
.lineage-selected-buttons .button-search, .lineage-root-buttons .button-search {
	left: 50px;
}
.lineage-selected-buttons .button-info, .lineage-root-buttons .button-info {
	left: 90px;
}

.siblings {
	position: absolute;
}

.siblings .inner {
	-o-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
	-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
	-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
}

.sibling {
	position: absolute;
	top: 0px;
	bottom: 0px;
	overflow: hidden;
	
	-o-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
	-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
	-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
	
	cursor: pointer;
}

.not-selected .sibling {
	opacity: 0.4;
}

.sibling .describe {
	position: absolute;
	left: 15px;
	right: 15px;
	top: 10px;
	bottom: 10px;
}

.shortcuts .inner {
	top: 0px;
	bottom: 0px;
}
.shortcut {
	position: absolute;
	cursor: pointer;
}
.shortcut.noclick {
	cursor: auto;
}
.shortcut:hover {
	font-weight: 600;
}

.shortcut .title {
	font-family: 'Shadows Into Light Two', cursive;
	font-weight: 400;
	color: rgb(0,0,0);
	font-size: 1.2vh;
	display: block;
	text-align: center;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 5px;
}

.shortcut .scribble {
	position: absolute;
	display: block;
	top: 5px;
	left: 0px; 
	right: 0px;
	bottom: 25%;
}
.shortcut .scribble svg {
	margin: 0px;
}

/* gallery select page */

.gallery-select .photo, .gallery-select .group {
	position: absolute;
	left: 0; /* overridden, as is width */
	top: 0;
}
.gallery-select .photo {
}

.gallery-select .photo.gallery-selected {
	outline: 5px solid rgba(237,0,0,0.5);
	
	-o-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.40), 0px 0px 15px 5px rgba(0, 0, 0, 0.40);
	-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.40), 0px 0px 15px 5px rgba(0, 0, 0, 0.40);
	-webkit-box-shadow: inset 0px 1px 20px 0px rgba(0, 0, 0, 0.40), 0px 0px 15px 5px rgba(0, 0, 0, 0.40);
	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.40), 0px 0px 15px 5px rgba(0, 0, 0, 0.40);
}

.gallery-select .group {
	bottom: 0;
}
.gallery-select .photo .title, .gallery-select .group .title {
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	height: 50px;
	font-weight: 600;
}
.gallery-select .group .title {
}
.gallery-select .photo .title {
	font-weight: 400;
}
.gallery-select .photo .image {
	position: absolute;
	bottom: 15px;
	left: 15px;
	right: 15px;
	height: 50px;
	cursor: pointer;
	
	-o-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	
	background-color: rgba(220,210,180,1.0);
	
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* home page */
.home a, .home a:hover, .home a:active, .home a:visited {
	color: rgb(0,0,0);
}

.explain-gallery {
	position: absolute;
	left: 30px;
	right: 30px;
	top: 0px;
	bottom: 85%;
}
.home-info {
	position: absolute;
	left: 30px;
	right: 30px;
	top: 15%;
	bottom: 50%;
}
.home-news {
	position: absolute;
	left: 30px;
	right: 30px;
	top: 50%;
	bottom: 15%;
}
.explain-taxon {
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: 0px;
	top: 85%;
}
.home .scribble {
}
.scribble .text {
	font-family: 'Shadows Into Light Two', cursive;
	font-weight: 400;
	color: rgb(0,0,0);
	font-size: 16px;
	line-height: 18px;
	display: block;
	text-align: center;
	position: absolute;
	width: 100%;
}
.scribble .text.sub {
	font-size: 11px;
	line-height: 13px;
}
.explain-gallery .scribble .text {
	bottom: 17px;
}
.explain-gallery .scribble .text.sub {
	bottom: 5px;
}
.explain-taxon .scribble .text {
	top: 5px;
}
.explain-taxon .scribble .text.sub {
	top: 23px;
}
.scribble svg {
	display: block;
	margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
	/* border: 1px solid green; */
}
.explain-gallery .scribble svg {
	margin-top: 0px;
	margin-bottom: 40px;
}
.explain-taxon .scribble svg {
	margin-top: 40px;
	margin-bottom: 0px;
}
.home .welcome-1 {
	margin-top: 30px;
	font-weight: 600;
	padding-left: 5px;
	padding-right: 5px;
}
.home .welcome-2 {
	padding-left: 5px;
	padding-right: 5px;
}
@media (max-width: 430px) {
	.home .welcome-1, .home .welcome-2 {
		font-size: 10px;
	}
}
.home .rare-box, .home .news-box {
	font-size: 10px;
	font-weight: 600;
	margin-top: 30px;
	/* overflow: hidden; */
	/* border: 1px solid green; */
	position: absolute;
	left: 5px;
	right: 5px;
	top: 60px;
	bottom: 30px;
}
.home .news-box {
	margin-top: 60px;
}
@media (max-height: 520px) {
	.home .rare-box, .home .news-box {
		display: none;
	}
}
@media (max-width: 460px) {
	.home .rare-box, .home .news-box {
		font-size: 9px;
	}
}
@media (max-width: 400px) {
	.home .rare-box, .home .news-box {
		font-size: 8px;
	}
}
.home .rare-box .text, .home .news-box .text {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 5;
}
.home .rare, .home .news {
	font-size: 10px;
	font-weight: 400;
	/* overflow: hidden; */
	width: 15%;
	/* border: 1px solid red; */
	position: absolute;
	top: 15px;
	bottom: 0px;
	min-height: 30px;
	cursor: pointer;
	z-index: 3;
	background-color: rgba(255,255,255,0.0);
}
.home .rare:hover, .home .news:hover {
	width: 30%;
	
	top: -60px;
	bottom: -90px;
	
	z-index: 55; /*25, 4*/
	background-color: rgba(255,255,255,0.95);
	
	-o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
}
@media (max-width: 600px) {
	.home .rare:hover, .home .news:hover {
		width: 100%;
	}
}
.animations .home .rare, .animations .home .news {
	-webkit-transition-property: width, left, top, bottom, background-color;
	-webkit-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
	-webkit-transition-timing-function: ease, ease, ease, ease, ease;
	-moz-transition-property: width, left, top, bottom, background-color;
	-moz-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
	-moz-transition-timing-function: ease, ease, ease, ease, ease;
	-o-transition-property: width, left, top, bottom, background-color;
	-o-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
	-o-transition-timing-function: ease, ease, ease, ease, ease;
	transition-property: width, left, top, bottom, background-color;
	transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
	transition-timing-function: ease, ease, ease, ease, ease;
}
@media (max-width: 800px) {
	.home .rare, .home .news {
		top: 28px;
	}
}
.home .rare-ctn, .home .news-ctn {
	position: absolute;
	left: 0px;
	bottom: 0px;
	right: 0px;
	top: 0px;
	overflow: hidden;
}

.home .rare-text, .home .news-text {
	position: absolute;
	top: 0px;
	bottom: auto;
	left: 0px;
	right: 0px;
}
.home .rare-scribble, .home .news-scribble {
	position: absolute;
	top: auto;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
}
@media (min-height: 800px), (min-width: 1000px) {
	.home .rare:hover .rare-text, .home .news:hover .news-text {
		font-size: 12px;
	}
	.home .rare:hover .rare-scribble, .home .news:hover .news-scribble {
	}
}
.home .rare:hover .rare-text, .home .news:hover .news-text {
	left: 10px;
	right: 10px;
	top: 10px;
}
.animations .home .rare-text, .animations .home .news-text {
	-webkit-transition-property: left, right, top, font-size;
	-webkit-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s;
	-webkit-transition-timing-function: ease, ease, ease, ease;
	-moz-transition-property: left, right, top, font-size;
	-moz-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s;
	-moz-transition-timing-function: ease, ease, ease, ease;
	-o-transition-property: left, right, top, font-size;
	-o-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s;
	-o-transition-timing-function: ease, ease, ease, ease;
	transition-property: left, right, top, font-size;
	transition-duration: 0.5s, 0.5s, 0.5s, 0.5s;
	transition-timing-function: ease, ease, ease, ease;
}
.home .rare:hover .rare-scribble, .home .news:hover .news-scribble {
	left: 10px;
	right: 10px;
	bottom: 10px;
}
.animations .home .rare-scribble, .animations .home .news-scribble {
	-webkit-transition-property: left, right, bottom, font-size;
	-webkit-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s;
	-webkit-transition-timing-function: ease, ease, ease, ease;
	-moz-transition-property: left, right, bottom, font-size;
	-moz-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s;
	-moz-transition-timing-function: ease, ease, ease, ease;
	-o-transition-property: left, right, bottom, font-size;
	-o-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s;
	-o-transition-timing-function: ease, ease, ease, ease;
	transition-property: left, right, bottom, font-size;
	transition-duration: 0.5s, 0.5s, 0.5s, 0.5s;
	transition-timing-function: ease, ease, ease, ease;
}
.home .rare-btn, .home .news-btn {
	position: absolute;
	left: -5px;
	bottom: -5px;
	right: -5px;
	top: -5px;
	background-image: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.001953125), rgba(255,255,255,0.00390625), rgba(255,255,255,0.0078125), rgba(255,255,255,0.015625), rgba(255,255,255,0.03125), rgba(255,255,255,0.0625), rgba(255,255,255,0.125), rgba(255,255,255,0.25), rgba(255,255,255,0.5), rgba(255,255,255,1.0)), linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.001953125), rgba(0,0,0,0.00390625), rgba(0,0,0,0.0078125), rgba(0,0,0,0.015625), rgba(0,0,0,0.03125), rgba(0,0,0,0.0625), rgba(0,0,0,0.125), rgba(0,0,0,0.25), rgba(0,0,0,0.5), rgba(0,0,0,1.0));
}
.home .rare:hover .rare-btn, .home .news:hover .news-btn {
}
.home .rare-0, .home .news-0 {
	left: 0px;
}
.home .rare-0:hover, .home .news-0:hover {
	left: 0px;
}
.home .rare-1, .home .news-1 {
	left: 17%;
}
.home .rare-1:hover, .home .news-1:hover {
	left: 9%;
}
.home .rare-2, .home .news-2 {
	left: 34%;
}
.home .rare-2:hover, .home .news-2:hover {
	left: 26%;
}
.home .rare-3, .home .news-3 {
	left: 51%;
}
.home .rare-3:hover, .home .news-3:hover {
	left: 43%;
}
.home .rare-4, .home .news-4 {
	left: 68%;
}
.home .rare-4:hover, .home .news-4:hover {
	left: 60%;
}
.home .rare-5, .home .news-5 {
	left: 85%;
}
.home .rare-5:hover, .home .news-5:hover {
	left: 70%;
}
@media (max-width: 600px) {
	.home .rare:hover, .home .news:hover {
		left: 0px;
	}
	.home .rare-text, .home .news-text {
		opacity: 0.0;
	}
	.home .rare:hover .rare-text, .home .news:hover .news-text {
		opacity: 1.0;
	}
	.animations .home .rare-text, .animations .home .news-text {
		transition-property: opacity;
		transition-duration: 0.3s;
	}
}
/* css to prevent immediate tap-thru on touch devices (tap 1 = hover, tap 2 = click) while on mouse devices (hover = hover, click = click) */
.tap-hov .tap-clk {
	position: absolute;
	z-index: 20;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	transition-property: all;
	transition-duration: 100ms;
}
.tap-hov:hover .tap-clk, .tap-hov:hover .tap-clk {
	width: 100%;
	height: auto;
	bottom: 0;
	pointer-events: auto;
}

/* SVG */

.arrow {
	stroke: rgb(255,255,255);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}
.scribble .arrow {
	stroke: rgb(0,0,0);
}
.stop1 {
	stop-color: rgb(255,0,0);
	stop-opacity: 1.0;
}
.stop2 {
	stop-color: rgb(0,255,0);
	stop-opacity: 0.25;
}
.stop3 {
	stop-color: rgb(0,0,255);
	stop-opacity: 0.0;
}
.whoop circle, .whoop rect {
	/* fill: url(#whooper); is it possible to define the gradient in css? */
}

.scribbled {
	font-family: 'Bubblegum Sans', cursive;
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 1px;
	fill: rgba(245,245,245,0.75);
	stroke: rgb(0,0,0);
	stroke-width: 0.4;
}

.rare-scribble svg * {
	stroke-width: 3.0;
}

.splash svg * {
	stroke-width: 1.0;
	stroke: rgb(255,255,255);
	fill: rgb(255,255,255); 
	fill-opacity: 0.25;
}
.splash .pos-0 {
	opacity: 0.0;
}
.splash .pos-1 {
	opacity: 0.0417;
}
.splash .pos-2 {
	opacity: 0.0833;
}
.splash .pos-3 {
	opacity: 0.1250;
}
.splash .pos-4 {
	opacity: 0.1666;
}
.splash .pos-5 {
	opacity: 0.2083;
}
.splash .pos-6 {
	opacity: 0.2500;
}
.splash .pos-7 {
	opacity: 0.2917;
}
.splash .pos-8 {
	opacity: 0.3333;
}
.splash .pos-9 {
	opacity: 0.3750;
}
.splash .pos-10 {
	opacity: 0.4167;
}
.splash .pos-11 {
	opacity: 0.4583;
}
.splash .pos-12 {
	opacity: 0.5000;
}
.splash .pos-13 {
	opacity: 0.5417;
}
.splash .pos-14 {
	opacity: 0.5833;
}
.splash .pos-15 {
	opacity: 0.6250;
}
.splash .pos-16 {
	opacity: 0.6667;
}
.splash .pos-17 {
	opacity: 0.7083;
}
.splash .pos-18 {
	opacity: 0.7500;
}
.splash .pos-19 {
	opacity: 0.7917;
}
.splash .pos-20 {
	opacity: 0.8333;
}
.splash .pos-21 {
	opacity: 0.8750;
}
.splash .pos-22 {
	opacity: 0.9167;
}
.splash .pos-23 {
	opacity: 0.9583;
}

.shortcut svg * {
	stroke-width: 4.0;
}
.shortcut:hover svg * {
	stroke-width: 8.0;
}
.shortcut.noclick:hover svg * {
	stroke-width: 4.0;
}
/* note: google chrome bug - chrome cannot override fill attribute if present in svg if referenced via <use>, but does so with stroke attribute, also no issue with fill if not <use> but inline */
.lineage-selected-buttons .button svg *, .lineage-root-buttons .button svg * {
	stroke-width: 13.0;
	stroke: rgb(0,0,0);
	fill: rgb(255,255,255); 
	fill-opacity: 0.85;	
}
.lineage-selected-buttons .button:hover svg *, .lineage-root-buttons .button:hover svg * {
	stroke-width: 23.0;
	fill-opacity: 0.95;
}

.defs-only {
	display: none;
}

.metrics {
	position: absolute;
	z-index: 10000;
	top: 0;
	left: 20px;
	background-color: black;
	font-size: 9px;
}
.metrics span {
	display: inline-block;
	padding: 3px;
	color: white;
}

/* modal */

.modal {
	display: block;
	position: absolute;
	z-index: -1;
	opacity: 0.0;
	background-color: rgb(255,255,255);
	-o-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
}
.animations .modal {
	transition-property: top, bottom, left, right, border-radius, background-color, opacity, z-index;
	transition-duration: 0.9s, 0.9s, 0.9s, 0.9s, 0.8s, 1.0s, 0.9s, 0.9s;
	transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease;
}
.modal-content {
	position: absolute;
	left: 30px;
	right: 30px;
	top: 30px;
	bottom: 30px;
	overflow: hidden;
}
.modal-close {
	cursor: pointer;
	position: absolute;
	z-index: 20;
}
.modal-close span {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border: 0px solid rgba(0,0,0,0.0);
}
.modal-close-down {
	left: 0;
	right: 0;
	top: 0;
	height: 30px;
}
.modal-close-down span {
	top: 15px;
	left: calc(50% - 10px);
	border-right-width: 10px;
	border-top-width: 10px;
	border-left-width: 10px;
	border-top-color: rgba(0,0,0,1.0);
}
.modal-close-up {
	left: 0;
	right: 0;
	bottom: 0;
	height: 30px;
}
.modal-close-up span {
	bottom: 15px;
	left: calc(50% - 10px);
	border-right-width: 10px;
	border-bottom-width: 10px;
	border-left-width: 10px;
	border-bottom-color: rgba(0,0,0,1.0);
}
.modal-title {
	font-family: 'Bubblegum Sans', cursive;
	font-weight: 400;
	font-size: 18px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}
.modal-text {
	padding: 10px;
}
.mt-title {
	font-weight: 600;
	margin-bottom: 0.5em;
}
.mt-text {
	orphans: 5;
	widows: 5;
	margin-bottom: 0.5em;
}
.mt-image {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.mt-paratitle {
	font-weight: 600;
	margin-top: 1em;
	margin-bottom: 0.5em;
}
.mt-para {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.mt-sepe {
	margin-top: 3.5em;
	margin-bottom: 2.5em;
	font-family: 'Shadows Into Light Two', cursive;
	font-weight: 400;
	text-align: center;
}
.modal-span {
	padding: 10px;
}
.modal-span .title {
	position: relative;
}
.body.block.modal-block {
	top: 50px;
}
.modal-scroll {
	width: 100%;
	min-height: 100%;
}
.modal-subtitle {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}
.modal-subcontent {
	position: absolute;
	top: 100px;
	left: 0;
	bottom: 0;
	right: 0;
}
.modal .search {
	position: relative;
	display: inline-block;
	/* min-width: 100px; */
	width: calc(100% - 160px);
	max-width: 200px;
	padding: 5px;
	margin-left: 5px;
	margin-right: 5px;
	border-radius: 15px;
	-o-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50), inset 0px 0px 10px 0px rgba(237, 0, 0, 0.90);
	-moz-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50), inset 0px 0px 10px 0px rgba(237, 0, 0, 0.90);
	-webkit-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50), inset 0px 0px 10px 0px rgba(237, 0, 0, 0.90);
	box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50), inset 0px 0px 10px 0px rgba(237, 0, 0, 0.90);
}
.modal .search.wide {
	width: calc(100% - 20px);
	max-width: calc(100% - 20px);
}
.modal .search.left {
	min-width: 200px;
	max-width: calc(100% - 20px);
}
.modal .search.right {
	max-width: calc(100% - 20px);
	margin-left: 145px;
}
.modal .search.button {
	-o-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
}
.modal .search input, .modal .search textarea, .modal .search button {
	color: rgb(0,0,0);
	background-color: transparent;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 12px;
	border: 0px none;
	display: block;
	position: absolute;
	left: -5px;
	top: -5px;
	right: -5px;
	bottom: -5px;
	border: 5px solid rgba(237,0,0,0.0);
	/*border-radius: 25px;*/
	border-radius: 20px;
	width: 100%; /* i do not understand why browsers require width here, should be all set via absolute positioning */
	/* height: 100%; */ /* i do not understand why browsers then (see above) do not cope with setting height */
	text-align: center;
	outline: transparent auto 0;
	margin: 0;
	padding: 0;
}
.modal .search button {
	width: calc(100% + 10px); /* i do not understand why the button needs a different width than the other elements (see above) to be full-width; i do also not understand the need for specifyng width at all (see above) */
}
.modal .search input:-moz-autofill, .modal .search textarea:-moz-autofill {
	opacity: 0.8;
}
.modal .search input:-webkit-autofill, .modal .search textarea:-webkit-autofill {
	opacity: 0.8; /* note: since the user agents make background-color opaque and non-overridable, this is the only choice i see to make the user experience at least ok */
}
.modal .search input:autofill, .modal .search textarea:autofill {
	opacity: 0.8;
}
.modal .search input:focus, .modal .search textarea:focus, .modal .search button:focus {
	border: 5px solid rgba(237,0,0,0.5);
}
.modal .search.textarea {
	min-height: 150px;
}
.modal .search.send-button button.ng-hide {
	display: block ! important;
	opacity: 0.0;
}
.modal .search.send-button {
	height: 15px;
}
.modal .search.send-button.send-without {
	height: 45px;
}
.modal .search.send-button button {
}
.modal .search.send-button.send-without button {
	background-color: rgba(200,0,0,0.7);
	color: #fff;
}
.animations .modal .search.send-button {
	transition-property: all;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
.animations .modal .search.send-button button {
	transition-property: all;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}
.modal .flipper {
	display: inline-block;
	position: relative;
	min-width: 45px;
	padding: 5px;
	margin-left: 5px;
	margin-right: 5px;
	border-radius: 15px;
	cursor: pointer;
	-o-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
}
.modal .flipper::before {
	content: ' ';
	display: block;
	position: absolute;
	left: -5px;
	top: -5px;
	right: -5px;
	bottom: -5px;
	border-radius: 25px;
	border: 5px solid rgba(237,0,0,0.0); 
}
.modal .flipper.active::before {
	border: 5px solid rgba(237,0,0,0.5); 
}
.animations .modal .flipper::before, .animations .modal .search input {
	transition-property: border-color;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

.modal .flippable .flip-front, .modal .flippable .flip-back {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.modal .flippable .flip-front {
	-o-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-o-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.modal .flippable .flip-back {
	-o-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-o-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.modal .flippable.flipped .flip-front {
	-o-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.modal .flippable.flipped .flip-back {
	-o-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.animations .modal .flippable .flip-front, .animations .modal .flippable .flip-back {
	transition-property: transform, -o-transform, -moz-transform, -webkit-transform;
	transition-duration: 1s;
	transition-timing-function: ease;
}

@media (max-width: 600px), (max-height: 600px) {
	.modal-content {
		left: 10px;
		right: 10px;
	}
	.modal-title {
		font-size: 12px;
		margin-top: 0px;
		margin-bottom: 10px;
	}
	.modal-subtitle {
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.modal-subcontent {
		top: 55px;
	}
}

@media (max-width: 400px), (max-height: 400px){
	.modal-content {
		left: 5px;
		right: 5px;
	}
	.modal-title {
		font-size: 10px;
		margin-top: 0px;
		margin-bottom: 5px;
	}
	.modal-subtitle {
		margin-top: 5px;
		margin-bottom: 5px;
	}
	.modal-subcontent {
		top: 50px;
	}
}

.no-script {
	color: #f99;
	font-weight: bold;
}

.synonym {
	cursor: pointer;
	white-space: nowrap;
	text-overflow: ellipsis;
}
a.synonym, a.synonym:visited, a.synonym:active, a.synonym:hover {
	display: block;
	color: inherit;
	text-decoration: none;
}
.synonym .name {
	color: #777;
	padding-right: 10px;
}
.synonym.main .name {
	color: #000;
}
.synonym.scientific .name {
	font-weight: 600;
}
.synonym.reverted .name {
	font-style: italic;
}

.synonym .name-info {
	opacity: 0.3;
	padding-right: 10px;
}
.synonym:hover .name-info {
	opacity: 0.9;
}
.name-info-self::before {
	display: inline;
	content: '→ ';
}
.name-info-parent::before {
	display: inline;
	content: '(';
}
.name-info-parent::after {
	display: inline;
	content: ')';
}

.synonym .redlist {
	opacity: 0.3;
	position: relative;
	white-space: nowrap;
	padding-right: 10px;
}
.synonym:hover .redlist {
	opacity: 0.9;
}
.synonym .redlist .rl {
	font-weight: 600;
	color: rgb(180,0,0);
	
	position: relative;
	display: inline-block;
	height: 12px;
	width: 12px;
	text-align: center;
	outline: 1px solid rgba(255,0,0,0.1);
	background-color: rgba(255,0,0,0.05);
	vertical-align: baseline;
}

.synonym .count-title {
	display: inline;
}
.synonym .count {
	opacity: 0.3;
	padding-right: 10px;
}
.synonym:hover .count {
	opacity: 0.9;
}

.listedtaxon {
	width: 100%;
	height: 30px;
	/*overflow: hidden;*/
	line-height: 15px;
	position: relative;
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #ddd;
	cursor: pointer;
}
a.listedtaxon, a.listedtaxon:visited, a.listedtaxon:active, a.listedtaxon:hover {
	display: block;
	color: inherit;
	text-decoration: none;
}
.listedtaxon .redlist {
	position: absolute;
	top: 6px;
	right: 50px;
}
.listedtaxon .describe .name, .listedtaxon .describe.shortened .name {
	width: 100%;
	white-space: nowrap;
}

.listedphoto {
	display: inline-block;
	width: 100%;
	position: relative;
	cursor: pointer;
}
a.listedphoto, a.listedphoto:visited, a.listedphoto:active, a.listedphoto:hover {
	color: inherit;
}
@media (min-width: 400px) {
	.listedphoto {
		width: 50%;
	}
}
@media (min-width: 600px) {
	.listedphoto {
		width: 33.33333%;
	}
}
@media (min-width: 800px) {
	.listedphoto {
		width: 25%;
	}
}
@media (min-width: 1000px) {
	.listedphoto {
		width: 20%;
	}
}
@media (min-width: 1200px) {
	.listedphoto {
		width: 16.66666%;
	}
}
@media (min-width: 1400px) {
	.listedphoto {
		width: 14.28571%;
	}
}
@media (min-width: 1600px) {
	.listedphoto {
		width: 12.5%;
	}
}
@media (min-width: 1600px) {
	.listedphoto {
		width: 11.11111%;
	}
}
@media (min-width: 1800px) {
	.listedphoto {
		width: 10%;
	}
}
@media (min-width: 2000px) {
	.listedphoto {
		width: 9.09090%;
	}
}
@media (min-width: 2200px) {
	.listedphoto {
		width: 8.33333%;
	}
}
@media (min-width: 2400px) {
	.listedphoto {
		width: 7.69230%;
	}
}
@media (min-width: 2600px) {
	.listedphoto {
		width: 7.14285%;
	}
}
@media (min-width: 2800px) {
	.listedphoto {
		width: 6.66666%;
	}
}
@media (min-width: 3000px) {
	.listedphoto {
		width: 6.25%;
	}
}
@media (min-width: 3200px) {
	.listedphoto {
		width: 5.88235%;
	}
}
@media (min-width: 3400px) {
	.listedphoto {
		width: 5.55555%;
	}
}
@media (min-width: 3600px) {
	.listedphoto {
		width: 5.26315%;
	}
}
@media (min-width: 3800px) {
	.listedphoto {
		width: 5%;
	}
}
@media (min-width: 4000px) {
	.listedphoto {
		width: 4.76190%;
	}
}
@media (min-width: 4200px) {
	.listedphoto {
		width: 4.54545%;
	}
}
@media (min-width: 4400px) {
	.listedphoto {
		width: 4.34782%;
	}
}
@media (min-width: 4600px) {
	.listedphoto {
		width: 4.16666%;
	}
}
@media (min-width: 4800px) {
	.listedphoto {
		width: 4%;
	}
}
@media (min-width: 5000px) {
	.listedphoto {
		width: 3.84615%;
	}
}
@media (min-width: 5200px) {
	.listedphoto {
		width: 3.70370%;
	}
}
@media (min-width: 5400px) {
	.listedphoto {
		width: 3.57142%;
	}
}
@media (min-width: 5600px) {
	.listedphoto {
		width: 3.44827%;
	}
}
@media (min-width: 5800px) {
	.listedphoto {
		width: 3.33333%;
	}
}
@media (min-width: 6000px) {
	.listedphoto {
		width: 3.22580%;
	}
}
@media (min-width: 6200px) {
	.listedphoto {
		width: 3.125%;
	}
}
@media (min-width: 6400px) {
	.listedphoto {
		width: 3.03030%;
	}
}
@media (min-width: 6600px) {
	.listedphoto {
		width: 2.94117%;
	}
}
@media (min-width: 6800px) {
	.listedphoto {
		width: 2.85714%;
	}
}
@media (min-width: 7000px) {
	.listedphoto {
		width: 2.77777%;
	}
}
@media (min-width: 7200px) {
	.listedphoto {
		width: 2.70270%;
	}
}
@media (min-width: 7400px) {
	.listedphoto {
		width: 2.63157%;
	}
}
@media (min-width: 7600px) {
	.listedphoto {
		width: 2.56410%;
	}
}
@media (min-width: 7800px) {
	.listedphoto {
		width: 2.5%;
	}
}
@media (min-width: 8000px) { /* 1 / 41 abgerundet */
	.listedphoto {
		width: 2.43902%;
	}
}
.listedphoto::before {
	content: '';
	display: block;
	padding-top: 100%;
}
.listedimage {
	position: absolute;
	left: 10px;
	top: 10px;
	right: 10px;
	bottom: 10px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	background-color: rgba(255,255,255,0.5);
	border: 5px solid transparent;
	-o-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
}
.listedphoto .describe {
	opacity: 0.0;
	display: none;
	position: absolute;
	left: 10px;
	right: 10px;
	top: 10px;
	bottom: 10px;
	word-wrap: break-word;
	overflow: hidden;
	font-size: 80%;
	line-height: 1.1;
	padding: 5px;
	pointer-events: none;
}
.listedphoto .describe .rl {
	height: 13px;
	width: 13px;
}
.listedphoto:hover .describe {
	opacity: 1.0;
	display: block;
	z-index: 5;
	-o-text-shadow: 0px 0px 3px #fff, 0px 0px 6px #fff;
	-moz-text-shadow: 0px 0px 3px #fff, 0px 0px 6px #fff;
	-webkit-text-shadow: 0px 0px 3px #fff, 0px 0px 6px #fff;
	text-shadow: 0px 0px 3px #fff, 0px 0px 6px #fff;
	background-image: linear-gradient(155deg, rgba(255,255,255,1.0), rgba(255,255,255,0.5), rgba(255,255,255,0.25), rgba(255,255,255,0.125), rgba(255,255,255,0.0625));
}
.animations .listedphoto .describe {
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease;
}

.date-marker {
	position: absolute;
	top: -14px;
	left: calc(50% - 50px);
	right: calc(50% - 50px);
	padding-left: 5px;
	padding-right: 5px;
	width: auto;
	height: 15px;
	text-align: center;
	white-space: nowrap;
	border: 1px solid #ddd;
	border-radius: 8px;
	background-color: #fff;
}

.book-key, .anew-date {
	display: inline-block;
	width: 100px;
	vertical-align: top;
	font-size: 80%;
}
.book-title, .anew-text {
	display: inline-block;
	width: calc(100% - 150px);
	padding-left: 20px;
	vertical-align: top;
}

.cake {
	max-width: 520px;
}

.disabled {
	pointer-events: none;
	cursor: auto;
	opacity: 0.5;
}

a[target]::before {
	display: inline;
	content: '>> ';
}
a[target]:before {
	display: inline;
	content: '>> ';
}

a {
	color: #d00;
} 
a:visited {
	color: #b00;
}
a:active, a:focus, a:hover {
	color: #e55;
}
a.title, a.option {
	color: inherit;
}

.error-message {
	text-align: center;
	padding: 5px;
	margin: 5px;
	border-top: 1px solid #ddd;
}
.modal.overlay-modal {
	-o-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.50), 0px 0px 50px 0px rgba(0, 0, 0, 1.0);
	-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.50), 0px 0px 50px 0px rgba(0, 0, 0, 1.0);
	-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.50), 0px 0px 50px 0px rgba(0, 0, 0, 1.0);
	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.50), 0px 0px 50px 0px rgba(0, 0, 0, 1.0);
}

/* scaleable image */
.fullscreen-size {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
}
.scaleable-image {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

/* dummy and options */

.dummy-block {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.options-block {
	position: absolute;
	left: 5%;
	right: 5%;
	top: 5%;
	bottom: 5%;
}
.thumbs .options-block {
	top: calc(50% - 9px);
	bottom: calc(50% - 9px);
}

.options-title {
	text-align: center;
	font-family: 'Bubblegum Sans', cursive;
	font-weight: 400;
	font-size: 18px;
	margin-bottom: 15px;
}
.option-title {
	font-weight: 600;
}

.option {
	display: block;
	width: 100%;
	height: 100px;
	position: relative;
	background-color: rgba(255,255,255,0.5);
	border: 5px solid transparent;
	-o-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 0px 1px 0px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.70), 0px 0px 10px 0px rgba(0, 0, 0, 0.50);
	cursor: pointer;
}

.option-text {
	position: absolute;
	left: 160px;
	top: 10px;
	right: 10px;
	bottom: 10px;
}

.option-image {
	position: absolute;
	left: 10px;
	top: 10px;
	width: 140px;
	bottom: 10px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

.no-info {
	opacity: 0.2;
}

/* banner page details */

.page-banner .content, .page-banner .block {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	cursor: auto;
}
.page-banner .menu-bar {
	top: auto;
	bottom: 0;
}
.page-banner .menu-bar .link {
	position: absolute;
	right: 30px;
	bottom: 2px;
}
.page-banner a.listedphoto::before {
	content: '';
	display: block;
	padding-top: 100%;
}
.page-banner a.listedphoto {
	color: #000;
}
.page-banner .listedphoto {
	width: 50%;
}
@media (min-width: 400px) {
	.page-banner .listedphoto {
		width: 33.33333%;
	}
}
@media (min-width: 600px) {
	.page-banner .listedphoto {
		width: 25%;
	}
}
@media (min-width: 800px) {
	.page-banner .listedphoto {
		width: 20%;
	}
}
@media (min-width: 1000px) {
	.page-banner .listedphoto {
		width: 16.66666%;
	}
}
@media (min-width: 1200px) {
	.page-banner .listedphoto {
		width: 14.28571%;
	}
}
@media (min-width: 1400px) {
	.page-banner .listedphoto {
		width: 12.5%;
	}
}
@media (min-width: 1600px) {
	.page-banner .listedphoto {
		width: 11.11111%;
	}
}
@media (min-width: 1600px) {
	.page-banner .listedphoto {
		width: 10%;
	}
}
@media (min-width: 1800px) {
	.page-banner .listedphoto {
		width: 9.09090%;
	}
}
@media (min-width: 2000px) {
	.page-banner .listedphoto {
		width: 8.33333%;
	}
}
@media (min-width: 2200px) {
	.page-banner .listedphoto {
		width: 7.69230%;
	}
}
@media (min-width: 2400px) {
	.page-banner .listedphoto {
		width: 7.14285%;
	}
}
@media (min-width: 2600px) {
	.page-banner .listedphoto {
		width: 6.66666%;
	}
}
@media (min-width: 2800px) {
	.page-banner .listedphoto {
		width: 6.25%;
	}
}
@media (min-width: 3000px) {
	.page-banner .listedphoto {
		width: 5.88235%;
	}
}
@media (min-width: 3200px) {
	.page-banner .listedphoto {
		width: 5.55555%;
	}
}
@media (min-width: 3400px) {
	.page-banner .listedphoto {
		width: 5.26315%;
	}
}
@media (min-width: 3600px) {
	.page-banner .listedphoto {
		width: 5%;
	}
}
@media (min-width: 3800px) {
	.page-banner .listedphoto {
		width: 4.76190%;
	}
}
@media (min-width: 4000px) {
	.page-banner .listedphoto {
		width: 4.54545%;
	}
}
@media (min-width: 4200px) {
	.page-banner .listedphoto {
		width: 4.34782%;
	}
}
@media (min-width: 4400px) {
	.page-banner .listedphoto {
		width: 4.16666%;
	}
}
@media (min-width: 4600px) {
	.page-banner .listedphoto {
		width: 4%;
	}
}
@media (min-width: 4800px) {
	.page-banner .listedphoto {
		width: 3.84615%;
	}
}
@media (min-width: 5000px) {
	.page-banner .listedphoto {
		width: 3.70370%;
	}
}
@media (min-width: 5200px) {
	.page-banner .listedphoto {
		width: 3.57142%;
	}
}
@media (min-width: 5400px) {
	.page-banner .listedphoto {
		width: 3.44827%;
	}
}
@media (min-width: 5600px) {
	.page-banner .listedphoto {
		width: 3.33333%;
	}
}
@media (min-width: 5800px) {
	.page-banner .listedphoto {
		width: 3.22580%;
	}
}
@media (min-width: 6000px) {
	.page-banner .listedphoto {
		width: 3.125%;
	}
}
@media (min-width: 6200px) {
	.page-banner .listedphoto {
		width: 3.03030%;
	}
}
@media (min-width: 6400px) {
	.page-banner .listedphoto {
		width: 2.94117%;
	}
}
@media (min-width: 6600px) {
	.page-banner .listedphoto {
		width: 2.85714%;
	}
}
@media (min-width: 6800px) {
	.page-banner .listedphoto {
		width: 2.77777%;
	}
}
@media (min-width: 7000px) {
	.page-banner .listedphoto {
		width: 2.70270%;
	}
}
@media (min-width: 7200px) {
	.page-banner .listedphoto {
		width: 2.63157%;
	}
}
@media (min-width: 7400px) {
	.page-banner .listedphoto {
		width: 2.56410%;
	}
}
@media (min-width: 7600px) {
	.page-banner .listedphoto {
		width: 2.5%;
	}
}
@media (min-width: 7800px) { /* 1 / 41 abgerundet */
	.page-banner .listedphoto {
		width: 2.43902%;
	}
}