@font-face { font-family: 'Raleway'; src: url('../fonts/Raleway-VariableFont_wght.ttf'); }
@font-face { font-family: 'Raleway'; src: url('../fonts/Raleway-Italic-VariableFont_wght.ttf'); font-style: italic; }

*, *:before, *:after { box-sizing: inherit; }
html { box-sizing: border-box; font-size: 100%; }
html, body { height: 100%; margin: 0; }
a { color: #fc3204; }
	a:hover, a:active { color: #fe9f05; }
	footer a, footer nav a { color: #fff; text-decoration: none; }
	a.current { color: #000; }
aside { background: url('../images/aside.jpg') center bottom no-repeat; background-size: cover !important; color: #fff; min-height: 350px; }
	.bookshop aside { background: url('../images/aside-illustration.png') center center no-repeat; }
	.order aside { background: url('../images/aside2.jpg') left bottom no-repeat; }
	.contact aside { background: url('../images/aside5.jpg') left bottom no-repeat; }
	.photos aside { background: url('../images/aside4.jpg') left center no-repeat; }
	.books aside { background: url('../images/aside-books.jpg') left center no-repeat; }
	.books.bd aside { background: url('../images/aside-bd.jpg') left center no-repeat; }
	.books.kids aside { background: url('../images/aside-kids.jpg') left center no-repeat; }
body { background: #fdfeec; color: #333; font-family: 'Raleway', sans-serif; font-size: 14px; line-height: 1.4; }
blockquote { font-style: italic; }
footer { background: #282828; color: #fff; font-size: 1rem; padding: 1rem 0 0 0; }
	footer .container.grid { padding-bottom: 1.8rem; }
	footer h5 { margin: 1.5rem 0 1rem 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.1; margin: 1rem 0; }
	h1, h2, h3, h4, h6 { font-family: 'Courier New', monospace; }
	h4, h5, h6 { margin: 0; }
	h1 { color: #fc3204; font-size: 2rem; text-transform: uppercase; }
	section h2 { font-size: 1.3rem; letter-spacing: -1px; }
	header h2, .selection h4, .selection h6, footer h6, .order h6 { font-family: 'Raleway', sans-serif; }
	.front-page h2, .articles h2 { text-transform: uppercase; }
	header h2 { margin: 1rem 0 0.4rem 0; }
	.home header h2 { margin: 0.4rem 0; }
	h3 { color: #fc3204; font-size: 1.3rem; letter-spacing: -1px; }
	.events h3, .margin-bottom { margin-bottom: 1.4rem; }
	h4 { font-size: 1.2rem; }
	h5 { font-size: 1.1rem; text-transform: uppercase; }
	.order section h5 { margin-top: 1.3rem; }
	h6 { font-size: 1rem; }
	.events .centre h6 { margin: 0.4rem 0 0.2rem 0; line-height: 1.2; }
	.articles h2, .lectures h2 { color: #fff; margin-bottom: 2rem; }
	.read-more { padding: 1.5rem 0 1rem 0; }
	.home h2 span { background: #fc3204; display: inline-block; padding: 0.5rem 1.8rem; }
	.vitrine h5 { font-weight: 400; margin: 0.3rem 0 0.6rem 0; }
header { padding: 1rem 0; }
header, footer { font-family: 'Raleway', sans-serif; overflow: auto; }
hr { border: none; border-top: medium double #fc3204; clear: both; color: #fc3204; margin: 3.5rem 0 0 0; overflow: visible; padding: 0; text-align: center; }
		hr:after { content: "✦"; display: inline-block; position: relative; top: -1.5rem; font-size: 2rem; padding: 0 0.25rem; }
iframe { border: 0; min-height: 240px; overflow: scroll; width: 100%; }
img { max-width: 100%; }
	.events img.partner { max-width: 200px; }
input, button { font-family: 'Raleway', sans-serif; font-size: 1em; font-weight: 500; padding: 0.5rem 1rem; }
input.search { margin-right: 0.5rem; width: 50%; }
input[type=text] { padding: 1rem; }
input[type=email] { border: 1px solid #ccc; margin-right: 5px; }
button, [type=submit] { background: #fc3204; border: 1px solid #fc3204; color: #fff; cursor: pointer; margin: 0.8rem 0; }
button:hover, [type=submit]:hover { background: #fe9f05; border: 1px solid #fe9f05; }
label { display: block; font-weight: 600; margin: 0.5rem 0; }
p { margin: 1rem 0; }
	.grid.hours p { margin: 0; }
section, .container, header > div { margin: 0 auto; width: 92%; }
	section { margin: 3rem auto 5rem auto; }
strong { font-weight: 600; }
.address-hours { background: #000; color: #fff; font-family: 'Raleway', sans-serif; font-size: 1rem; font-weight: 500; padding: 0.5rem; }
	.address-hours a { text-decoration: none; }
	.address-hours span, .logo span, .copyright span { margin: 0 0.5rem; }
.album { background: #f6eee0; padding: 1.5rem 2.5rem; margin: 1rem 0; }
	.album img { float: left; margin: 1rem 1.5rem 0.7rem 0; }
	.album h3 { margin-top: 0.8rem; }
	.album h3 a { text-decoration: none; }
.articles { grid-template-columns: 1fr 1fr; grid-column-gap: 3rem; }
.book, .grey, .articles > div, .events section > div > div, .edito section > div { background: #f6eee0; padding: 1.5rem 2.5rem; margin-bottom: 2rem; overflow: auto; }
	.articles > div { margin-bottom: 1rem; }
	.book h3 { color: #fc3204; }
	.book h5, .edito section h5, .events section h5 { font-size: 1rem; font-weight: 400; margin: 0.3rem 0 0.4rem 0; }
	.book img, .grey img, .articles img, .edito section img { float: left; margin: 0 1.5rem 0.7rem 0; }
.books .grid { grid-template-columns: 1fr 3fr; }
	.books .grid div:first-child ul, .events .grid div:first-child ul { font-size: 1.2rem; list-style: none; padding-left: 0; }
.centre { text-align: center; }
	.events .centre { margin: 1.3rem 0; }
.citation { background: url('../images/citation.png') right 1rem no-repeat; font-size: 0.85rem; min-height: 84px; padding-right: 3rem; }
.citation span, .citation strong { display: block; text-align: right; }
.citation strong { font-weight: 600; }
.clear { clear: both; }
.copyright { background: #000; font-size: 1rem; padding: 0.2rem 0; }
.events .grid { grid-template-columns: 1fr 4fr; }
.front-page { background-color: #f6eee0; padding: 2.5rem; }
.genres { font-family: 'Raleway', sans-serif; font-size: 1.1rem; text-align: center; }
	.genres ul { justify-content: center; list-style: none; padding-left: 0; }
	.genres ul li { margin: 0 0.5rem; }
.grid.hours { grid-template-columns: 1fr 1fr; }
.lectures div { border-bottom: 1px solid #999; display: grid; grid-template-columns: 1fr 1fr; font-family: 'Raleway', sans-serif; font-size: 1rem; }
	.lectures div:nth-child(odd) { background: #f6eee0; }
	.lectures span { padding: 0.5rem 1.5rem; }
	.lectures div span:first-child { font-weight: 500; }
	.lectures h3 { margin-top: 1.5rem; }
.lightbox img { margin: 0 1rem 1rem 0; }
.margin-top-zero { margin-top: 0; }
.margin-bottom-zero { margin-bottom: 0 !important; }
.margin-bottom-half { margin-bottom: 0.5rem; }
.menu { padding-top: 3rem; }
.quote { background: url('../images/curly-brace.png') left top no-repeat; font-style: italic; margin: 2rem 0 0 0; padding-left: 3rem; }
.quote span { display: block; font-family: 'Raleway', sans-serif; font-size: 0.9rem; font-style: normal; }
.red, .star { color: #fc3204; }
.search { height: 30px; }
.selection { display: grid; grid-template-columns: 1fr 1fr; margin: 3.1rem 0 0 0; }
	.selection div { margin: 0.5rem 0 1.5rem 0; }
	.selection h4 { font-size: 1.1rem; font-weight: 600; margin-top: 0.3rem; }
	.selection h5 { font-size: 0.8rem; font-weight: 500; margin: 0.2rem 0; }
	.selection h6 { font-size: 1rem; }
.social img { margin-right: 0.6rem; }
.star { clear: both; font-size: 1.8rem; text-align: center; }

/*============================ Menu ============================*/

nav { font-weight: 500; padding-bottom: 0.1rem; }
nav a { color: #000; text-decoration: none; }
nav a:hover, .nav a:active { color: #e64441; }
nav li { margin: 0 2rem 0 0; list-style: none; }
nav ul { margin-top: 0.3rem; margin-bottom: 0.3rem; padding: 0; }
.home a.menu-home, .bookshop a.menu-bookshop, .books a.menu-books, .order a.menu-order, .edito a.menu-edito, .newsletter a.menu-newsletter, .events a.menu-events, .photos a.menu-photos, .chroniques a.menu-chroniques, .links a.menu-links, .contact a.menu-contact, .impressum a.menu-impressum, .datenschutzerklaerung a.menu-datenschutzerklaerung { color: #fc3204; }
header nav { font-size: 1.3rem; padding-top: 0.5rem; }

/*============================ Media Queries ============================*/

@media (max-width: 850px) {
	.lectures div { font-size: 0.9rem; }
}

@media (min-width: 980px) {
	header nav li { display: inline; }
	.events img, .articles img, .edito img { max-height: 400px; max-width: 500px; }
	.genres ul { display: flex; }
	.lectures div { line-height: 2.2rem; }
	.quotation div { width: 60%; }
	.selection img { max-height: 300px; max-width: 220px; }
	.vitrine img { max-height: 330px; max-width: 240px; }
}

@media (min-width: 980px) and (max-width: 1199px) {
	.selection { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

@media (min-width: 1200px) {
	header h2 { margin: 2rem 0 3rem 0; }
	.header-three { display: grid; grid-template-columns: 2fr 3fr 2fr; grid-column-gap: 1rem; }
	section, .container, header > div { width: 85%; }
	.logo { text-align: center; }
	header nav { text-align: center; }
	footer .container.grid { grid-template-columns: 2fr 2fr 1fr; grid-column-gap: 3rem; }
	.articles { display: grid; }
	.bookshop .grid, .order .grid, .newsletter .grid { grid-template-columns: 1fr 1fr; grid-column-gap: 3rem; }
	.bookshop .star, .order .star { display: none; }
	.citation { min-height: 200px; }
	.photos.grid { grid-template-columns: 1fr 1fr; grid-column-gap: 2rem; }
	.flex { display: flex; column-gap: 2rem; align-content: center; }
	.float { float: left; margin: 0 2rem 2rem 0; }
	.float-right, .edito img.float-right { float: right; margin: 0 0 2rem 2rem; }
	.genres ul a { border: 1px solid #fc3204; display: inline-block; padding: 0.5rem 1rem; text-decoration: none; }
	.genres ul a:hover, .genres ul a:active { background: #fc3204; color: #fff }
	.grid { display: grid; }
	.grid.hours { margin-bottom: 2.5rem; }
	.selection { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
}