/* effects */
@keyframes bounce {
	0% {
		background-position: 95% 96%;
	}
	50% {
		background-position: 50% 96%;
		opacity: .7;
		box-shadow: inset 0 0 10px white;
	}
	100% {
		background-position: 95% 96%;
	}
}
@keyframes slidein {
	0% {
		max-height: 0em;
	}
	10% {
		max-height: 20em
	}
	90% {
		max-height: 20em
	}
	100% {
		max-height: 0em;
	}
}
/* global */
* {
	margin: 0;
	padding: 0;
	text-decoration: inherit;
	list-style: none;
	box-sizing: border-box;
	border: none;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
	color: inherit;
}
.grecaptcha-badge {
	visibility: hidden !important;
}
body {
	font: 400 90% Roboto, Arial, sans-serif;
	/*background: white url("../image/noise.jpg");*/
	background: white;
}
body:before, #canvas .header:before {
	content: '';
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 30px;
	height: 100%;
	background: #ffed00 url("../image/we-care.svg") no-repeat center center;
	z-index: 100;
}
#canvas .header:before {
	position: absolute;
	background-image: none;
}
@media (max-width: 1300px) {
	body:before, #canvas .header:before {
		display: none !important;
	}
}

#flashes,
#impersonate {
	background-color: white;
	box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .3);
	overflow: hidden;
	animation: 10s slidein forwards;
	box-sizing: border-box;
	position: relative;
	z-index: 100;
}
#impersonate {
	animation: none;
	background-color: #ffbb95;
}
#flashes.info {
	background-color: #faea5e;
}
#flashes.error {
	background-color: #ffbb95;
}
#flashes.success {
	background-color: #caffbb;
}
#flashes p,
#impersonate p {
	width: 80%;
	max-width: 500px;
	margin: 4em auto;
	font-size: 160%;
	font-weight: 400;
}
#impersonate p {
	font-size: 120%;
	margin: 1em auto;
}
#impersonate p a {
	float: right;
	color: white;
	border: 1px solid white;
	padding: .1em .5em;
	margin: -.1em 0;
}
#impersonate p a:hover {
	color: black;
	border-color: black;
}
.multicol:after {
	content: ' ';
	overflow: hidden;
	visibility: hidden;
	display: block;
	clear: both;
}
.multicol > * {
	display: block !important;
	float: left;
	width: 46% !important;
	margin-right: 4%;
}
.multicol > *:nth-child(odd) {
	margin-right: 8%;
}
.multicol > *:nth-child(even) {
	margin-right: 0;
}
.multicol.wide > *:nth-child(odd) {
	width: 56% !important;
}
.multicol.wide > *:nth-child(even) {
	width: 35% !important;
}
.narrow {
	width: 70%;
}
.dense *, .condensed * {
	margin-top: .3em !important;
	margin-bottom: .3em !important;
}
td.small, th.small, p.small {
	font-size: 90%;
}
.condensed *:first-child {
	margin-top: 0 !important;
}
.condensed *:last-child {
	margin-bottom: 0 !important;
}
#canvas div.article {
	background: white;
	/*border: 1px solid #d2d2d2;*/
	border: none;
	padding: 1em 0;
	min-height: 30vh;
	margin: 2em 0;
	/*overflow: hidden;*/
	/*overflow-x: auto;*/
}
#canvas div.article.narrow {
	float: left;
}
#canvas p.empty {
	text-align: center;
	padding: 6em 0;
	color: gray;
	border: 1px dashed #ddd;
	background: #fafafa;
}
/* tiles */
#canvas .tile {
	background: #63513d;
	display: block;
	border-radius: 1em;
	padding: 1em 2em;
	overflow: hidden;
	color: white;
	margin: 1em 0;
}
#canvas .tile h3 {
	color: #fae100;
	font-size: 100%;
	margin: 0;
	font-weight: normal;
}
#canvas .tile a {
	color: #fae100;
}
#canvas .tile > a {
	display: block;
	background: url("../image/arrow.yellow.svg") no-repeat right center;
}
#canvas .tile > a:hover {
	animation: .5s bounce;
	box-shadow: none !important;
}
#canvas .tile ul {
	padding-left: 0;
}
#canvas .tile ul li {
	list-style: none;
	background: url("../image/done.yellow.svg") no-repeat left .4em;
	padding-left: 25px;
}
#canvas ul.icons {
	margin: 1.5em 0 !important;
	padding: 0 !important;
}
#canvas ul.icons li {
	background: none !important;
	display: flex;
	align-items: center;
	padding-left: 0 !important;
}
#canvas ul.icons li b {
	color: #fae100;
}
#canvas ul.icons li span {
	display: block;
	width: 3em;
	height: 3em;
	margin-right: 1em;
	background: white no-repeat center center;
	background-size: contain;
	border-radius: 3em;
}
#canvas ul.icons.large {
	display: grid;
	grid-template-columns: repeat(2, auto);
	grid-column-gap: 1em;
}
#canvas ul.icons.large li {
	font-size: 130%;
	text-align: left;
	color: black;
}
/* layout specific */
#canvas {
	position: relative;
	width: 100%;
	overflow: hidden;
	min-width: 950px;
	min-height: 50vh;
}
#canvas .content {
	position: relative;
	margin: auto;
	width: 100%;
	max-width: 1200px;
	overflow: hidden;
	padding: 0 10px;
}

