@charset "utf-8";

/*----- menu -----*/
section.menu h2 { display: none; }
section.menu ol {
	list-style: none;
	background: url('menu.png') no-repeat center / 100% auto;
	height: 50vw;
	display: -webkit-flex;
	display: flex;
}
section.menu li {
	display: -webkit-flex; -webkit-flex-basis: 100px;
	display: flex; flex-basis: 100px;
}
section.menu a {
	-webkit-flex-glow: 1;
	flex-glow: 1;
}
section.menu span { opacity: 0; }

section.menu li:nth-of-type(1) {
	-webkit-order: 4;
	order: 4;
}
section.menu li:nth-of-type(2) {
	-webkit-order: 2;
	order: 2;
}
section.menu li:nth-of-type(3) {
	-webkit-order: 1;
	order: 1;
}
section.menu li:nth-of-type(4) {
	-webkit-order: 8;
	order: 8;
}
section.menu li:nth-of-type(5) {
	-webkit-order: 7;
	order: 7;
}
section.menu li:nth-of-type(6) {
	-webkit-order: 5;
	order: 5;
}
section.menu li:nth-of-type(7) {
	-webkit-order: 6;
	order: 6;
}
section.menu li:nth-of-type(8) {
	-webkit-order: 3;
	order: 3;
}

/*----- characters -----*/
section:not(.menu) {
	background: no-repeat 50% calc(255px + 7em) / 8em 8em;
	padding-bottom: 60px;
	position: relative;
	width: 90%;
	margin: 1em auto 6em;
}
section h2 { font-size: 140%; font-weight: bold; padding-top: 5em; }
section p { line-height: 200%; }
section p.image {
	text-align: center;
	line-height: 100%;
	margin: 2em 0;
}

section.ququ { background-image: url('ququ_bg.jpg'); }
section.coco { background-image: url('coco_bg.jpg'); }
section.kesla { background-image: url('kesla_bg.jpg'); }
section.mariene { background-image: url('mariene_bg.jpg'); }
section.hoffbon { background-image: url('hoffbon_bg.jpg'); }
section.keel { background-image: url('keel_bg.jpg'); }
section.juli { background-image: url('juli_bg.jpg'); }
section.swimul { background-image: url('swimul_bg.jpg'); }

section ul {
	list-style: none;
	position: absolute;
	bottom: 0; right: 0;
}
section ul>li { float: left; margin-left: 1em; }

section p.twitter { position: absolute; bottom: -3.5em; right: 0; }