/* mobile layout - applies only to narrow screens, desktop is unchanged */

@media (max-width: 780px) {

	body {
		background: white;
		font-size: 15px;
		line-height: 24px;
		-webkit-text-size-adjust: 100%;
	}

	#right {
		display: none;
	}

	#background {
		background: none;
	}

	#center {
		display: flex;
		flex-direction: column;
		padding: 0 0 40px;
		width: auto;
		background: none;
	}


	/* header */

	h1 {
		position: static;
		margin: 16px 16px 8px;
	}

	#motto {
		position: static;
		margin: 0 16px 14px;
		width: auto;
		max-width: 500px;
		height: 21px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left center;
	}


	/* main menu: three photos side by side (scaled down, so they stay sharp), text labels instead of image labels */

	#menu {
		display: flex;
		position: static;
		width: auto;
		height: auto;
		border-top: 12px solid #2B2B2B;
	}

	#menu a {
		flex: 1 1 0;
		min-width: 0;
		position: static;
		margin-left: 2px;
		padding-top: calc((100% - 4px) * 0.173);	/* % is of the whole menu width: photo 250 x 130 in one third */
		width: auto;
		height: auto;
		background-image: url('../images/menu.jpg');
		background-size: 303.2% auto;
		background-repeat: no-repeat;
		background-color: #1E1B1A;
		text-decoration: none;
	}

	#menu a.menu1 {
		margin-left: 0;
		background-position: 0.4% 0;
	}

	#menu a.menu2 {
		background-position: 50% 0;
	}

	#menu a.menu3 {
		background-position: 99.6% 0;
	}

	#menu a span {
		display: block;
		padding: 5px 6px 6px;
		min-height: 30px;
		background: #1E1B1A;
		color: white;
		font-size: 12px;
		line-height: 15px;
		font-style: italic;
		font-weight: bold;
		overflow-wrap: break-word;
		-webkit-hyphens: manual;
		hyphens: manual;
	}

	#menu a:hover span,
	#menu a:focus span {
		background: rgba(11, 124, 128, 0.85);
	}


	/* submenu */

	#submenu {
		display: flex;
		flex-wrap: wrap;
		position: static;
		padding: 8px;
		width: auto;
		background: #2B2B2B;
		font-size: 13px;
		line-height: 28px;
		white-space: nowrap;
	}

	#submenu_right {
		float: none;
		order: 2;
		margin-left: auto;
		font-size: 0;
	}

	#submenu a {
		margin-right: 10px;
	}

	/* languages as flag + code (EN, DE, RU), so the whole bar fits one line */
	#submenu_right a {
		display: inline-block;
		margin: 0 0 0 9px;
		padding-left: 17px;
		font-size: 0;
	}

	#submenu_right a:after {
		content: attr(id);
		font-size: 13px;
		text-transform: uppercase;
	}


	/* content */

	#submenu {
		margin-bottom: 24px;
	}

	#center > h2 {
		margin: 0 16px 12px;
	}

	.left,
	.right {
		float: none;
		margin: 0 16px 24px;
		width: auto;
	}

	.right {
		order: 1;
	}

	h2 {
		max-width: 100%;
		background-repeat: no-repeat;
	}

	p,
	h3 {
		padding-left: 0;
	}

	h3 {
		font-size: 15px;
	}

	ul,
	.leftul ul {
		padding-left: 22px;
	}

	img {
		max-width: 100%;
		height: auto;
	}
}