body.sign.view-default #canvas .main.content,
body.sign.view-register #canvas .main.content {
	max-width: none;
}
body.sign.view-default #canvas .main.content div.poster,
body.sign.view-register #canvas .main.content div.poster {
	margin-top: 0;
	margin-bottom: 0;
	padding: 4em 1em;
}

body.sign.view-default #canvas .main.content div.article>div,
body.sign.view-register #canvas .main.content div.article>div {
	max-width: 900px;
	margin: auto;
}
body.sign.view-default #canvas .main.content div.article.poster {
}
body.reference.view-default #canvas .main.content,
body.reference.view-detail #canvas .main.content {
	max-width: none;
	padding: 0;
}

/* header */
#canvas .header {
	background: white;
	height: 100px;
	z-index: 20;
	position: relative;
}
.header .content {
	max-width: 95% !important;
}
#canvas .header a.logo {
	display: inline-block;
	width: 200px;
	height: 50px;
	background: no-repeat left center;
	background-size: contain;
	margin: 25px 30px 0 0;
}
#canvas .header a.logo:nth-of-type(1) {
	background-image: url("../image/profiklub-logo.svg");
}
#canvas .header a.logo:nth-of-type(2) {
	background-image: url("../image/weber-logo.svg");
}
#canvas .header form {
	position: absolute;
	right: 10px;
	top: .8em;
	color: gray;
}
#canvas .header form p {
	text-align: center;
	margin: .5em 0;
}
#canvas .header form input {
	border: 1px solid #aaa;
	border-radius: 2em;
	padding: .3em .5em .3em 40px;
	background: white url("../image/search.png") no-repeat 7px center;
}
#canvas .header form a {
	color: #d0006f;
	font-weight: 700;
}
/* main menu */
#canvas .main.menu {
	box-shadow: 0 0 1px #aaa;
    /*max-width: 50%;*/
    /*margin: -65px 0 0 500px; */
}


