/*
 * Theme Name: EJO Theme
 * Theme URI: e-j-o.de
 * Author: Steffen Tröster & Stephan Krause
 * Author URI: https://netzgestalter.com
 * Description: Design für das Essen Jazz Orchestra
 * Version: 1.1
 *
 */
@font-face {
	font-family: 'Open Sans';
	src: url('fonts/opensans-italic.woff2') format('woff2'),
			 url('fonts/opensans-italic.woff') format('woff');
	font-style: italic;

}
@font-face {
	font-family: 'Open Sans';
	src: url('fonts/opensans-bolditalic.woff2') format('woff2'),
			 url('fonts/opensans-bolditalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;

}
@font-face {
	font-family: 'Open Sans';
	src: url('fonts/opensans-bold.woff2') format('woff2'),
			 url('fonts/opensans-bold.woff') format('woff');
	font-weight: bold;
}
@font-face {
	font-family: 'Open Sans';
	src: url('fonts/opensans-regular.woff2') format('woff2'),
			 url('fonts/opensans-regular.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	src: url('fonts/opensans-light.woff2') format('woff2'),
			 url('fonts/opensans-light.woff') format('woff');
	font-weight: 300;
}
@font-face {
	font-family: 'Open Sans';
	src: url('fonts/opensans-lightitalic.woff2') format('woff2'),
			 url('fonts/opensans-lightitalic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
}

a:visited {color: #501c18;}
a:link, a:hover, a:focus {color: #2e6f37;}
blockquote {
	border-left-width: 3px;
	border-color: #561C18;
}
iframe {max-width: 100%;}
img {
	max-width: 100%;
	height: auto;
}
ul {padding-left: 1em;}
header #logo {
	max-width: 21.563em;
	margin: auto;
	padding-top: 2.5em;
	margin-bottom: 2em;
}
header nav {
	flex: 1 1 0;
	display: flex;
	margin: 0;
}
header nav ul {
	display: flex;
	margin: auto;
}
header nav ul > li {float: none;}
header nav ul > li + li {margin-left: 0;}
header nav ul a {
	text-decoration: none;
	font-weight: bold;
	background-color: rgb(255 255 255 / .3);
}
header nav ul a:link, header nav ul a:visited {color: white;}
header nav ul > li > a:hover, header nav ul > li > a:focus {background-color: rgb(255 255 255 / .6);}
body > footer {position: relative;}
footer .oben {
	position: absolute;
	top: 32em;
	right: 15em;
	font-size: 1px;
	color: #DDD;
	width: 32em;
	height: 32em;
	background-color: currentcolor;
	line-height: 1;
	overflow: hidden;
}
footer .oben:before,
footer .oben:after {
	content: '';
	font-size: 16em;
	color: #222;
	position: absolute;
	top: 50%;
	left: 50%;
}
footer .oben:before {
	transform: translate(-50%, -50%) rotate(45deg);
	border: solid #222;
	border-width: 2px 0 0 2px;
	width: .75em;
	height: .75em;
}
footer .oben:after {
	height: 1em;
	border: solid #222;
	border-width: 0 1px;
	transform: translate(-50%, -50%);
	margin-top: 1px;
}
.home .inhalt h1 {
	position: absolute;
	left: -9999em;
}
.home h2 {
	-moz-hyphens: manual;
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
	font-size: 1.625em;
}
.hero {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5em;
	/* background: linear-gradient(235deg, #2d6e36, #832c23); */
}
.hero .featured {flex: 0 1 60%;}
.hero figure {margin-bottom: 0;}
.hero #konzerte {
	flex: 0 1 35%;
	padding: 1em;
	background-color: white;
	border: 2px solid #561c18;
}
.hero #konzerte h2 {font-size: 1.25em;}
.hero #konzerte ul {
	margin: 0;
	padding: 0;
	list-style: none;
	-moz-hyphens: manual;
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
	margin-bottom: 1em;
}
.hero #konzerte li {
	border-bottom: 1px solid #CCC;
	display: grid;
	grid-template: auto auto / 1fr 2fr;
	padding: .625em 0;
}
.hero #konzerte time {
	grid-area: 1 / 1 / 3 / 2;
	padding-right: .625em;
}
.hero #konzerte .zeit {display: block;}
.hero #konzerte .datum,
.hero #konzerte .ort
	{font-weight: bold;}
.hero #konzerte .veranstaltungsort {
	font-style: italic;
	font-weight: normal;
}
.home .posts {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.home .posts > * {
	flex: 0 1 47%;
	margin-bottom: 4.25em;
}
.home .featured h2 {font-size: 2.625em;}

body > footer .menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribe-common {
	-moz-hyphens: manual;
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
}
.tribe-events .tribe-events-l-container,
.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container
	{padding: 0;}
@media screen and (min-width: 48em) {
	header > section {
		display: flex;
		justify-content: space-between;
	}
	header #logo, header nav {float: none;}
	header #logo {max-width: 25.25em;}
	header nav ul {
		margin-left: auto;
		margin-right: 0;
	}
	footer .oben {
		bottom: 32em;
		left: 0;
		top: auto;
		right: auto;
	}
}

@media screen and (min-width: 61.938em) {
	header nav ul a {
		font-size: 1.25em;
	}
}
@media screen and (max-width: 61.938em) {
	.hero #konzerte li,
	.hero #konzerte time
	{
		display: block;
		padding-right: 0;
	}
	.hero #konzerte .zeit {display: inline;}
}
@media screen and (max-width: 40em) {
	.hero, .home .posts {display: block;}
	.hero {margin-bottom: 2em;}
	.hero .featured {margin-bottom: 2em;}
	.home .posts > * {
		position: relative;
		padding-bottom: 2em;
		margin-bottom: 2em;
	}
	.home .posts > :after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		border-top: 1px solid #CCC;
		width: 20em;
		transform: translateX(-50%);
	}
	.home .posts > :last-child {padding-bottom: 0;}
	.home .posts > :last-child:after {content: none;}
}