#canvas .main.menu .content {
	overflow: visible;
}
#canvas .main.menu .content > ul {
	/*background: #63513d;*/
	background: #fff;
	margin: 0;
	padding: 0;
	text-align: justify;
	display: flex;
	flex-wrap: wrap;
}
#canvas .main.menu .content > ul ul {
	transition: visibility 0.2s 0s;
	visibility: hidden;
	position: absolute;
	z-index: 20;
	top: 3em;
	left: 0;
	background: #eee;
	/*background: #7d6550;*/
    /*box-shadow: 0 0 10px rgba(0, 0, 0, .5);*/
	min-width: 100%;
}
#canvas .main.menu .content > ul li:hover > ul {
	visibility: visible;
}
#canvas .main.menu .content > ul ul ul {
	left: 100%;
	top: 0;
}
#canvas .main.menu .content > ul ul li {
	background: none;
	display: block;
}
#canvas .main.menu .content > ul ul li a {
	text-align: left;
    font-weight: normal;
	margin: 0;
	padding: .7em 1.2em;
	white-space: nowrap;
}
#canvas .main.menu .content > ul:before {
	content: 'we care*';
	display: inline-block;
	padding: .7em .8em .7em .5em;
	background: #ffed00;
	width: 3em;
	color: #3a2e23;
	text-align: center;
	line-height: .9em;
	vertical-align: middle;
	font-family: 'WeberBrush';
	font-size: 90%;
}
#canvas .main.menu ul li {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
	flex: auto;
	text-align: center;
	background: url("../image/sep.png") no-repeat right center;
}
#canvas .main.menu ul li:last-of-type {
	background: none;
}
#canvas .main.menu ul li a {
	padding: .9em 1em;
	display: block;
	text-decoration: none;
	/*color: white;*/
    color: #222;
    font-weight: bold;
	margin: 0 2px 0 -2px;
	transition: .5s background-color;
	text-transform: lowercase;
}
#canvas .main.menu ul li a:hover, #canvas .main.menu ul li.active > a {
	/*background-color: rgba(255, 255, 255, .2);*/
	background-color:#eee;
}
/* headlines */
#canvas .headlines {
	margin: 1.5em auto;
}
#canvas .headlines .carousel {
	width: 49%;
	padding: 0;
	height: 20em;
	white-space: nowrap;
	background: gray;
	border-radius: 0 1em 1em 0;
	overflow: hidden;
	float: left;
	margin: 0;
	position: relative;
}
#canvas .headlines .carousel > li {
	display: inline-block;
	list-style: none;
	margin: 0;
	background: no-repeat center center;
	width: 100%;
	height: 100%;
	background-size: cover;
	overflow: hidden;
	position: relative;
	vertical-align: top;
	padding: 1em 2.5em;
	color: white;
}
#canvas .headlines .carousel > li:first-child {
	margin-left: 0;
	transition: 1s margin-left;
}
#canvas .headlines .carousel > li.prev,
#canvas .headlines .carousel > li.next {
	display: block;
	position: absolute;
	padding: 0;
	width: 2em;
	height: 3em;
	background: #63513d url("../image/arrow.white.reverse.svg") no-repeat center center;
	background-size: contain;
	left: 0;
	top: 8.5em;
	z-index: 10;
	cursor: pointer;
	opacity: .7;
}
#canvas .headlines .carousel > li.next {
	left: auto;
	background-image: url("../image/arrow.white.svg");
	right: 0;
}
#canvas .headlines .carousel > li.indicators {
	display: block;
	position: absolute;
	bottom: .5em;
	left: 0;
	text-align: center;
	height: auto;
	background: none;
	cursor: pointer;
}
#canvas .headlines .carousel > li.indicators span {
	display: inline-block;
	background: white;
	width: 15px;
	height: 15px;
	border-radius: 15px;
	margin: 2px .3em;
	box-shadow: inset 2px 2px 2px gray;
}
#canvas .headlines .carousel > li.indicators span.active {
	background: #ffed00;
}
#canvas .headlines .carousel > li > * {
	white-space: normal;
	text-align: left;
}
#canvas .headlines .carousel > li h2 {
	font-family: Ubuntu, Arial, sans-serif;
	font-weight: bold;
	color: #ffed00;
	font-size: 250%;
	text-shadow: 0 0 10px black;
}
#canvas .headlines .carousel > li p {
	color: white;
	font-size: 150%;
	text-shadow: 0 0 10px black;
}
#canvas .headlines a.tile {
	display: block;
	width: 24%;
	color: black;
	height: 9.5em;
	float: left;
	border-radius: 1em;
	padding: 0 1em;
	text-decoration: none;
	overflow: hidden;
}
#canvas .headlines a.tile.full {
	height: 20em;
	margin: 0;
}
#canvas .headlines a.tile:hover {
	animation: bounce .5s ease-in-out 1;
}
#canvas .headlines a.tile p {
	text-align: left;
	margin: 1em 0 0 0;
}
#canvas .headlines a.tile p b {
	font-weight: 500;
	font-size: 110%;
}
#canvas .headlines a.tile h2 {
	margin: 1em 0 -.3em 0;
	font-weight: 400;
	font-size: 230%;
}
#canvas .headlines a.calendar {
	height: 20em;
	margin: 0 1.4%;
	color: white;
	background: #d0006f url("../image/arrow.white.svg") 95% 96% no-repeat;
}
#canvas .headlines a.exchange {
	margin: 0 0 1em 0;
	background: #ffed00 url("../image/arrow.brown.svg") 95% 96% no-repeat;
}
#canvas .headlines a.exchange p {
	text-align: center;
	color: #63513d;
}
#canvas .headlines a.sale {
	background: #d2d2d2;
	margin: 0;
}
#canvas .headlines a.sale p {
	font-size: 80%;
	/*margin: 0;*/
}
#canvas .headlines a.sale p span {
	color: gray;
	display: inline-block;
	width: 33%;
}
/* main content */
#canvas .main.content {
	font-size: 110%;
	overflow: hidden;
	padding: 10px 1em;
}
/* news */
#canvas .main.content .news {
	background: white;
	border: 1px solid #d2d2d2;
	margin: 0;
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
}
#canvas .main.content .article .news {
	border: none;
}
#canvas .main.content .news li {
	display: block;
	margin: 0;
	padding: 1em 1em 2em 1em;
	list-style: none;
	width: 25%;
	float: left;
	position: relative;
}
#canvas .main.content .article .news li {
	padding: 1em;
	background: linear-gradient(to bottom right, transparent 70%, #ddd);
}
#canvas .main.content .news li p {
	text-align: left;
}
#canvas .main.content .news li h2 {
	margin: 0 0 1.5em 0;
	font-size: 130%;
	font-weight: 400;
	text-align: center;
	color: gray;
}
#canvas .main.content .news li:nth-of-type(even) h2 {
	color: #d0006f;
}
#canvas .main.content .news li h2 > a {
	text-decoration: none;
	color: inherit;
}
#canvas .main.content .news li h2 > a:hover {
	text-decoration: underline;
}
#canvas .main.content .news li > a {
	display: inline-block;
	width: 30px;
	height: 20px;
	background: url("../image/arrow.green.svg") center center;
	position: absolute;
	bottom: 1em;
	right: 1em;
	transition: .5s background-position;
}
#canvas .main.content .news li a.button {
	position: absolute;
	bottom: 1em;
	right: 1em;
}
#canvas .main.content .news li table.mini {
	font-size: 80%;
	margin-bottom: 5em;
}
#canvas .main.content .news li table.mini th {
	width: 5em !important;
	min-width: 0;

}
#canvas .main.content .news li > a:hover {
	background-position: 65px center;
}
#canvas .main.content .news li:nth-of-type(even) > a {
	background-image: url("../image/arrow.magenta.svg");
}
#canvas .main.content p.abstract {
	color: gray;
	font-size: 110%;
	border-bottom: 1px solid silver;
	padding-bottom: 1em;
	font-weight: 300;
}
/* buttons */
#canvas .buttons {
	margin: 1.5em auto;
	display: flex;
}
#canvas .buttons a {
	display: block;
	width: 24%;
	margin: 0 1.3% 0 0;
	height: 10em;
	background: white no-repeat center center;
	background-size: cover;
	border: 1px solid rgba(0, 0, 0, .2);
	float: left;
	border-radius: 1em;
}
#canvas .buttons a:hover {
	box-shadow: inset 0 0 10px white;
}
#canvas .buttons a:last-of-type {
	margin-right: 0;
}
/* footer */
#canvas .footer.content {
    max-width: 100%;
    z-index:-1
}
#canvas .footer div,
#canvas div.article.poster {
	background: url("../image/wallpaper.1.jpg") no-repeat center center;
	background-size: cover;
	min-height: 8em;
	overflow: hidden;
	padding: 0 2em 4em 50%;
}
#canvas div.article.poster {
	background: url("../image/wallpaper.5.jpg") left center;
	background-size: cover;
	padding-left: 25%;
}
#canvas div.article.poster h1 {
	display: none;
}
#canvas .footer div p {
	text-align: left;
}
#canvas .footer div h2,
#canvas div.article.poster h2 {
	font-size: 180%;
	margin: 2em 0 .5em;
	font-weight: 500;
	color: #ffed00;
	text-shadow: 0 0 15px black;
	position: relative;
	font-family: Ubuntu, Arial, sans-serif;
	font-weight: bold;
	line-height: 1.5em;
}
#canvas div.article.poster h2 {
	margin-bottom: 2em;
}
#canvas .footer div h2:before,
#canvas div.article.poster h2:before {
	content: 'we care';
	display: block;
	background: url("../image/bubble.svg") no-repeat center top;
	background-size: contain;
	height: 7em;
	width: 4em;
	position: absolute;
	left: -5em;
	top: 0;
	color: #63513d;
	text-shadow: none;
	text-align: center;
	line-height: .8em;
	padding: 1.2em 0;
    display: none
}
#canvas .footer div.imprint {
	background: #5a4c40;
	font-size: 90%;
	padding: 1.5em 1em;
}
#canvas .footer div.imprint p {
	text-align: center;
	color: white;
	margin: 1em 0;
}
#canvas .footer div.imprint p a {
	color: inherit;
}
#canvas .footer div.imprint p b a {
	font-weight: 700;
	font-size: 150%;
	color: #ffed00;
	text-decoration: none;
	margin-right: 2em;
}
#canvas .footer div.imprint p b a:hover {
	text-decoration: underline;
}
#canvas .footer div.imprint p b a:last-of-type {
	margin-right: 0;
}
/* modal */
#canvas .modal {
	display: none;
	z-index: 500;
	position: fixed;
	background-color: rgba(0, 0, 0, .9);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#canvas .modal > * {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}
#canvas .modal div.image .img, #canvas .modal div.image .video {
	width: 100%;
	padding: 0 20px;
	display: block;
	margin: auto;
	text-align: center;
}
#canvas .modal div.image .img img,
#canvas .modal div.image .video video {
	max-width: 100%;
	max-height: 70vh;
	height: auto;
	width: auto;
}
#canvas .modal div.label {
	width: 100%;
	color: white;
	text-align: center;
	padding: 1em;
}
#canvas .modal div.prev, #canvas .modal div.next, #canvas .modal div.close {
	position: absolute;
	left: 0;
	top: 0;
	width: 50px;
	height: 100%;
	background: url("../image/arrow_back.svg") no-repeat center center;
	cursor: pointer;
	transition: .5s background-color;
}
#canvas .modal div.prev:hover, #canvas .modal div.next:hover, #canvas .modal div.close:hover {
	background-color: rgba(255, 255, 255, .3);
}
#canvas .modal div.next {
	left: auto;
	right: 0;
	background-image: url("../image/arrow_forward.svg");
}
#canvas .modal div.close {
	left: auto;
	right: 0;
	width: 50px;
	height: 50px;
	background-image: url("../image/close.svg");
}
/* paginator */
div.paginator {
	border-top: 1px solid #eee;
	margin: 1em 0;
	padding: 1em 0;
}
div.paginator span, div.paginator a {
	display: inline-block;
	padding: .1em;
	color: silver;
	overflow: hidden;
	min-width: 1.5em;
	height: 1.7em;
	text-align: center;
	border: 1px solid #eee;
}
div.paginator span.current {
	background-color: #eee;
	border-color: gray;
	color: gray;
}
div.paginator a {
	border-color: silver;
	color: #444 !important;
	text-decoration: none !important;
}
div.paginator a:hover {
	border-color: #ffc21d;
	color: #987c06 !important;
	background-color: #ffe778;
}
/* breadcrumbs */
#canvas .breadcrumbs {
	position: relative;
	z-index: 10;
	color: #333;
	font-size: 90%;
	padding: 0 10px;
	margin: 0 auto -2.5em auto;
}
#canvas .breadcrumbs li {
	display: inline;
}
#canvas .breadcrumbs li:after {
	content: '→';
	margin-right: 1em;
	color: gray;
}
#canvas .breadcrumbs li:last-child:after {
	content: '';
}
#canvas .breadcrumbs li a {
	display: inline-block;
	padding: 1em 1em 1em 0;
}
#canvas .breadcrumbs li a:hover {
	text-decoration: underline;
}
/* submenu */
#canvas .content.main ul.sub.menu {
	width: 28%;
	float: right;
	padding: 0;
	margin: 2em 0 1em 0;
}
#canvas .content.main ul.sub.menu li {
	list-style: none;
	border-bottom: 1px solid gray;
	padding: .5em;
	margin: 0;
}
#canvas .content.main ul.sub.menu li:last-of-type {
	border-bottom: none;
}
#canvas .content.main ul.sub.menu li.active {
	background-color: rgba(0, 0, 0, .1);
}
#canvas .content.main ul.sub.menu li a {
	text-decoration: none;
	color: #333;
	display: block;
}
#canvas .content.main ul.sub.menu li a:hover {
	text-decoration: underline;
	color: #d0006f;
}
/* events */
#canvas .content.main .events .tags {
	text-align: left;
	line-height: 2.2em;
	margin: 0;
	padding: 1em 0;
	border-bottom: 1px solid silver;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), #eee, rgba(255, 255, 255, 0));
}
#canvas .content.main .events table .tags {
	background: none;
	border: none;
	margin: 0;
	padding: 0;
}
#canvas .content.main .events table .tags {
	margin: 0;
}
#canvas .content.main .events .tags li {
	display: inline-block;
	white-space: nowrap;
	margin: 0;
	padding: 0;
}
#canvas .content.main .events .tags li a {
	text-decoration: none;
	border: 1px solid #bbb;
	padding: .2em .8em .2em .5em;
	border-radius: 5px;
	color: gray;
}
#canvas .content.main .events .tags li a:hover {
	border-color: black;
}
#canvas .content.main .events .tags li a span {
	font-size: 130%;
	padding-right: .5em;
}
#canvas .content.main .events .tags li a.current {
	border-color: black;
	color: #000;
	background-color: #ddd;
}
#canvas .content.main .events table td {
	font-size: 90%;
	color: gray;
}
#canvas .content.main .events table b {
	color: #000;
}
#canvas .content.main .events .draft {
	color: #48a9ff !important;
}
#canvas .content.main .events .pending {
	color: #ff9b08 !important;
}
#canvas .content.main .events .rejected {
	color: #ff2c00 !important;
}
#canvas .content.main .events .completed {
	color: #1db500 !important;
}
#canvas .content.main .events .highlight {
	background-color: #fff7e2;
}
#canvas .content.main .events table .online span {
	display: inline-block;
	padding: .5em 1em;
	background-color: #fe0;
	border-radius: 5px;
	color: black;
}

/* progressbar */
.progressbar {
	display: block;
	padding: 1px;
	border-radius: 1em;
	border: 1px solid gray;
	position: relative;
	overflow: hidden;
	max-width: 60%;
	margin-top: .4em;
}
.progressbar div {
	background-color: gray;
	height: .5em;
	border-radius: 1em;
}
.progressbar em {
	display: block;
	position: absolute;
	top: 1px;
	left: 1px;
	height: .5em;
	border-radius: 1em;
	background-color: rgba(0, 0, 0, .1);
}
/* reference */
.reference .content.main .map {
	background: url("../image/cz.svg") no-repeat left top;
	background-size: 100% 100%;
	position: relative;
	padding-bottom: 60%;
}
.reference .content.main .map a {
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	margin: -10px 0 0 -10px;
	background: rgba(0, 0, 0, .2);
}
.reference .content.main a.ab, .reference .content.main .ab {
	background: rgba(255, 188, 39, .5);
}
.reference .content.main a.bd, .reference .content.main .bd {
	background: rgba(58, 166, 0, .3);
}
.reference .content.main a.ov, .reference .content.main .ov {
	background: rgba(0, 100, 199, .3);
}
.reference .content.main a.pd, .reference .content.main .pd {
	background: rgba(255, 58, 38, .3);
}
.reference .content.main a.rd, .reference .content.main .rd {
	background: rgba(214, 108, 0, .3);
}
.reference .content.main a.zs, .reference .content.main .zs {
	background: rgba(63, 0, 108, 0.3);
}
.reference .content.main a.cv, .reference .content.main .cv {
	background: rgba(255, 8, 0, 0.3);
}
.reference .content.main a.hb, .reference .content.main .hb {
	background: rgba(103, 255, 241, 0.3);
}
.reference .content.main a.mk, .reference .content.main .mk {
	background: rgba(81, 255, 0, 0.3);
}
.reference .content.main a.pp, .reference .content.main .pp {
	background: rgba(46, 43, 118, 0.3);
}
.reference .content.main a.vh, .reference .content.main .vh {
	background: rgba(255, 125, 0, 0.3);
}
.reference .content.main a.ps, .reference .content.main .ps {
	background: rgba(99, 0, 63, 0.3);
}
.reference .content.main .map a.highlight, .reference .content.main .map a:hover {
	box-shadow: 0 0 10px 10px black;
	z-index: 10;
}
.reference .content.main .legend {
	margin: 2em 0;
}
.reference .content.main .legend ul {
	padding: .5em 0;
	margin: 0;
	border-bottom: 1px solid #eee;
}
.reference .content.main .legend ul li {
	list-style: none;
	padding: .2em;
	line-height: 20px;
	vertical-align: middle;
	cursor: pointer;
}
.reference .content.main .legend ul li:hover {
	background: rgba(0, 0, 0, .05);
}
.reference .content.main .legend ul li span, .reference .content.main table td.type span {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	margin: 0 .5em -5px 0;
}
.reference .content.main .legend ul li.off span {
	background: none;
	border: 1px solid silver;
}
.reference .content.main .legend .tags {
	padding: 1em 0;
	border-bottom: 1px solid #eee;
}
.reference .content.main .legend .tags span {
	font-size: 80%;
	background: #f5f5f5;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: .1em .3em;
	display: inline-block;
	margin: 0 0 4px 0;
	cursor: pointer;
	color: gray;
}
.reference .content.main .legend .tags span.on, .reference .content.main .legend .tags span:hover {
	background: #eee;
	border: 1px solid gray;
	color: black;
}
.reference .content.main .legend form {
	padding: 1em 0;
	font-size: 80%;
}
.reference .content.main .legend form input.text {
	border: 1px solid gray;
	width: 70%;
}
.reference .content.main .legend form input.submit {
	background-position: center center;
	width: 20%;
	padding: .5em 0;
}
@keyframes flipcard {
	from {
		transform: perspective(1000px) rotateY(90deg);
		opacity: 0;
	}
	to {
		transform: perspective(1000px) rotateY(0deg);
		opacity: 1;
	}
}
.reference .content.main .tiles:after {
	content: '';
	clear: both;
	display: block;
	margin-bottom: 5em;
}
.reference .content.main .tiles a {
	display: block;
	width: 20%;
	padding-bottom: 20%;
	float: left;
	background: no-repeat center center;
	background-size: cover;
	position: relative;
	text-decoration: none;
	cursor: pointer;
	animation: 1s flipcard;
	transition: 1s opacity;
}
.reference .content.main .tiles a.off {
	opacity: 0;
}
.reference .content.main .tiles a:first-of-type {
	width: 100%;
	padding-bottom: 70%;
}
.reference .content.main .tiles a span {
	visibility: hidden;
	background: white;
	border: 1px solid gray;
	box-shadow: 0 0 10px black;
	padding: .3em;
	color: gray;
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	width: 15em;
}
.reference .content.main .tiles a:first-of-type span {
	visibility: visible;
	top: auto;
	bottom: 0;
	left: 0;
	padding: 3em .5em .5em .5em;
	width: 100%;
	background: linear-gradient(to bottom, transparent, black 50%);
	color: white;
	border: none;
	box-shadow: none;
}
.reference .content.main .tiles a:hover span {
	visibility: visible;
}
.reference .content.main .tiles a:hover {
	z-index: 30;
	box-shadow: 0 0 30px 10px black;
	cursor: pointer;
	opacity: 1 !important;
}
.reference .content.main .tiles a:nth-of-type(67) {
	opacity: .8;
}
.reference .content.main .tiles a:nth-of-type(68) {
	opacity: .6;
}
.reference .content.main .tiles a:nth-of-type(69) {
	opacity: .4;
}
.reference .content.main .tiles a:nth-of-type(70) {
	opacity: .2;
}
.reference .content.main .tags span {
	border: 1px solid #bbb;
	padding: .2em .5em;
	border-radius: 5px;
	background: #eee;
	display: inline-block;
	margin: 0 2px 2px 0;
}
.reference .content.main .tags span.all {
	border-color: darkred !important;
	color: darkred !important;
}
.reference .content.main .multicol img,
.board .content.main .multicol img {
	border-radius: 1em;
	margin: 1em 0;
}
.board .content.main .multicol img {
	max-width: 49%;
}
.board .content.main .multicol img:first-of-type {
	max-width: 100%;
}
.reference .content.main .multicol > div {
	position: relative;
	min-height: 5em;
}
.reference .content.main .detail,
.board .content.main .detail,
.event .content.main .detail {
	display: none;
	position: absolute;
	top: 4em;
	left: 3%;
	width: 94%;
	background: white;
	z-index: 50;
	margin: -1em 0 0 0;
	box-shadow: 0 0 20px 20px white;
	animation: .5s flipcard;
	max-height: 90%;
	overflow: auto;
}
.reference .content.main a.close {
	display: none;
}
.reference .content.main .detail a.close,
.board .content.main .detail a.close,
.event .content.main .detail a.close {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	background: gray url("../image/close.svg") no-repeat center center;
	color: white;
	text-decoration: none;
	border-radius: 3em;
	width: 2.5em;
	height: 2.5em;
	z-index: 50;
}
/* board */
#canvas .content.main .events.boardcontrol .tags {
	background: none;
	font-size: 80%;
	border: none;
}
#canvas .content.main .boardcontrol {
	border: 1px solid silver;
	border-width: 1px 0;
	margin-bottom: 2em;
}
#canvas .content.main .boardcontrol form {
	margin: 1em;
	text-align: right;
}
#canvas .content.main .boardcontrol form .text {
	width: 50%;
	margin: 0 .5em;
	border: 1px solid #473523;
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
	z-index: 500;
	background-color: white;
	box-shadow: 0 0 10px black;
}
.ui-autocomplete li {
	padding: .2em .5em;
}
.ui-autocomplete .ui-state-focus {
	background-color: rgba(59, 89, 152, .2);
}